漂亮的按钮动画
漂亮的按钮动画
HTML
对于 HTML，我们只提供了一个带有“旋转”类的按钮元素。
<button class="rotation">设计</button>
CSS
对于 CSS，首先我们将为“旋转”类设置一些样式。
我们将在内部和外部设置蓝色霓虹灯阴影。
然后我们将文本颜色设置为蓝色，删除按钮的默认边框并将其四舍五入为 5 像素。
我们将定位到相对位置，添加一些填充并将背景颜色设置为白色。
。回转 {
背景颜色：#fff；
盒子阴影：0 0 10px #5271ff，
插图 0 0 10px #5271ff;
颜色：#5e7cff；
边框：无；
边框半径：5px；
填充：10px 20px；
位置：相对；
}
现在我们将设置前后伪元素的样式。
这些元素将作为边框围绕按钮旋转。
首先，我们将内容和位置设置为绝对，所有边都为 -5px，因此它比按钮大 5px。
我们将边框四舍五入为 5 像素，并将其设置为实心 2 像素宽的浅蓝色。
.rotation::before, .rotation::after {
内容： '';
边框：2px 实心#b5c3ff；
边框半径：5px；
位置：绝对；
顶部：-5px；
底部：-5px；
左：-5px；
右：-5px；
}
现在我们将为伪元素创建动画。
使用 clip-path 属性，我们将创建一个线性旋转效果。
@keyframes 旋转 {
0% {剪辑路径：插入（96% 0 0 0）；}
20% {剪辑路径：插入（0 96% 0 0）；}
50% {剪辑路径：插入（0 0 96% 0）；}
75% {剪辑路径：插入（0 0 0 96%）；}
100% {剪辑路径：插入（96% 0 0 0）；}
}
现在我们将该动画添加到我们的伪元素中。
我们将持续时间设置为 3 秒，无限且线性。
.rotation::before, .rotation::after {
内容： '';
边框：2px 实心#b5c3ff；
边框半径：5px；
位置：绝对；
顶部：-5px；
底部：-5px；
左：-5px；
右：-5px；
动画：旋转3s无限线性； /* 动画 */
}
现在我们将简单地在伪元素之后添加一半时间（1.5 秒）的动画延迟。
.rotation::{之后
动画延迟：1.5s；
}
就是这样。
你可以找到完整的代码 这里 带视频教程。
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
