美文网首页工作生活
css学习(例如选择器、keyframes实现原点、实现蒙版 )

css学习(例如选择器、keyframes实现原点、实现蒙版 )

作者: 二营长家的张大炮 | 来源:发表于2019-06-30 10:36 被阅读0次

1.&
这是sass less中的语法 代表选择当前元素

2.nth-of-type
这个 CSS 伪类匹配文档树中在其之前具有 *a*n+*b*-1 个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。

3.keyframes

.hasHand{
    opacity: 1;
    animation: show-hand 2s ease-in forwards;
}
.noHand{
    animation: hide-hand 2s ease-out forwards;
}
@keyframes show-hand{
    0%{
        opacity: 0;
        color: aquamarine
    }
    50%{
        opacity: .5;
        color: yellow;
    }
    100%{
        opacity: 1;
        color: tomato
    }
}
@keyframes hide-hand{
    0%{
        opacity: 1;
        color: aquamarine
    }
    50%{
        opacity: .5;
        color: blanchedalmond
    }
    100%{
        opacity: 0;
        color: cornsilk
    }
}

react官方推荐动画库

react-transition-group
image.png 
.boxtext-enter {
   opacity: 0;
}
.boxtext-enter-active {
   opacity: 1;
   transition: 2s ease-in;
}
.boxtext-enter-done {
   opacity: 1;
}
.boxtext-exit {
   opacity: 1;
}
.boxtext-exit-active {
   opacity: 0;
   transition: 2s ease-out;
}
.boxtext-exit-done {
   opacity: 0;
}
image.png 
 <div class="circle"></div>

  .circle {
      position: absolute;
      margin: 52px 45px;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      border: 1px solid #2090ff;
    }
    
    .circle:after {
      content: '';
      margin: 3px;
      display: table;
      width: 6px;
      height: 6px;
      background: #2090ff;
      border-radius: 50%;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .ball-wrapper {
        width: 100%;
        height: 400px;
        border-bottom: 1px solid #eee;
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .ball {
        margin-bottom: 300px;
        width: 100px;
        height: 100px;
        border-radius: 50%; /* 把正方形变成圆形*/
        background-color: #ff5722; /* 设置颜色为橙色*/
        /* 
         这里用数字创建一个（慢，慢，慢，快）的曲线 – 
        */
        animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5);
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }
      /* 
        使用关键字 @keyframes，在后面跟动画名称
        在 Keyframe 中，用 from 和 to 关键字来指定动画开始点和结尾点的 CSS 样式。
        我们使用 transform 让球沿着三维轴平移，translate3D 函数需要 3 个输入参数，即 (x, y, z) 。
         因为我们想让球上下跳动，我们只需要沿着 y 轴进行平移。因此，动画结束点（即 to 中样式）的 y 值变成了 300px 。
      */
      @keyframes bounce {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(0, 300px, 0);
        }
      }
      /* 这里可以自定义动画名 */
      @keyframes mykeyframes {
        0% {
          left: 0px;
        }
        50% {
          left: 200px;
        }
        100% {
          left: 0;
        }
      }
      .square {
        position: absolute;
        width: 60px;
        height: 60px;
        background: #06a5ff;
        animation: mykeyframes 3s cubic-bezier(0.8, 0.04, 0.83, 0.67) infinite;
      }
      .yuandian {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #06a5ff;
        background: #fff;
      }

      .yuandian::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #06a5ff;
      }
    </style>
  </head>
  <body>
    <div class="ball-wrapper">
      <div class="ball"></div>
    </div>
    <div class="square"></div>
    <div class="yuandian"></div>
  </body>
</html>
image.png

@keyframes:https://www.cnblogs.com/yadiblogs/p/8460489.html
cubic-bezier:https://cubic-bezier.com/#.8,.04,.83,.67

4.实现蒙版

.mongolian-layer {
  margin-top: 25rpx;
  width: 29rpx;
  height: 35rpx;
  position: absolute;
  top: 0;
  left: 82%;
}

.hasshadow {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1)); /* 标准的语法 */
}
image.png

5.vh vw


image.png

6.部分前端新特性

圆角-半径（border-radius:8px），
阴影（box-shadow:10px），
文字特效（text-shadow、），
线性渐变（gradient），
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器
多背景 rgba

7.常见的兼容性问题

