css渐变动画效果

<>有趣的渐变边框动画效果

效果：

实现思路：

每一个框一个div，每一个“框”分三部分组成，::before实现渐变边框（实际上是渐变背景），::after实现内部白色背景，最后div的其他子元素作为框内的文字内容显示。使用animation动画实现::before渐变背景旋转，即可模拟边框动画。

问题：内部子元素p被::after覆盖显示不了的问题（::after的显示层级高于正常流元素）
解决办法：给内部子元素加position: relative;z-index: 1;即可
<div class="con"> <div class="box"> <p>123</p> </div> <div class="box"> <p>456
</p> </div> <div class="box"> <p>789</p> </div> </div> .con { width: 500px;
height: 500px; display: flex; flex-direction: column; justify-content: center;
align-items: center; background-image: linear-gradient(#5b53fd,#87a8fb); } .box
{ width: 300px; height: 50px; margin: 4px auto; position: relative; overflow:
hidden; /* 动画的关键之一，使渐变背景仅显示需要的那一部分 */ border-radius: 4px; box-shadow: 0 10px
15pxrgba(0,0,0,.7); color: #000; font-size: 16px; vertical-align: middle; }
.box>* { /* 此处调整层级是为了使div.box子元素显示（不被::after覆盖） */ position: relative; z-index:
1; padding-left: 20px; } .box:nth-child(1) { /*
层级的调整是为了使上一层div.box阴影覆盖下一个div.box */ z-index: 3; } .box:nth-child(2) { z-index:
2; } .box:nth-child(3) { z-index: 1; } .box::before { content: ""; display:
inline-block; position: absolute; width: 310px; height: 310px; margin-top:
-125px; /* 当元素absolute时，可使用margin调整其位置，而不影响其他元素布局 */ margin-left: -5px;
background-image: linear-gradient(45deg,#51f4fa 35%,#da7efc 60%); border-radius:
50%; animation: rotate 5s linear infinite 0s; /* 动画关键之一，使渐变背景旋转 */ }
.box::after { content: ""; display: inline-block; position: absolute; top: 3px;
bottom: 3px; /* 重点！设置对立方位的值，使元素具有填充特性，且跟随父元素大小变化 */ left: 3px;right: 3px;
background: #fff; border-radius: 3px; } @keyframes rotate { 0% { transform:
rotate(0deg); } 100% { transform: rotate(355deg); } }
注意点：

* 当不需要外面那层渐变边框有border-radius圆角效果和上述动画效果的话，可以使用border-image的渐变来实现渐变边框。
* 为了边框动画效果中颜色过渡自然一点，linear-gradient的颜色值不要设置两个颜色直接从0%到100%显示，亲测
linear-gradient(45deg,#51f4fa 35%,#da7efc 60%) 下表现较好。
*
为了使上述动画效果适用于不同尺寸的“框”，建议::after和::before元素的宽高设置相对单位（当然是相对于外层元素div.con），这样其他地方需要用到这个效果时，直接加上类名即可完美适配。当然，此时需要给外层li
position:relative，而::after和::before position:absolute。

• « 上一篇：假设检验3- 卡方分布
• » 下一篇：C++总结