随笔- 9 文章- 0 评论- 0 阅读- 2246

HTML初学习—摩天轮动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>摩天轮</title>
        <style type="text/css">
            
            *{
                margin: 0;
                padding: 0;
                /* 通配选择器，设置所有的内外边距为0 */
            }
            /* 有一点小区别，background是简写，
            除url外，后面还可以设置图片的其他属性，用空格隔。
            background-image:url就只能设置图片的路径这一个属性。*/

            body{
                background-image: url(img/2.jpg);
            }
            div:nth-child(1){
                width: 768px;
                height: 768px;
                background-image: url(img/fsw.png);
                position: absolute;
                /* 位置，绝对 */
                left: 50%;/* 向左偏移50% */
                margin-left: -384px;
                animation: zhuanquan 10s linear infinite;
                /* animation:动画    zhuanquan：动画名称    20s：动画时长
                 liner：线变化   infinite：无限 */
            }
            
            div:nth-child(2){
                width: 247px;
                height: 490px;
                position: absolute;
                /* 绝对位置 */
                left: 50%;
                /* 左对齐显示50%位置 */
                background-image: url(img/bracketsmall.png);
                margin-left: -123px;
                top: 384px;
                /* 层级：默认0层 ,是支架在摩天轮后，需使其层级为-1*/
                z-index: -1;
            }
            div:nth-child(2){
                width: 247px;
                height: 490px;
                position: absolute;
                left: 50%;
                margin-left: -123px;
                top: 384px;
                background: url(img/bracketsmall.png);
                z-index: -1;
            }
            div:nth-child(3){
                width: 358px; 
                height:529px; 
                position: absolute; 
                left: 50%; 
                margin-left: -183px; 
                top: 371px; 
                background: url(img/bracket.png); 
            }
            div:nth-child(4){
                width: 577px; 
                height: 257px; 
                position: absolute; 
                left: 50%; 
                margin-left: -288px; 
                top: 262px; 
                background: url(img/big-title.png); 
            }
            div:nth-child(5){
                width: 413px; 
                height: 139px; 
                position: absolute; 
                left: 50%; 
                margin-left: -206px; 
                top: 455px; 
                background: url(img/title.png); 
            }
            div:nth-child(6){
                width: 48px; 
                height: 64px; 
                position: absolute; 
                left: 50%; 
                margin-left: -24px; 
                top: 542px; 
                background: url(img/arrow.png); 
            }
            
            /* 所有小孩 */
            li{
                width: 130px;
                height: 170px;
                position: absolute;/* 绝对位置 */
                list-style: none;/* 去掉设置ul所得到的 点 */
                animation: ren 10s linear infinite;
                transform-origin: 50% 40%;/*设置旋转元素的基点位置*/
            }

            /* 伪类选择器 */
            li:nth-child(1){
                background-image:url(img/gua.jpg);
                left: 55px;
                top: 100px;
            }
            li:nth-child(2){ 
                background: url(img/gua.jpg);
                left: 319px; top: 0px;
            }
            li:nth-child(3){
                background: url(img/gua.jpg);
                left: 580px; top: 85px;
            }
            li:nth-child(4){
                background: url(img/gua.jpg);
                left: 665px; top: 350px;
            }
            li:nth-child(5){
                background:url(img/gua.jpg);
                left: 0px; top: 350px;
            }
            li:nth-child(6){
                background: url(img/gua.jpg);
                left: 90px; top: 590px;
            }
            li:nth-child(7){
                background: url(img/gua.jpg);
                left: 327px; top: 685px;
            }
            li:nth-child(8){
                background: url(img/gua.jpg);
                left: 590px; top:540px;
            }
            
            /* 动画 */
            /* 一帧一帧的变化，角度从0度--360度 */
            @keyframes zhuanquan{
                from{ transform: rotate(0deg);}
                to{ transform: rotate(360deg);}
            }
            @keyframes ren{
                from{ transform: rotate(0deg);}
                to{ transform: rotate(-360deg);}
            }
            
        </style>
    </head>
    <body>
        <div>
            <ul>
                <!-- 一个li表示一个人 -->
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
    </body>
</html>