day10-练习（过渡、动画、旋转）

最新推荐文章于 2024-06-14 08:47:36 发布

蔡大爷的小甜心

最新推荐文章于 2024-06-14 08:47:36 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/qq_43361287/article/details/109488323

版权

HTML5 和 CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

练习

雪人练习（过渡练习）
奔跑的雪人（动画练习）
小球下落
- 实现效果
- 实现代码
钟表
- 实现效果
- 实现代码
六面体旋转
- 实现效果
- 实现代码

雪人练习（过渡练习）

雪碧图原图

雪碧图

实现效果

实现代码

这里雪碧图为和.html同级目录

     <!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>
            .nihao {
                width: 121.75px;
                height: 180px;
                margin: 10px auto;
                background-image: url(./xuebitu.jpg);
                background-position: 0 0;
                
            }
            .nihao:hover{
                background-position: -487px 0;
                transition: 4s steps(4) all;
            }
        </style>
     </head>
     <body>
        <div class="nihao">
        </div>
     </body>
     </html>

奔跑的雪人（动画练习）

雪碧图原图

雪碧图

实现效果

实现代码

这里雪碧图为和.html上级的同级目录

<!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>
        .nihao {
            width: 121.75px;
            height: 180px;
            margin: 10px auto;
            background-image: url(../xuebitu.jpg);
            animation: donghua 1s steps(4) infinite;
        }

        /* 创建关键帧 */

        @keyframes donghua {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -487px 0;
            }
        }
    </style>
</head>

<body>
    <div class="nihao">
    </div>
</body>

</html>

小球下落

实现效果

小球下落

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>跳动的小球</title>
    <style>
        .nihao {
            border-bottom: crimson 10px solid;
            height: 500px;
            overflow: hidden;

        }

        .nihao div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: cadetblue;
            animation: donghua .6s forwards ease-in infinite alternate;
            float: left;
            margin-right: 10px;
        }

        div.qiuqiu1 {
            animation-delay: .1s;
            background-color: crimson;

        }

        div.qiuqiu3 {
            animation-delay: .2s;
            background-color: palegoldenrod;

        }

        div.qiuqiu4 {
            animation-delay: .3s;
            background-color: purple;

        }

        div.qiuqiu5 {
            animation-delay: .4s;
            background-color: gold;

        }

        div.qiuqiu6 {
            animation-delay: .5s;
            background-color: greenyellow;

        }

        div.qiuqiu7 {
            animation-delay: .6s;
            background-color: gray;

        }

        div.qiuqiu2 {
            animation-delay: .7s;
            background-color: crimson;

        }

        div.qiuqiu8 {
            animation-delay: .8s;
            background-color: orchid;

        }

        /* 创建关键帧 */

        @keyframes donghua {
            from {
                margin-top: 0;
            }

            to {
                margin-top: 400px;
            }
        }
    </style>
</head>

<body>
    <div class="nihao">
        <div class="qiuqiu1"></div>
        <div class="qiuqiu3"></div>
        <div class="qiuqiu4"></div>
        <div class="qiuqiu5"></div>
        <div class="qiuqiu6"></div>
        <div class="qiuqiu7"></div>
        <div class="qiuqiu8"></div>
    </div>
</body>
</html>

钟表

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟表</title>
    <style>
        .zhongbiao{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 10px black solid;
            margin: 0 auto;
            position: relative;
        }
        .zhongbiao > div{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .shizhen{
            height: 70%;
            width: 70%;
            animation: biao 216000s infinite;
        }
        .shizhen .zhen{
            height: 50%;
            width: 6px;
            background-color: #000;
            margin: 0 auto;
        }
        .fenzhen{
            height: 90%;
            width: 90%;
            animation: biao 3600s infinite;
        }
        .fenzhen .zhen{
            height: 50%;
            width: 4px;
            background-color: #000;
            margin: 0 auto;
        }
        .miaozhen{
            height: 95%;
            width: 95%;
            animation: biao 60s steps(60) infinite;
        }
        .miaozhen .zhen{
            height: 50%;
            width: 2px;
            background-color:red;
            margin: 0 auto;
        }
        @keyframes biao{
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="zhongbiao">
        <div class="shizhen"><div class="zhen"></div></div>
        <div class="fenzhen"><div class="zhen"></div></div>
        <div class="miaozhen"><div class="zhen"></div></div>
    </div>
</body>
</html>

六面体旋转

实现效果

实现代码

这里所用图片图为和.html上级的同级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六面体旋转</title>
    <style>
        html{
            perspective: 800px;
        }
        .liumianti{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* 设置3D变形效果 */
            transform-style: preserve-3d;
            /* 无限执行 匀速运动 */
            animation: xuanzhuan 10s infinite linear;
        }
        .liumianti > div{
            width: 200px;
            height: 200px;
            vertical-align: top;
            opacity: .7;
            position: absolute;
        }
        .liumianti >div img{
            width: 200px;
            height: 200px;
            
        }
        .box1{
            
            transform: rotateY(90deg) translateZ(100px);
        }
        .box2{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box3{
            
            transform: rotateX(90deg) translateZ(100px);
        }
        .box4{
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box5{
            
            transform: rotateY(180deg) translateZ(-100px);
        }
        .box6{
            transform: rotateY(180deg) translateZ(100px);
        }
        @keyframes xuanzhuan{
            from{
                transform: rotateX(0) rotateZ(0);
            }
            to{
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="liumianti">
        <div class="box1">
            <img src="../lianxijietu/1101.jpg" alt="">
        </div>
        <div class="box2">
            <img src="../lianxijietu/1102.jpg" alt="">
        </div>
        <div class="box3">
            <img src="../lianxijietu/1103.jpg" alt="">
        </div>
        <div class="box4">
            <img src="../lianxijietu/1104.jpg" alt="">
        </div>
        <div class="box5">
            <img src="../lianxijietu/1105.jpg" alt="">
        </div>
        <div class="box6">
            <img src="../lianxijietu/1106.jpg" alt="">
        </div>
    </div>
</body>
</html>