首页 > 代码库 > css动画笔记

css动画笔记

2024-09-20 01:52:19   214人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <style type="text/css">
        .xiaoming {
            position: absolute;
            top: 100px;
            left: 100px;
            animation: name1 2s infinite;
        }
        @keyframes name1 {
            0%{
                top:200px;
            }
            10%{
                top: 800px;
                left: 800px;
                transform: rotate(180deg);
            }
            60%{
                top: 400px;
                left: 400px;
                transform: rotate(180deg);
            }
            100%{
                top: 100px;
                left: 100px;
            }
        }
    </style>
</head>
<body>

<div class="xiaoming">
    <img src="http://img30.360buyimg.com/jr_image/jfs/t3943/198/1201160477/17676/4e4ae11/586b5b09N6c946d97.jpg" alt="">
</div>

</body>
</html>
光盘旋转案例//
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .xiaoming {
            position: absolute;
            top: 100px;
            left: 100px;
            animation: go 4s infinite linear;
            /*infinite无限的，也可写数字几次*/
            /*linear匀速*/
        }
        @keyframes go {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="xiaoming">
        <img src="images/cd.png" alt="">
    </div>
</body>
</html>

 

css动画笔记


联系
我们