HTMLCSS学习笔记（二十一）——2D、3D、过渡、动画小案例

最新推荐文章于 2024-10-11 21:27:34 发布
最新推荐文章于 2024-10-11 21:27:34 发布
阅读量331 收藏 1
点赞数
分类专栏： HTML\CSS 文章标签： css3 css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45268602/article/details/108059793
版权

过渡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clear_fix::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
        .box{
            width: 1120px;
            height: auto;
            margin: 0 auto;
        }
        .box .box1,.box4{
            width: 468px;
            height: 362px;
            margin: 10px;
            float: left;
            background: url(../images/bg.jpg);
            padding-left: 32px;
            padding-top: 32px;
            overflow: hidden;
        }

        /* box1 */
        .max_pic{
            width: 437px;
            height: 317px;
        }
        .box1{
            position: relative;
        }
        .box1 img{
            position: absolute;
            transition: 0.5s;
            transition-timing-function: linear;
        }
        .box1:hover .max_pic{
            width: 285px;
            height: 203px;
        }
        .box1 img:nth-child(2){
            left: 340px;
            top: -92px;
            transition-delay: 150ms;
        }
        .box1:hover img:nth-child(2){
            left: 340px;
            top: 32px;
        }
        .box1 img:nth-child(3){
            left: 100%;
            top: 142px;
            transition-delay: 300ms;
        }
        .box1:hover img:nth-child(3){
            left: 340px;
            top: 142px;
        }
        .box1 img:nth-child(4){
            left: 340px;
            top: 100%;
            transition-delay: 450ms;
        }
        .box1:hover img:nth-child(4){
            left: 340px;
            top: 256px;
        }
        .box1 img:nth-child(5){
            left: 185px;
            top: 100%;
            transition-delay: 600ms;
        }
        .box1:hover img:nth-child(5){
            left: 185px;
            top: 256px;
        }
        .box1 img:nth-child(6){
            left: 32px;
            top: 100%;
            transition-delay: 750ms;
        }
        .box1:hover img:nth-child(6){
            left: 32px;
            top: 256px;
        }

        /* box4 */
        .box4{
            position: relative;
        }
        .box4 img{
            position: absolute;
            transition: 0.5s;
            transition-timing-function: linear;
        }
        .box4 img:nth-child(1){
            left: 122px;
        }
        .box4:hover img:nth-child(1){
            left: 32px;
        }
        .box4 img:nth-child(2){
            left: 100%;
            top: -163px;
        }
        .box4:hover img:nth-child(2){
            left: 336px;
            top: 32px;
        }
        .box4 img:nth-child(3){
            left: 100%;
            top: 100%;
        }
        .box4:hover img:nth-child(3){
            left: 336px;
            top: 206px;
        }

    </style>
</head>
<body>
    <div class="box clear_fix">
        <div class="box1">
            <img src="../images/con1-1.jpg" alt="" class="max_pic">
            <img src="../images/con1-2.jpg" alt="">
            <img src="../images/con1-3.jpg" alt="">
            <img src="../images/con1-4.jpg" alt="">
            <img src="../images/con1-5.jpg" alt="">
            <img src="../images/con1-6.jpg" alt="">
        </div>
        <div class="box1">
            <img src="../images/con2-1.jpg" alt="" class="max_pic">
            <img src="../images/con2-2.jpg" alt="">
            <img src="../images/con2-3.jpg" alt="">
            <img src="../images/con2-4.jpg" alt="">
            <img src="../images/con2-5.jpg" alt="">
            <img src="../images/con2-6.jpg" alt="">
        </div>
        <div class="box1">
            <img src="../images/con3-1.jpg" alt="" class="max_pic">
            <img src="../images/con3-2.jpg" alt="">
            <img src="../images/con3-3.jpg" alt="">
            <img src="../images/con3-4.jpg" alt="">
            <img src="../images/con3-5.jpg" alt="">
            <img src="../images/con3-6.jpg" alt="">
        </div>
        <div class="box4">
            <img src="../images/con4-1.jpg" alt="">
            <img src="../images/con4-2.jpg" alt="">
            <img src="../images/con4-3.jpg" alt="">
        </div>
    </div>
</body>
</html>

