简单的css3旋转动画,结合js使用

最新推荐文章于 2025-07-07 10:12:19 发布

NiceYours

最新推荐文章于 2025-07-07 10:12:19 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

文章标签： css3动画 rorate属性 360度 transition transform

本文链接：https://blog.youkuaiyun.com/qq_42209630/article/details/80338578

本文介绍如何使用CSS transform和transition属性实现div元素的360度旋转动画效果，并通过jQuery为该元素添加和移除类名以响应鼠标悬停事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让一个div元素旋转360度示例:

1.div的样式结构:

div {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color:pink;
        }

2.设置旋转属性的类名:

div.rotate {
             /* 旋转360度 */
            transform: rotate(360deg);
             /* all表示所有属性,1s表示在一秒的时间完成动画 */
            transition: all 1s;
        }

transition有四个属性:

property: 规定应用过渡的 CSS 属性的名称。

duration: 定义过渡效果花费的时间。默认是 0,单位是s。

timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。

delay: 规定过渡效果何时开始。默认是 0。单位s。

可以连写: transition: property duration timing-function delay;

3.给div元素设置鼠标移入时旋转,也就是给它加上.rotate类名.鼠标移出时移除类名

$(function () {

                $('div').mouseenter(function () {
                    $(this).addClass('rotate');
                }).mouseleave(function () {
                    $(this).removeClass('rotate');
                })
            })