css3 属性笔记(一)

最新推荐文章于 2024-09-06 19:25:49 发布

QDzzzhy

最新推荐文章于 2024-09-06 19:25:49 发布

阅读量347

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_40571631/article/details/90085830

版权

conic-gradient()

圆锥渐变,参数中指定渐变的颜色
用法: background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
效果(这里通过border-radius将其变为了圆形)

radial-gradient

径向渐变,参数中统用指定渐变的颜色
用法: background: radial-gradient(#9ED110, #50B517, #179067, #476EAF, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
效果:

mask

遮罩,chrome需要添加 -webkit- 前缀
用法: -webkit-mask: radial-gradient(transparent 150px,#000 150px); 使用了径向渐变并将填充颜色设为透明,半径为150px
效果(刚才的圆锥渐变被切割为圆环):

clip-path

创建一个只有元素的部分区域可以显示的剪切区域,区域内的部分显示,区域外的隐藏.剪切区域是被引用的url路径或外部svg的路径.它代替了弃用的clip属性
还是上面的圆锥渐变的图形
- 如果设置了 clip-path:circle(20%),则只显示中心20%圆区域的部分(也可以设置其他形状,比如inset()矩形;ellipse()椭圆;具体用法参考MDN API)
- 效果
- 如果设置了 clip-path: polygon(200px 200px, 200px 0, 0 0), 其中 ploygon 表示多边形,后面的参数每一个逗号都是一个点的坐标,这里的意思就是切割点 (200px,200px),点(200px 0),点(0,0) 围成的三角形.注意:这里的坐标都是基于文档
- 效果

小demo,彩虹环倒计时

div {
     width: 400px;
     height: 400px;
     background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
     border-radius: 50%;
     -webkit-mask: radial-gradient(transparent 150px,#000 150px);
     animation: auto-play 10s forwards;
}   
@keyframes auto-play {
     10% {
          clip-path: polygon(200px 0, 200px 200px, 54px 0, 0 0, 0 400px, 400px 400px, 400px 0)
      }
     20% {
           clip-path: polygon(200px 0, 200px 200px, -416px 0,-416px 400px, 0 400px, 400px 400px,400px 0)
      }
     30% {
  		   clip-path: polygon(200px 0, 200px 200px, 0 264px,0 400px,200px 400px, 400px 400px,400px 0)
     }
     40% {
           clip-path: polygon(200px 0, 200px 200px, 0 476px, 200px 476px,400px 476px, 400px 400px,400px 0)
     }
     50% {
          clip-path: polygon(200px 0,200px 200px, 200px 400px, 400px 400px, 400px 200px, 400px 100px, 400px 0)
     }
     60% {
          clip-path: polygon(200px 0, 200px 200px, 346px 400px, 350px 400px, 400px 400px, 400px 200px, 400px 0)
     }
     70% {
         clip-path: polygon(200px 0, 200px 200px, 816px 400px,816px 300px, 816px 100px, 816px 0px, 400px 0)
     }
     80% {
         clip-path: polygon(200px 0, 200px 200px, 400px 136px, 400px 100px, 400px 50px, 400px 20px, 400px 0)
     }
     90% {
         clip-path: polygon(200px 0, 200px 200px, 400px -76px, 300px -76px, 200px -76px, 100px -76px, 0 -76px)
    }
     100% {
         clip-path: polygon(0 0)
     }
 }

这个代码还有不完善的地方,开始的时候会没有过渡效果,个人目前没有找到解决方案,希望知道问题所在的大神能指点一二,感激不尽