在这里插入图片描述

2D案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 1000px;
            height: 510px;
            margin: 50px auto;
            /* background: greenyellow; */
            border-bottom: 2px solid #000;
        }
        .box div{
            position: absolute;
            width: 120px;
            height: 446px;
            /* background: #f00; */
            /* 使用以下居中方式出现bug */
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto; */
            margin-left: 440px;
            bottom: 60px;
            box-shadow: 3px 3px 3px #333;
            border-radius: 10px;
            opacity: 0;
            filter: alpha(opcity=0);/*针对低版本IE设置透明度兼容*/
            transition: all 1s;
            transform-origin: center top;
        }
        .box:hover div{
            box-shadow: 1px 1px 1px #666;
            opacity: 1;
        }
        .box div:nth-child(1){
            z-index: 13;
            opacity: 1;
            transition-delay: 0;
            background: url(../images/bookmark.png);
        }
        .box div:nth-child(2){
            z-index: 12;
            transition-delay: 50ms;
            background: url(../images/bookmark_1.png);
        }
        .box div:nth-child(3){
            z-index: 11;
            transition-delay: 100ms;
            background: url(../images/bookmark_2.png);
        }
        .box div:nth-child(4){
            z-index: 10;
            transition-delay: 150ms;
            background: url(../images/bookmark_3.png);
        }
        .box div:nth-child(5){
            z-index: 9;
            transition-delay: 200ms;
            background: url(../images/bookmark_4.png);
        }
        .box div:nth-child(6){
            z-index: 8;
            transition-delay: 250ms;
            background: url(../images/bookmark_5.png);
        }
        .box div:nth-child(7){
            z-index: 7;
            transition-delay: 300ms;
            background: url(../images/bookmark_6.png);
        }
        .box div:nth-child(8){
            z-index: 6;
            transition-delay: 350ms;
            background: url(../images/bookmark_1.png);
        }
        .box div:nth-child(9){
            z-index: 5;
            transition-delay: 400ms;
            background: url(../images/bookmark_2.png);
        }
        .box div:nth-child(10){
            z-index: 4;
            transition-delay: 450ms;
            background: url(../images/bookmark_3.png);
        }
        .box div:nth-child(11){
            z-index: 3;
            transition-delay: 500ms;
            background: url(../images/bookmark_4.png);
        }
        .box div:nth-child(12){
            z-index: 2;
            transition-delay: 550ms;
            background: url(../images/bookmark_5.png);
        }
        .box div:nth-child(13){
            z-index: 1;
            transition-delay: 600ms;
            background: url(../images/bookmark_6.png);
        }
        .box:hover div:nth-child(1){
            z-index: 13;
            background: url(../images/bookmark.png);
            transform: rotate(90deg);
        }
        .box:hover div:nth-child(2){
            z-index: 12;
            background: url(../images/bookmark_1.png);
            transform: rotate(75deg);
        }
        .box:hover div:nth-child(3){
            z-index: 11;
            background: url(../images/bookmark_2.png);
            transform: rotate(60deg);
        }
        .box:hover div:nth-child(4){
            z-index: 10;
            background: url(../images/bookmark_3.png);
            transform: rotate(45deg);
        }
        .box:hover div:nth-child(5){
            z-index: 9;
            background: url(../images/bookmark_4.png);
            transform: rotate(30deg);
        }
        .box:hover div:nth-child(6){
            z-index: 8;
            background: url(../images/bookmark_5.png);
            transform: rotate(15deg);
        }
        .box:hover div:nth-child(7){
            z-index: 7;
            background: url(../images/bookmark_6.png);
            transform: rotate(0deg);
        }
        .box:hover div:nth-child(8){
            z-index: 6;
            background: url(../images/bookmark_1.png);
            transform: rotate(-15deg);
        }
        .box:hover div:nth-child(9){
            z-index: 5;
            background: url(../images/bookmark_2.png);
            transform: rotate(-30deg);
        }
        .box:hover div:nth-child(10){
            z-index: 4;
            background: url(../images/bookmark_3.png);
            transform: rotate(-45deg);
        }
        .box:hover div:nth-child(11){
            z-index: 3;
            background: url(../images/bookmark_4.png);
            transform: rotate(-60deg);
        }
        .box:hover div:nth-child(12){
            z-index: 2;
            background: url(../images/bookmark_5.png);
            transform: rotate(-75deg);
        }
        .box:hover div:nth-child(13){
            z-index: 1;
            background: url(../images/bookmark_6.png);
            transform: rotate(-90deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

3D案例-明星资料卡

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明星资料卡</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div id="box">
        <div class="view view1">
            <img src="../images/1.png" alt="">
            <h2 class="">Billboard三首排行第一</h2>
            <p class="p_pos p1">Shake It Off</p>
            <p class="p_pos p2">Black Space</p>
            <p class="p_pos p3">Bad Blood</p>
        </div>
        <div class="view view2">
            <img src="../images/2.png" alt="">
            <h2>Taylor Swift</h2>
            <p class="info info1">Birthday:1989.12.13</p>
            <p class="info info2">Height:180cm</p>
            <p class="info info3">Weight:56kg</p>
        </div>
        <div class="view view3">
            <img src="../images/3.png" alt="">
            <h2>Back To December</h2>
            <p>
                I'm so glad you made time to see me. How's life, tell me how's your family? I haven't seen them in a while. You've been good, busier then ever. We small talk, work and the weather Your guard is up and I know why...
            </p>
        </div>
        <div class="view view4">
            <img src="../images/4.png" alt="">
            <h2>1989</h2>
            <p>Taylor Swift《1989》</p>
            <div class="view4_box"></div>
        </div>
        <div class="view view5">
            <img src="../images/5.png" alt="">
            <h2>Taylor Swift-《22》</h2>
            <p>
                I don't know about you, but I’m feeling 22, Everything will be alright if you keep me next to you, You don't know about me, but I bet you want to, Everything will be alright if we just keep dancing like we're... 22 22
            </p>
            <div class="view5_box"></div>
        </div>
        <div class="view view6">
            <img src="../images/6.png" alt="">
            <h2>Out of the Woods</h2>
        </div>
        <div class="view view7">
            <img src="../images/7.png" alt="">
        </div>
        <div class="view view8">
            <img src="../images/8.png" alt="">
            <div class="view8_box"></div>
            <h2>Taylor Swift</h2>
        </div>
        <div class="view view9">
            <img src="../images/9.png" alt="">
        </div>
    </div>
</body>
</html>

css代码：

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
.view{
    position: relative;
    width: 33.3%;
    height: 350px;
    float: left;
    overflow: hidden;
    cursor: pointer;
}
h2,p{
	transition: all 3s;
}
.view img{
    transition: 0.3s;
    opacity: 1;
}
.view:hover img{
    opacity: 0.7;
}
/* view1 */
.view1 img{
    transform: translateX(0);
}
.view1:hover img{
    transform: translateX(50px);
}
.view1 h2{
    position: absolute;
    left: 50px;
    top: 60px;
    color: #fff;
    transform: translateX(0);
}
.view1:hover h2{
    transform: translateX(50px);
}
.view1 .p_pos{
    position: absolute;
    left: 100px;
    width: auto;
    background: dodgerblue;
    transition: all 0.3s;
}
.view1 .p1{
    top: 100%;
}
.view1:hover .p1{
    transform: translateY(-200px);
}
.view1 .p2{
    top: 200px;
    transform: translateX(500px);
}
.view1:hover .p2{
    transform: translateX(0);
}
.view1 .p3{
    top: 255px;
	transform: translateX(-200px);
}
.view1:hover .p3{
	transform: translateX(0);
}
/* view2 */
.view2 img{
    transform: translateX(0);
}
.view2:hover img{
    transform: translateX(-20px);
}
.view2 h2{
    position: absolute;
    left: 20px;
    top: 60px;
    color: #fff;
    transform: translateX(0);
}
.view1:hover h2{
    transform: translateX(50px);
}
.view2 .info{
    position: absolute;
    left: 20px;
    width: auto;
    background: #fff;
    transform: translateX(-200px);
}
.view2 .info1{
    top: 100px;
    transition: all 0.3s;
}
.view2:hover .info1{
    transform: translateX(0);
}
.view2 .info2{
    top: 130px;
    transition: all 0.5s;
}
.view2:hover .info2{
    transform: translateX(0);
}
.view2 .info3{
    top: 160px;
    transition: all 0.7s;
}
.view2:hover .info3{
	transform: translateX(0);
}
/* view3 */
.view3 img{
    transform: translateY(0);
}
.view3:hover img{
    transform: translateY(-20px);
}
.view3 h2{
    position: absolute;
    top: 60px;
    left: 50px;
    color: #fff;
    transform: translateY(-100px);
}
.view3:hover h2{
    transform: translateY(50px);
}
.view3 p{
    position: absolute;
    top: 150px;
    left: 100px;
    width: auto;
    transform: translateY(300px);
    opacity: 0;
}

.view3:hover p{
    transform: translateY(0);
    opacity: 1;
}
/* view4 */
.view4 h2{
    position: absolute;
    left: 20px;
    top: 100px;
    color: #fff;
    transform: translateY(0);
    opacity: 0;
}
.view4:hover h2{
    opacity: 1;
    transform: translateY(-40px);
}
.view4 p{
    position: absolute;
    right: 30px;
    bottom: -20px;
    transform: translateY(0);
    z-index: 10;
}
.view4:hover p{
    transform: translateY(-100px);
}
.view4 .view4_box{
    position: absolute;
    background: dodgerblue;
    width: 150%;
    height: 100%;
    top: 350px;
    transform: translateY(0);
    transition: all 2s;
}
.view4:hover .view4_box{
    transform-origin: left top;
    transform: rotate(-20deg);
}
/* view5 */
.view5 h2{
    position: absolute;
    left: 20px;
    top: 60px;
    color: #fff;
    transform: translateX(0);
}
.view5:hover h2{
    transform: translateX(50px);
}
.view5 p{
    position: absolute;
    left: 70px;
    right: 70px;
    top: 230px;
    transform: translateY(0);
    opacity: 0;
}
.view5:hover p{
    transform: translateY(-100px);
    opacity: 1;
}
.view5 .view5_box{
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid #000;
    left: 10%;
    top: 10%;
    transform: rotate(0deg) translateY(-400px);
    transform-origin: 0% 0%;
    transition: all 1.5s;
}
.view5:hover .view5_box{
    transform: rotate(360deg) translateY(0);
}
/* view6 */
.view6 img{
    transition: all 0.5s;
}
.view6:hover img{
    transform: scale(1.5);
}
.view6 h2{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    transform: rotate(0);
}
.view6:hover h2{
    transform: rotate(315deg);
}
/* view7 */
.view7 img{
    transition: all 1s;
}
.view7:hover img{
    transform: scale(0.6);
}
/* view8 */
.view8 .view8_box{
    position: absolute;
    width: 40%;
    height: 60%;
    left: 30%;
    top: 70px;
    transition: all 1s;
}
.view8 .view8_box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc; 
    transition: all 1s;
}
.view8:hover .view8_box::before{
    width: 110%;
    height: 110%;
    opacity: 1;
}
.view8 .view8_box::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    border-bottom: 2px solid #ccc;
    border-right: 2px solid #ccc; 
    transition: all 1s;
}
.view8:hover .view8_box::after{
    width: 110%;
    height: 110%;
    opacity: 1;
}
.view8 h2{
    position: absolute;
    top: 30%;
    left: 55%;
    opacity: 0;
    transform: rotate(0deg) translateY(500px) scale(1);
    transition: all 2s;
}
.view8:hover h2{
    opacity: 1;
    transform: rotate(360deg) translateY(0px) scale(1.5);
}
/* view9 */
.view9 img{
    transition: all 2s;
    transform: rotate(0);
}
.view9:hover img{
    transform: rotate(15deg);
}

