一些有趣的css动画

.wrapperspan{position:absolute;显示：块；}.wrapper跨度：nth-??child(1){top:0;左：-100%；宽度：100%；高度：2px；动画：btn-anim14s线性无限；}@keyframesbtn-anim1{0%{左：-100%；}50%,100%{左:100%;}}。wrapperspan:nth-child(2){...动画：btn-anim24s线性无限；animation-delay:1s;}@keyframesbtn-anim2{0%{top:-100%;}50%,100%{顶部:100%;}}.wrapperspan:nth-child(3){...动画：btn-anim34s线性无限；animation-delay:2s;}*前言时间过得太快了，上次更新文章已经是一年前了。三维生活最近很忙，现在百忙之中抽空写文章。最近在大屏上写了很多，其中有不少有趣的CSS动画，记录一下吧。*正文1.抽屉效果淡入，网上代码使用clip-path来裁剪view。Clip-path多用于绘制不规则图形。@keyframesclip-enter{0%{clip-path:polygon(00,00,0100%,0100%);}100%{剪辑路径：多边形(00,100%0,100%100%,0100%);}}2。流动边框在线代码使用四个绝对定位的span作为边框。比如第一个span标签绝对定位在顶部，作为上边框，设置left:-100%，让它从左边开始。设置动画，改变它的左边。注意这里的动画中，left要在50%时设置为100%，也就是让它完成从左到右的路径。其余三个跨度标签依此类推。这里需要注意的是如何让这四个动画无缝衔接。我们需要设置每个动画的开始时间（animation-delay）。第一个动画为0，立即播放。第二个动画的开始时间应该是第一个动画的总时间/4。第三段是累积的，依此类推。//关键代码.wrapperspan{position:absolute;显示：块；}.wrapper跨度：nth-??child(1){top:0;左：-100%；宽度：100%；高度：2px；动画：btn-anim14s线性无限；}@keyframesbtn-anim1{0%{左：-100%；}50%,100%{左:100%;}}。wrapperspan:nth-child(2){...动画：btn-anim24s线性无限；animation-delay:1s;}@keyframesbtn-anim2{0%{top:-100%;}50%,100%{顶部:100%;}}.wrapperspan:nth-child(3){...动画：btn-anim34s线性无限；animation-delay:2s;}3、星图在线代码是这样的核心代码是通过css函数multiple-box-shadow动态设置box-shadow，通过box-shadow绘制星星。@functionmultiple-box-shadow($n){$value:'#{random(2000)}px#{random(2000)}px#A1F5FF';@for$i从2到$n{$value:'#{$value},#{random(2000)}px#{random(2000)}px#A1F5FF';}@returnunquote($value);}$shadows-small:multiple-box-shadow(500);#stars{position:relative;宽度：1px；高度：1px；背景：透明；盒子阴影：$shadows-small；动画：animStar60s线性无限；&:{内容之后：'';位置：绝对；顶部：2000px；宽度：1px；高度：1px；背景：透明；盒子阴影：$shadows-small；}}@keyframesanimStar{来自{transform:translateY(0px);}到{转换：translateY(-2000px);}}4.条形码扫描在线地址这是下面雷达扫描图像的超简化版本。用渐变色画一个矩形，通过动画改变它的位置，达到扫描的效果。*雷达扫描图的在线代码分为两部分，panel绘制雷达图，scan负责绘制扫描区域。.panel{宽度：300像素；高度：300px；边界半径：50%；溢出：隐藏；border:1pxsolidrgba(0,220,255,0.4);//绘制最外圈背景：radial-gradient(//按颜色渐变绘制内圈circle,transparent50px,rgba(0,220,255,1)51px,transparent52px,transparent101px,rgba(0,220,255,0.5)102px,透明103px);.scanner{动画：扫描6s无限线性；background-image:linear-gradient(//阴影区域是右上角的三角形，rgba(0,220,255,1)0%,transparent50%);变换原点：左上；位置：绝对；//将扫描仪定位在面板顶部的中心：50%；左：50%；宽度：100%；高度：100%；border-left:1pxsolidrgba(0,220,255,1);}&:before{//画一条水平线content:'';显示：块；位置：绝对；顶部:0;左：50%；宽度：1px；高度：100%；背景：RGBA（0、220、255、0.5）；}&:after{//画一条竖线content:'';显示：块；位置：绝对；顶部：50%；左：0；宽度：100%；高度：1px；背景：RGBA（0、220、255、0.5）；}}@keyframesscanning{100%{transform:(rotate(360deg));}}*结束语以上是一些有趣的css动画，录制完毕，期待下次再见。