CSS3创建一个旋转可变色按钮

最新推荐文章于 2024-04-02 09:52:48 发布

前端学习线路

最新推荐文章于 2024-04-02 09:52:48 发布

阅读量2.1k

点赞数

分类专栏：前端学习线路文章标签： html html5 css

本文链接：https://blog.csdn.net/webxuexi168/article/details/104525115

版权

这篇博客介绍了如何利用CSS3实现一个旋转且颜色变化的按钮。通过设置不同的过渡属性，如宽度、高度、背景色、字体大小和透明度，按钮在悬停时能够平滑地进行360度旋转并改变颜色和字体大小。关键代码包括`transition`属性和`transform`属性，使按钮在鼠标悬停时触发旋转效果。

摘要由CSDN通过智能技术生成

先从HTML:

< div>
< a class="button">旋转按钮</a>
< /div>

和现在的CSS:

.button
{

background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
margin:50px;
cursor:pointer;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;
border-radius:5px;

box-shadow:0 0 2px rgba(0,0