在这里插入图片描述

3D案例-翻转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科比</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: midnightblue;
        }
        #piclist{
            width: 428px;
            height: 294px;
            margin: 100px auto;
        }
        .picbox{
            float: left;
            width: 200px;
            height: 280px;
            margin: 5px;
            transform-style: preserve-3d;/*3d样式*/
            transition: 1.5s;/*持续时间*/
            position: relative;
        }
        .picbox:hover{
            transform: rotateY(180deg);/*y轴翻转180°*/
        }
        .face{
            width: 200px;
            height: 280px;
            position: absolute;
        }
        .front{
            border: 2px solid brown;
        }
        .back{
            top: 0;
            transform: rotateY(180deg);
            background-color: gainsboro;
            border: 2px solid brown;
        }
        .back h3{
            color: black;
            text-align: center;
            line-height: 280px;
        }
    </style>
</head>
<body>
    <div id="piclist">
        <div class="picbox">
            <div class="face front"></div>
            <img src="../images/kobe_1.jpg" alt="">
            <div class="face back">
                <h3>科比</h3>
            </div>
        </div>
        <div class="picbox">
            <div class="face front"></div>
            <img src="../images/kobe_2.jpg" alt="">
            <div class="face back">
                <h3>黑曼巴</h3>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

3D案例-旋转相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科比</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: midnightblue;
        }
        #piclist{
            width: 428px;
            height: 294px;
            margin: 100px auto;
        }
        .picbox{
            float: left;
            width: 200px;
            height: 280px;
            margin: 5px;
            transform-style: preserve-3d;/*3d样式*/
            transition: 1.5s;/*持续时间*/
            position: relative;
        }
        .picbox:hover{
            transform: rotateY(180deg);/*y轴翻转180°*/
        }
        .face{
            width: 200px;
            height: 280px;
            position: absolute;
        }
        .front{
            border: 2px solid brown;
        }
        .back{
            top: 0;
            transform: rotateY(180deg);
            background-color: gainsboro;
            border: 2px solid brown;
        }
        .back h3{
            color: black;
            text-align: center;
            line-height: 280px;
        }
    </style>
