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

最新推荐文章于 2024-07-08 16:54:43 发布

tiimfei

最新推荐文章于 2024-07-08 16:54:43 发布

阅读量4.6k

点赞数 1

分类专栏： Web2.0 css3 javascript UI 文章标签： css stylesheet function class float div

本文链接：https://blog.csdn.net/tiimfei/article/details/6768120

版权

代码逻辑非常简单，使用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 {