HTML练习————DAY3

最新推荐文章于 2019-11-29 16:51:19 发布

好吃的都给你呀

最新推荐文章于 2019-11-29 16:51:19 发布

阅读量80

点赞数

分类专栏：前端杂文文章标签： HTML 入门

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102553420

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

转动风车（效果为风车的风页会一直保持转动，下面效果为jpg非gif）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风车</title>
    <style>
        main div{
            width: 1000px;
            height: 600px;
            background-image: url(caodi.png);
            background-size: 100% 600px;
            margin: 200px auto;
            
        }

        /* 定义动画 */
        @keyframes donghua{
            from{
                transform: rotate(0deg);

            }
            to{
                transform: rotate(360deg);
            }
        }

        img{
            /* 给所有img对象加上动画  分别是：动画名称 执行每次动画的时间  平缓的 无穷次 */
            animation: donghua 2s linear infinite;
        }

        main div img:nth-child(1){
         
            width: 300px;
            height: 300px;
            position: relative;
            top: 100px;
            left:140px;
            
           
            
        }
        main div img:nth-child(2){
           
            width: 100px;
            height: 100px;
            position: relative;
            top:180px;
            left:160px ;

        }
        main div img:nth-child(3){
            
            width: 200px;
            height: 200px;
            
            position: relative;
            top: 175px;
            left:195px;
        }
    </style>
</head>
<body>
    <main>
            <div>
                    <img src="fengche.png" alt="">
                    <img src="fengche.png" alt="">
                    <img src="fengche.png" alt="">
            </div>
            
    </main>
</body>
</html>

好吃的都给你呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML练习————DAY3

转动风车（效果为风车的风页会一直保持转动，下面效果为jpg非gif）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
复制链接

扫一扫