需求分析
需要实现类似下图中的动态流光线条效果:
思路
提到这种动态绘制矢量图形的需求,一般会想到使用canvas;由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实现此效果的尝试过程:
①实现一条带有静态“流光”效果的边,参考CSS渐变背景;
②实现静态线条的“流光”动画效果,参考纯CSS实现背景颜色渐变动画;
③将以上步骤得到的流光边进行旋转(参考CSS-rotate)、镜像翻转(参考CSS水平翻转和垂直翻转),即可实现与此边同向和逆向的其他流光边效果,同时设置旋转和镜像翻转参考CSS同时设置多个变换效果
参考代码
html
<!-- 顺时针的4条边框 -->
<!-- 边框1:最初实现流光动画效果的线条,顶部左->右流光 -->
<div class="light-line right-top">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度得到,右侧上->下流光 -->
<div class="light-line right-bottom">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度得到,底部右->左流光 -->
<div class="light-line left-bottom">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转270度得到,左侧下->上流光 -->
<div class="light-line left-top">
<div class="line-block gradient"></div>
</div>
<!-- 逆时针的4条边框 -->
<!-- 由边框1水平镜像翻转得到,顶部右->左流光 -->
<div class="light-line-r right-top-r">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到,右侧下->上流光 -->
<div class="light-line-r right-bottom-r">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度、水平镜像翻转得到,底部左->右流光 -->
<div class="light-line-r left-bottom-r">
<div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到,右侧下->上流光 -->
<div class="light-line-r left-top-r">
<div class="line-block gradient"></div>
</div>
CSS
body {
background: #2A2A2A;
}
.light-line {
position: absolute;
top: 20px;
left: 20px;
width: 320px;
height: 320px;
}
.light-line-r {
position: absolute;
top: 20px;
left: 360px;
width: 320px;
height: 320px;
}
/* 渐变流光效果线条,要将横向宽度设置为超过100%的值,否则无动画效果 */
.line-block {
position: relative;
width: 100%;
height: 6px;
background: linear-gradient(
-90deg,
#FFEFCA 1%, #FFBB1F 4%, transparent 12%, transparent 16%,
#FFEFCA 16%, #FFBB1F 19%, transparent 27%, transparent 33%,
#FFEFCA 33%, #FFBB1F 36%, transparent 44%, transparent 50%,
#FFEFCA 50%, #FFBB1F 53%, transparent 61%, transparent 66%,
#FFEFCA 66%, #FFBB1F 69%, transparent 77%, transparent 84%,
#FFEFCA 84%, #FFBB1F 87%, transparent 95%, transparent 100%
);
background-size: 200% 100%;
}
/* 指定使用Gradient动画,5s完成一次动画,匀速,无限循环 */
.gradient {
animation: Gradient 5s linear infinite;
-webkit-animation: Gradient 5s linear infinite;
-moz-animation: Gradient 5s linear infinite;
}
/* 定义Gradient动画效果:初始时显示最右端,结束时显示最左端(向右滚动) */
@keyframes Gradient {
0% {
background-position: 100% 100%;
}
100% {
background-position: 0% 100%;
}
}
/* 兼容写法.. */
@-webkit-keyframes Gradient {
0% {
background-position: 100% 100%;
}
100% {
background-position: 0% 100%;
}
}
/* 兼容写法.. */
@-moz-keyframes Gradient {
0% {
background-position: 100% 100%;
}
100% {
background-position: 0% 100%;
}
}
.right-top {
transform: rotate(0deg);
}
.right-bottom {
transform: rotate(90deg);
}
.left-bottom {
transform: rotate(180deg);
}
.left-top {
transform: rotate(270deg);
}
.right-top-r {
transform: rotate(0deg) rotateY(180deg);
}
.right-bottom-r {
transform: rotate(90deg) rotateY(180deg);
}
.left-bottom-r {
transform: rotate(180deg) rotateY(180deg);
}
.left-top-r {
transform: rotate(270deg) rotateY(180deg);
}
标签:rotate,流光,100%,CSS,background,动态,transparent,线条
From: https://www.cnblogs.com/guozhiqiang/p/18525181