CSS3动画

最新推荐文章于 2022-12-15 14:38:50 发布

转载最新推荐文章于 2022-12-15 14:38:50 发布 · 46 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webQdesign/p/5733189.html

CSS3动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        #myfirst {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            position: relative;
            animation: myfirst 2s linear infinite normal;
            -moz-animation: myfirst 2s linear infinite normal; /* Firefox: */
            -webkit-animation: myfirst 2s linear infinite normal; /* Safari and Chrome: */
            -o-animation: myfirst 2s linear infinite normal; /* Opera: */
        }

        @keyframes myfirst {
            0% { transform: rotatez(0deg)}
            50% { transform: rotatez(180deg)}
            100% { transform: rotatez(360deg)}
        }

        @-moz-keyframes myfirst /* Firefox */
        {
            0% { -moz-transform: rotatez(0deg)}
            50% { -moz-transform: rotatez(180deg)}
            100% { -moz-transform: rotatez(360deg)}
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% { -webkit-transform: rotatez(0deg)}
            50% { -webkit-transform: rotatez(180deg)}
            100% { -webkit-transform: rotatez(360deg)}
        }

        @-o-keyframes myfirst /* Opera */
        {
            0% { -o-transform: rotatez(0deg)}
            50% { -o-transform: rotatez(180deg)}
            100% { -o-transform: rotatez(360deg) }       
 }   
</style>
</head>
<body>
<div id="myfirst"></div>
</body>
</html>

转载于:https://www.cnblogs.com/webQdesign/p/5733189.html