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

想要引导访客点击并跳转到另一个页面？添加一个炫酷且具有动态效果的按钮绝对是一个上佳选择！今天这篇文章将教你如何利用CSS3的强大功能，创建一个会旋转且随着鼠标悬停还会变换颜色的按钮。这是一个利用CSS3实现的旋转按钮的生动演示。

让我们从HTML代码开始：

```html

```

接下来是当前的CSS样式设计：

```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; / Safari 和 Chrome 的过渡效果 /

-o-transition-property: width, height, -o-transform, background, font-size, opacity, color; / Opera 的过渡效果 /

-o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s, 1s; / 定义过渡时间 /

/ 其他浏览器对过渡属性的支持 /

/ ...省略其他浏览器的过渡属性代码... / / 这一部分是CSS转换属性的核心，允许我们通过宽度、高度、背景、颜色、透明度等的变化来定义动画效果。在这个例子中，这些属性的变化都是每秒进行，根据过渡时间属性来设定。 /

}

```

重点在于这个转换属性，它定义了按钮的各种变化，包括宽度、高度、背景、颜色和透明度等的变化。这些变化可以根据过渡时间属性来设定速度。现在让我们继续完善这个设计。为了让按钮在鼠标悬停时产生旋转效果，我们需要添加以下代码：

```css

.button:hover { / 鼠标悬停在按钮上时触发旋转效果 /

-moz-transform: rotate(360deg); / Firefox 的旋转效果 /

-webkit-transform: rotate(360deg); / Safari 和 Chrome 的旋转效果 /

-o-transform: rotate(360deg); / Opera 的旋转效果 /

transform: rotate(360deg); / 标准语法 / / 按钮将围绕中心点旋转一个完整的圆（即360度）。同时改变按钮的背景色和字体大小。 /

background:99A411; / 改变背景色 /

font-size:30px; / 改变字体大小 /

color:fff; / 改变字体颜色 / } 这样，一个简单的会旋转的按钮就制作完成了。你可以尝试将它用于各种有趣的设计中，比如在特殊节日时创建主题按钮。甚至可以进一步拓展，让按钮在旋转的同时更换图像。这个设计的可能性是无穷无尽的！