漂亮的按钮动画

2022-09-10 00:31:29 阅读：171 来源： 互联网

漂亮的按钮动画

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；  
 }

就是这样。

你可以找到完整的代码这里带视频教程。

感谢您的阅读。 ❤️

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

漂亮的按钮动画

漂亮的按钮动画

HTML

CSS