漂亮的按钮动画

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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23468/14041000

标签：动画,漂亮,边框,96%,5px,按钮,rotation
来源： https://www.cnblogs.com/amboke/p/16675808.html