</head>
<body>
    <div id="piclist">
        <div class="picbox">
            <div class="face front"></div>
            <img src="../images/kobe_1.jpg" alt="">
            <div class="face back">
                <h3>科比</h3>
            </div>
        </div>
        <div class="picbox">
            <div class="face front"></div>
            <img src="../images/kobe_2.jpg" alt="">
            <div class="face back">
                <h3>黑曼巴</h3>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

3案例-旋转的骰子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background: #262626;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 130px auto;
            transform-style: preserve-3d;
            position: relative;
            animation: touzi 5s linear infinite;
            transform-origin: center center;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
        }
        .box div{
            width: 200px;
            height: 200px;
            position: absolute;
            backface-visibility: hidden;
        }
        .box div img{
            width: 100%;
            height: 100%;
        }
        .box div:nth-child(1){
            background: greenyellow;
            transform: translateZ(200px);
        }
        .box div:nth-child(2){
            background: brown;
        }
        .box div:nth-child(3){
            background: darkcyan;
            transform-origin: center top;
            transform: rotateX(90deg);
        }
        .box div:nth-child(4){
            background: fuchsia;
            transform-origin: center bottom;
            transform: rotateX(-90deg);
        }
        .box div:nth-child(5){
            background: peru;
            transform-origin: left center;
            transform: rotateY(-90deg);
        }
        .box div:nth-child(6){
            background: orange;
            transform-origin: right center;
            transform: rotateY(90deg);
        }
        @keyframes touzi{
             0%{
                transform: rotateX(0deg) rotateY(0deg) ;
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) ;
            }
        }
        @-webkit-keyframes touzi{
            0%{
                transform: rotateX(0deg) rotateY(0deg) ;
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) ;
            }
           
        }
    </style>
