前端开发谷歌浏览器中的大风车

web后端及移动前端开发
web前端和前端与移动开发
手机移动前端开发

代码片段 1

<!DOCTYPE html>
<html lang=”en-US”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
        <script>
            $(function() {
                var count = 1
                $(‘.test’).addClass(‘a’)
                var n = setInterval(function() {
                    count++
                    $(‘.test’).css(
                        ‘-webkit-transform’,
                        ‘rotate(‘ + 360 * count + ‘deg)’,
                    )
                }, 2000)
            })
        </script>
        <style>
            .test {
                -webkit-transition: -webkit-transform 2s linear;
            }
            .a {
                -webkit-transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <img
            src=”http://pic10.nipic.com/20101014/5784951_115859059926_2.jpg”
            class=”test”
            style=”width:600px”
            title=”图片”
        />
    </body>
</html>

经过大神直接,使用纯css编写转动的大风车代码片段 2

<!DOCTYPE html>
<html lang=”en-US”>
    <head>
        <meta charset=”UTF-8″ />
        <title>大风车</title>
        <style>
            @-webkit-keyframes rotate_pic {
                to {
                    -webkit-transform: rotate(360deg);
                }
            }
            .test {
                -webkit-animation: rotate_pic 2s linear 0 infinite;
            }
        </style>
    </head>
    <body>
        <img
            src=”http://pic10.nipic.com/20101014/5784951_115859059926_2.jpg”
            class=”test”
            style=”width:600px”
            title=”图片”
        />
    </body>
</html>
移动端web前端开发流程
移动前端开发性能提升
前端开发移动端跟pc端的区别
» 本文来自:前端开发者 » 《前端开发谷歌浏览器中的大风车》
» 本文链接地址:https://www.rokub.com/7658.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!