* 前言
工夫过得也太快了吧，上一次更新文章曾经是一年前了。最近三次元生存挺忙的，此刻忙里偷闲，来写写文章。近期大屏写的比拟多，其中有挺多乏味的css动画，那么就来记录一下吧。
* 注释
1. 抽屉成果淡入
在线代码
使用到clip-path对视图进行裁剪。clip-path多利用于绘制不规则图形。
@keyframes clip-enter { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }}2. 流动的边框
在线代码
通过四个相对定位的span当做边框。例如第一个span标签，就相对定位在上方，当成上边框，设置left：-100%,让它从右边开始登程。设置animation，更改它的left。留神，这里的动画，50%的时候就应该把left设置到100%，也就是让它走完从左到右的门路。剩下的三个span标签以此类推。
这里须要留神的是如何让这四个animation无缝连贯。咱们须要设置每段动画的开始工夫(animation-delay)。第一段动画为0，马上播放。第二个动画应该开始工夫应该是第一段动画总工夫/4。第三段累加，类推。
// 要害代码<template> <div class="wrapper"> <span></span> <span></span> <span></span> <span></span> <slot></slot> </div></template><style lang="scss" scoped>.wrapper span { position: absolute; display: block;}.wrapper span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; animation: btn-anim1 4s linear infinite;}@keyframes btn-anim1 { 0% { left: -100%; } 50%, 100% { left: 100%; }}.wrapper span:nth-child(2) { ... animation: btn-anim2 4s linear infinite; animation-delay: 1s;}@keyframes btn-anim2 { 0% { top: -100%; } 50%, 100% { top: 100%; }}.wrapper span:nth-child(3) { ... animation: btn-anim3 4s linear infinite; animation-delay: 2s;}</style>3. 星空图
在线代码
这个的外围代码就是通过css函数multiple-box-shadow动静设置box-shadow,通过box-shadow来绘制星星。
<template> <div id="app"> <div id="stars"></div> </div></template><style lang="scss" scoped>@function multiple-box-shadow($n) { $value: '#{random(2000)}px #{random(2000)}px #A1F5FF'; @for $i from 2 through $n { $value: '#{$value} , #{random(2000)}px #{random(2000)}px #A1F5FF'; } @return unquote($value);}$shadows-small: multiple-box-shadow(500);#stars { position: relative; width: 1px; height: 1px; background: transparent; box-shadow: $shadows-small; animation: animStar 60s linear infinite; &:after { content: ' '; position: absolute; top: 2000px; width: 1px; height: 1px; background: transparent; box-shadow: $shadows-small; } }@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); }}</style>4. 类条形码扫描
在线地址
这个算是上面雷达扫描图的超简易版，绘制一个渐变色的长方形，通过animation扭转它的地位达到扫描的成果。
<template> <div id="rectangle"></div></template><style>#rectangle { position: relative; width: 80px; height: 100px; background-image: linear-gradient( to left, rgba(0, 220, 255, 0.6) 0%, transparent 100% ); border-right: 1px solid rgba(0, 220, 255, 1); animation: scan 6s linear infinite;}@keyframes scan { 0% { left: 0%; } 100% { left: 100%; }}</style>* 雷达扫描图
在线代码
分为两局部，panel绘制雷达图，scan负责绘制扫描区域。
<template> <div class="panel" ref="panel"> <div class="scanner"></div> </div></template><style lang="scss" scoped>.panel { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0, 220, 255, 0.4); // 绘制最外层的圈 background: radial-gradient( // 通过色彩突变绘制内圈 circle, transparent 50px, rgba(0, 220, 255, 1) 51px, transparent 52px, transparent 101px, rgba(0, 220, 255, 0.5) 102px, transparent 103px ); .scanner { animation: scanning 6s infinite linear; background-image: linear-gradient( // 着色区域为三角形 to top right, rgba(0, 220, 255, 1) 0%, transparent 50% ); transform-origin: top left; position: absolute; // 让scanner定位在panel的圆心 top: 50%; left: 50%; width: 100%; height: 100%; border-left: 1px solid rgba(0, 220, 255, 1); } &:before { // 绘制水平线 content: ''; display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: rgba(0, 220, 255, 0.5); } &:after { // 绘制垂直线 content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(0, 220, 255, 0.5); }}@keyframes scanning { 100% { transform: (rotate(360deg)); }}</style>* 结语
以上就是一些乏味的css动画了。记录结束，期待下次再见。