(1)png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
(2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
(3)IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
(4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性；
解决方法:统一通过getAttribute()获取自定义属性。
(5)
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性；
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
(6)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8.实现放大缩小

<button class="button"></button>
<style type="text/css">
        .button{
            margin: 100px;
            width: 30px;
            height:30px;
            background: orange;
            border-radius: 50px;
            animation: flipping 5s infinite;

            /*去除button默认边框*/
            background-position-x: -7px;
            background-position-y: -7px;
            border: 1px;
            outline: none;
        }

        @keyframes flipping{
        0%{
            opacity: .2;
            transform: scale(1);
        }
        25%{
            opacity: 1;
            box-shadow:  0 0 15px orange;
            transform: scale(1.4);
        }
        50%{
            opacity: .2;
            transform: scale(1);
        }
        75%{
            opacity: 1;
            box-shadow:  0 0 15px orange;
            transform: scale(1.4);
        }
        100%{
            opacity: .2;
            transform: scale(1);
        }
    }
    </style>

涟漪扩散

 <div class="live">
         <img src="images/live.png" alt="">
         <span></span>
         <span></span>
     </div>
.live{
           position: relative;
           width: 100px;
           height: 100px;
       }
       .live img{
           width: 100px;
           height: 100px;
           z-index: 0;
       }
        @keyframes living {
            0%{
                transform: scale(1);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.5);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform: scale(1);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: #fff;
            border-radius: 50%;
            -webkit-animation: living 3s linear infinite;
            z-index: -1;
        }
        .live span:nth-child(2){
            -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
        }

雷达

<div class="container">
    <div class="dot"></div>
    <div class="pulse p1"></div>
    <div class="pulse p2"></div>
</div>

.container {
position: relative;
}

.dot {
position: absolute;
width: 10px;
height: 10px;
left: 160px;
top: 160px;
border-radius: 50%;
border: 1px solid #33ccff;
background-color: #33ccff;
}

.pulse {
position: absolute;
width: 88px;
height: 88px;
left: 120px;
top: 120px;
border: 2px solid #3399ff;
border-radius: 50%;
opacity: 0; 
}

.p1 {
animation: warn 2s ease-out infinite;
}
.p2 {
animation: warn2 2s ease-out infinite;
}
/*.p1 {
animation: warn 2s ease-out infinite;
}
.p2 {
animation: warn 2s ease-out infinite;
-webkit-animation-delay: 1.5s;
}*/

@keyframes warn {
0% {transform: scale(0.3);opacity: 0.0;}

25% {transform: scale(0.3);opacity: 0.1;}

50% {transform: scale(0.5);opacity: 0.3;}

75% {transform: scale(0.8);opacity: 0.5;}

100% {transform: scale(1);opacity: 0.0;}
}

@keyframes warn2 {
0% {transform: scale(0.3);opacity: 0.0;}

25% {transform: scale(0.3);opacity: 0.1;}

50% {transform: scale(0.3);opacity: 0.3;}

75% {transform: scale(0.5);opacity: 0.5;}

100% {transform: scale(0.8);opacity: 0.0;}
}

相关文章

  • 4 jQuery04 动画

    1、前端领域实现动画效果的技术：(1).css transition; (2).css keyframes; (3...

  • 用css实现幻灯片效果

    实现过程比较简单，用css3新属性animation配合@keyframes就可以实现了

  • 动态的给容器添加蒙版效果的弹出层

    创建测试HTML 结构 CSS 样式编写 实现 JS 切换方法 初始隐藏蒙版的效果 显示蒙版后的效果

  • web前端中的遮罩蒙版

    在前端开发中，有一些效果需要实现遮罩蒙版的效果，有几种方案，记录一下 CSS实现 css 中mask属性，最早是出...

  • CSS3动画（animation @keyframes）

    CSS3 @keyframes 规则：在使用@keyframes创建动画时，如果不绑定到选择器，则不会出现动画效果...

  • 2018-08-15

    CSS动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes 规...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes ...

  • 引导页面的蒙版镂空和屏幕适配

    作者：饶尧；标签: 引导页面的蒙版镂空和屏幕适配，技巧 需求 实现一个遮罩蒙版引导 实现难点 镂空蒙版实现方案 箭...

  • Css3动画.md

    Css3可以实现动画，代替原来的Flash和JavaScript方案。首先，使用 @keyframes定义一个动画...

  • 2018-01-19 CSS选择器、维管系统-桌面待办事项、A

    第一组：杨昊 CSS选择器 CSS选择器——hover Css3中有好多使用的选择器，上次分享了动画的实现，今天...

网友评论

    本文标题：css学习(例如选择器、keyframes实现原点、实现蒙版 )

    本文链接：https://www.haomeiwen.com/subject/vynwcctx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    工作生活

    关于我们|服务条款|联系我们|css学习(例如选择器、keyframes实现原点、实现蒙版 )|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！