用CSS3实现类似苹果桌面的有趣抖动效果

最新推荐文章于 2026-04-01 10:21:54 发布

原创最新推荐文章于 2026-04-01 10:21:54 发布 · 4.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #stylesheet #function #class #float

Web2.0 css3 javascript UI 专栏收录该内容

1 篇文章

订阅专栏

通过CSS3的transform: rotate属性，每隔100毫秒切换元素左右倾斜5度，创建出类似苹果桌面的趣味抖动效果。

代码逻辑非常简单，使用css3的tranform的rotate属性让制定元素向左右倾斜5度。并且按照100毫秒的间隔交替切换。

初步实现了抖动的效果。大家可以自己试试。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
        </script>
        <style type="text/css" media="screen">
            .square {
                width: 144px;
                height: 144px;
                background: #ff8040;
                margin-right: 48px;
                float: left;
            }
            
            .transformed0 {
                -webkit-transform: rotate(5deg);
                -moz-transform: rotate(5deg);
                -ms-transform: rotate(5deg);
                transform: rotate(5deg);
            }
            
            .transformed1 {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            
            .transformed2 {
                -webkit-transform: rotate(355deg);
                -moz-transform: rotate(355deg);
                -ms-transform: rotate(35deg);
                transform: rotate(355deg);
            }
        </style>
        <script>
            $(document).ready(function(){
                direction = 1; // 1, -1
                state = 1; // 0,1,2
                oldClass = "" ;
                //这段逻辑主要是为了让状态在0，1，2间反复的切换。 
                setInterval(function(){                
                    $("#target").removeClass(oldClass);
                    if (state + direction > 2 || state + direction < 0) {
                        direction = -direction;
                    }
                    state = state + direction;
                    newClass = "transformed" + state;
                    console.log("set new class to " + newClass);
                    $("#target").addClass(newClass);
                    $("#target").innerText = newClass;
                    oldClass = newClass;
                    
                    
                }, 50);
                
            });
        </script>
    </head>
    <body style="font-size:100%;">
        <div id="target" class="square">
        	<img src="http://avatar.csdn.net/2/3/6/3_tiimfei.jpg" />
            <p>
                Lorem ipsum dolor sit amet.
            </p>
        </div>
    </body>
</html>