</head>
<body>
    <div class="box">
        <div><img src="../images/touzi_1.png" alt=""></div>
        <div><img src="../images/touzi_3.png" alt=""></div>
        <div><img src="../images/touzi_2.png" alt=""></div>
        <div><img src="../images/touzi_4.png" alt=""></div>
        <div><img src="../images/touzi_5.png" alt=""></div>
        <div><img src="../images/touzi_6.png" alt=""></div>
    </div>
</body>
</html>

在这里插入图片描述

3D案例-幸福摩天轮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸福摩天轮</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* body加背景 */
        html,body{
            background: url(../images/2.jpg) no-repeat;
            background-size: 100%,100%;
        }
        .wheel_box{
            width: 768px;
            height: 768px;
            margin: 0 auto;
            position: relative;
        }
        .wheel_box>img{
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(384px);
        }
        .wheel{
            width: 768px;
            height: 768px;
            margin: 0 auto;
            background: url(../images/fsw.png) no-repeat ;
            position: absolute;
            animation: fsw 10s linear infinite;
            -webkit-animation: fsw 10s linear infinite;
            -moz-animation: fsw 10s linear infinite;
        }
        .wheel>img{
            width: 130px;
            height: 170px;
            position: absolute;
            /* 方式1：使用另一个动画cockpit，使旋转方向与fsw动画相反 */
            /* animation: cockpit 10s linear infinite;
            -webkit-animation: cockpit 10s linear infinite;
            -moz-animation: cockpit 10s linear infinite; */
            /* 方式2：使用同一个动画fsw，座舱使用reverse反向 */
            animation: fsw 10s linear infinite reverse;
            -webkit-animation: fsw 10s linear infinite reverse;
            -moz-animation: fsw 10s linear infinite reverse;
            transform-origin:center top;
        }
        .wheel_title{
            position: absolute;
            width: 768px;
            height: 768px;
            margin: 0 auto;
        }
        .wheel_title>img:nth-child(1){
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .wheel_title>img:nth-child(2){
            position: absolute;
            left: 0;
            right: 0;
            top: 320px;
            bottom: 0;
            margin: auto;
        }
        .wheel_title>img:nth-child(3){
            position: absolute;
            left: 200px;
            right: 0;
            top: 350px;
            bottom: 0;
            margin: auto;
        }
        /* 座舱定位 */
        .wheel>img:nth-child(1){
            top: 28px;
            left: 320px;
        }
        .wheel>img:nth-child(2){
            top: 130px;
            left: 575px;
        }
        .wheel>img:nth-child(3){
            top: 380px;
            left: 672px;
        }
        .wheel>img:nth-child(4){
            top: 633px;
            left: 577px;
        }
        .wheel>img:nth-child(5){
            top: 740px;
            left: 326px;
        }
        .wheel>img:nth-child(6){
            top: 638px;
            left: 74px;
        }
        .wheel>img:nth-child(7){
            top: 396px;
            left: -34px;
        }
        .wheel>img:nth-child(8){
            top: 130px;
            left: 70px;
        }
        @keyframes fsw{
            0%{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
            }
        }
        @keyframes cockpit{
            0%{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
            }
            100%{
                transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                -moz-transform: rotate(-360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 摩天轮 -->
    <div class="wheel_box">
        <img src="../images/bracket.png" alt="">
        <img src="../images/bracketsmall.png" alt="">
        <!-- 轮子 -->
        <div class="wheel">
            <!-- 座舱 -->
            <img src="../images/boy.png" alt="">
            <img src="../images/dog.png" alt="">
            <img src="../images/girl.png" alt="">
            <img src="../images/girls.png" alt="">
            <img src="../images/hairboy.png" alt="">
            <img src="../images/mimi.png" alt="">
            <img src="../images/mudog.png" alt="">
            <img src="../images/shamegirl.png" alt="">
        </div>
        <div class="wheel_title">
            <img src="../images/big-title.png" alt="">
            <img src="../images/title.png" alt="">
            <img src="../images/arrow.png" alt="">
        </div>
    </div>

</body>
</html>

在这里插入图片描述

粽子师兄
关注
专栏目录
CSS学习笔记
YuKing_HONG的博客
10-17 1463
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
HTML学习笔记9——CSS3制作网页动画
qq_45569406的博客
08-17 453
HTML学习笔记9——CSS3动画
CSS3新特性——新增选择器，2D/3D转换，动画
冰山一树Sankey的博客
03-12 1808
CSS3新特性——新增选择器，2D/3D转换，动画 欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可 博客园主页：博客园主页-冰山一树Sankey CSDN主页：CSDN主页-冰山一树Sankey 前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成 一. CSS3选择器 1.1 属性选择器 属性选择器可以根据元素特定属性的来选择
HTML+CSS学习笔记
weixin_61050264的博客
09-05 820
【代码】HTML+CSS学习笔记。
超细的CSS学习笔记（CSS详解）(1)
2401_84438067的博客
05-04 801
使用 top， bottom， left 和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。
超细的CSS学习笔记（CSS详解）(2)
2401_84438160的博客
05-04 1042
使用 top， bottom， left 和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。
精通 CSS 第 10 章 变换、过渡与动画 学习笔记
GoldenaArcher的博客
05-23 331
精通 CSS 第 10 章 变换、过渡与动画 学习笔记 这一章主要讲的还是让元素“动”起来的特性，主要内容在以下几章学习笔记中有讲到，这里可以算是一个系统性整合了： CSS3 新特性学习 中含了 transition特性，即过渡 CSS 2D Transform 学习笔记 2D 变换的笔记在这里 CSS 动画 学习笔记和学习案例 动画，即 关键帧动画@keyframe 的笔记在这里 学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例 3D 变换的笔记在这里 都学过了，
Web前端学习笔记——HTML5与CSS3之购物车宣传案例
唯恋殊雨的博客
09-25 2093
《购物车宣传》案例 综合运用h5c3知识且进行一定扩展 能使用jquery完成网页常见交互行为 实际工作开发当中能应对活动宣传页 全屏切换效果 通过鼠标的滚轮 切换全屏页面 使用fullpage来完成 使用动画 （js实现动画，css3实现动画） 一个是帧动画 一个是补间动画 什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态 什么是补间动画：过渡(加过渡只要状态发生改...
CSS(3)学习笔记——持续更新
weixin_41309331的博客
11-04 648
1 选择器 CSS(3)中提供的选择器手册（w3school）：http://www.w3school.com.cn/cssref/css_selectors.asp 1.1 基本选择器 选择器 例子 类选择器 .class 标签选择器 element id选择器 #id 后代选择器 element_1 element_2：选择 element_1 内部的全部 elem...
CSS详细笔记
nuomi_w的博客
11-15 843
1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表示此处有链接。 1.2 CSS-网页的美容师 CSS是层叠样式表(Cascading Style Sheets)的简称. 有时我们也会称之为CSS样式表或级联样式表。 总结: HTML主要做结构,显示元素内容. CSS美化 HTML,布局网页. CSS最大价值:由HTML专注去做结构呈现，样式交给
学习 HTML+CSS 这一篇就够了
li520_fei的博客
03-17 2918
文章目录学习 HTML+CSS 这一篇就够了 ！HTML 简介一、网页1 .什么是网页2. 什么是 HTML3.网页的形成4.网页总结二、浏览器1. 常用浏览器2.浏览器内核三、 Web 标准（重点）1. 为什么需要 Web 标准2. Web 标准的构成HTML标签一、HTML 语法规范1. 基本语法概述2.标签关系二、HTML 基本结构标签1. 第一个 HTML2. 基本结构标签总结三、开发工具1. 网页开发工具2. VSCode 工具生成骨架标签新增代码4.1 文档类型声明标签4.2 lang 语言种
中软Day04——CSS基础（盒子模型、浮动、定位）
qq_43542290的博客
11-20 673
中软Day04 盒子模型（css重点） 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 css三个大模块：盒子模型，浮动，定位 网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者...
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1249
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
切换按钮组动画效果
m0_55766628的博客
10-11 115
【代码】切换按钮组动画效果。
CSS3--美若天仙！？
金灰的博客
10-03 1518
浮动属性 float，left 表示左浮动，right 表示右浮动l特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果推荐双伪元素法清除浮动。l拓展：浮动本质作用是实现图文混排效果。
【CSS】纯css3螺旋状loading加载特效
weixin_45274678的博客
10-11 213
css3 螺旋Loading特效
使用antdv的a-table行拖拽
最新发布
uuai
10-11 119
使用a-table行拖拽，实现上下换行。
好玩的水表电表
lulei5153的博客
10-01 2346
【代码】好玩的水表电表。
CSS3动画详解：过渡、动画与2D/3D变换
CSS3动画效果小结提供了对三种关键动画功能的深入理解：transition(过渡属性)，animation(动画属性)，以及transform(2D/3D转换属性)。下面将详细解析这些概念。 1. **Transition (过渡属性)**: 这是一种渐进式改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值