鼠标经过变大1.2倍、旋转360度并改变背景色。

最新推荐文章于 2024-04-30 09:57:30 发布

转载最新推荐文章于 2024-04-30 09:57:30 发布 · 2k 阅读

文章标签：

#css #360

本文介绍了一个使用CSS实现的动画效果：当鼠标悬浮在一个元素上时，该元素会放大1.2倍，并旋转360度，同时背景颜色也会发生变化。通过CSS的transform属性实现了缩放和旋转，使用:hover伪类来触发这些变化。

鼠标经过变大1.2倍、旋转360度并改变背景色。

HTML代码部分

<div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div>

CSS代码部分

.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.demo_rotate{
    transition:1s ease all;
    -webkit-transition:1s ease all;
    -moz-transition:1s ease all;
    padding:10px;
    margin:90px auto;
}
.demo_rotate:hover{
    transform:rotate(360deg) scale(1.2,1.2);
    -webkit-transform:rotate(360deg) scale(1.2,1.2);
    -moz-transform:rotate(360deg) scale(1.2,1.2);
    background:#ff9900;
}