大风车动画

Lioo121

于 2019-11-16 16:39:39 发布

阅读量463

点赞数

文章标签：大风车动画

本文链接：https://blog.csdn.net/Lioo121/article/details/103100140

版权

大风车动画
在这里插入图片描述

        body{
            /*设置body高度为100% 如果不设置的话，高度为内容的高度*/
            height: 100%;
            /*开启弹性布局*/
            display: flex;
            /*设置弹性布局中子元素的'水平对齐'方式为居中*/
            justify-content: center;
            /*设置弹性布局中子元素的'垂直方向对齐'为底部对齐*/
            align-items: flex-end;
            /*设置元素外边距为0,因为body元素默认自带8px外边距*/
            margin: 0;
            /*剪切元素溢出内容，防止出现滚动条*/
            overflow: hidden;
        }
        main{
            /*设置相对定位，为子元素的绝对定位设置参考
            注：绝对定位的参考位置为有定位属性的父级元素，
            若父级元素没有则会逐级往上查找，直到找到body，
            body不管是否定位都行。
            元素设置为绝对定位以后，不管原来的标签类型为行内元素还是块级元素，
            最后都会被转换为行内块元素
            行内块元素：还是行内元素的布局方式，但是可以设置宽和高*/
            position:relative;
            /*设置宽度为1300px 原图的一半是1300 设置等比例缩放*/
            width:1300px;
            /*设置高度为500px*/
            height:500px;
            /*引入背景图片*/
            /* background-image:url('../补充内容/caodibeijing_5277446.jpg'); */
            /*设置背景图像缩小或放大成将适合背景定位区域的最大大小。*/
            background-size:contain;
            /*设置最小宽度为1300px*/
            min-width: 1300px;
        }
        div:nth-child(1){
            /*设置绝对定位*/
            position:absolute;
            /*元素绝对定位后距离参考元素左侧的距离*/
            left:265px;
            /*元素距离上边的距离*/
            top:40px;
            /*元素宽度*/
            width:350px;
            /*元素高度*/
            height:350px;
            /*元素背景图片*/
            background-image:url('../补充内容/u=2337737900,639152748&fm=26&gp=0.jpg');
            /*设置背景图像缩小或放大成将适合背景定位区域的最大大小。*/
            background-size:contain;
            /*动画名称，动画时间，动画旋转速度，动画播放次数  这是缩写，
            详细的应该是：
            animation-name:rotate;
            animation-duration: 3s;
            设置动画匀速旋转
            animation-timing-function: linear;
            设置动画的播放次数为无限次
            animation-iteration-count: infinite;
            */
            animation: rotate 0.5s infinite linear;
        }
        div:nth-child(2){
            position:absolute;
            left:591px;
            top:280px;
            width:150px;
            height:150px;
            background-image:url('../补充内容/u=2337737900,639152748&fm=26&gp=0.jpg');
            background-size:contain;
            animation: rotate 1s infinite linear;
        }
        div:nth-child(3){
            position:absolute;
            left:729px;
            top:180px;
            width:250px;
            height:250px;
            background-image:url('../补充内容/u=2337737900,639152748&fm=26&gp=0.jpg');
            background-size:contain;
            animation: rotate 2s infinite linear;
         
        }
        

        div:hover{
            /*当鼠标经过的时候，更改元素的动画时间*/
            animation-duration: 1.5s;
        }
        div:active{
            /*当鼠标点击的时候，去除动画效果*/
            animation: none;
        }
        /*使用@keyframes规则，你可以创建动画。
              创建动画是通过逐步改变从一个CSS样式设定到另一个。
              指定的变化时发生时使用％，或关键字"from"和"to"，
              这是和0％到100％相同。*/
        @keyframes rotate {
            /*设置动画从0%的状态到100%的状态旋转360度*/
            0%{
                transform: rotate(0);
               
            }
            100%{
                transform: rotate(360deg);
              
            }
        }

<body>
<!--设置main标签插入草地背景-->
<main>
    <!--设置三个div标签作为风扇-->
    <div></div>
    <div></div>
    <div></div>
</main>
</body>

Lioo121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大风车动画

大风车动画 body{ /*设置body高度为100% 如果不设置的话，高度为内容的高度*/ height: 100%; /*开启弹性布局*/ display: flex; /*设置弹性布局中子元素的'水平对齐'方式为居中*/ justi...
复制链接

扫一扫