二、day04_动画

最新推荐文章于 2024-08-04 20:38:28 发布
最新推荐文章于 2024-08-04 20:38:28 发布
阅读量81 收藏
点赞数
文章标签： 动画 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44627935/article/details/124598889
版权

case01：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case01</title>
    <style>
        body{
            background-color: #666;
        }
        p{
            width: 400px;
            height: 100px;
            font-size: 60px;
            line-height: 100px;
            text-align: center;
            background-color: gold;
            color: transparent;
            background-image: -webkit-linear-gradient(135deg, transparent 15%, #fff 17%, transparent 19%);
            background-image: linear-gradient(135deg, transparent 15%, #fff 17%, transparent 19%);
            /* 过渡 */
            transition: 3s;
            /* 背景剪裁 */
            -webkit-background-clip: text;
        }
        p:hover{
            background-position: 400px 0;
        }

        .yy{
            width: 384px;
            height: 216px;
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2F005zCUrily1gylkfn0f8gj30j60dp0tb.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653652936&t=8f747f07115458765b268f432238af05);
            background-size: cover;

            -webkit-mask-image: -webkit-linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
            mask-image: linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
            transition: 3s;
        }
        .yy:hover{
            background-position: 384px 0;
        }

        .bg{
            width: 384px;
            height: 216px;
            background-image: -webkit-linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
            background-image: linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
        
        }

        .ch{
            width: 500px;
            height: 300px;
            background-image: -webkit-radial-gradient(center bottom, transparent 30%, purple, deepskyblue, cyan, greenyellow, gold, orange ,red, transparent 50%);
            background-image: radial-gradient(center bottom, transparent 30%, purple, deepskyblue, cyan, greenyellow, gold, orange ,red, transparent 50%);
        }
    </style>
</head>
<body>
    <p>千山鸟飞绝</p>
    <div class="yy"></div>
    <div class="bg"></div>
    <div class="ch"></div>
</body>
</html>

在这里插入图片描述

case02：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case02</title>
    <style>
        /* 定义zhen动画 */
        @keyframes bean_roll1{
            /* from{transform: rotate(0);}
            to{transform: rotate(45deg);}
        } */
        0% {
            transform:rotate(0);
        }
        50%{
            transform:rotate(45deg);
        }
        100%{
            transform:rotate(0);
        }
        }

        .bean{
            width: 200px;
            height: 200px;
            background-color: #333;
            position: relative;
        }
        @keyframes bean_roll2{
            /* from{transform: rotate(0);}
            to{transform: rotate(-45deg);} */
            0% {
            transform:rotate(0);
        }
        50%{
            transform:rotate(-45deg);
        }
        100%{
            transform:rotate(0);
        }
        }

        @keyframes dou_move{
            /* from{
                left:200px;
            }
            to{
                left:80px;
            } */
            0%{
                left: 200px;
                opacity: 1;
            }
            50%{
                left: 80px;
                opacity: 1;
            }
            50.1%{
                left: 80px;
                opacity: 0;
            }
            100%{
                left: 80px;
                opacity: 0;
            }
        }


        .bean{
            width: 200px;
            height: 200px;
            background-color: #333;
            position: relative;
        }
        .bean .cdr{
            width: 0;
            height: 0;
            border: 50px solid gold;
            border-right-color: transparent;
            border-radius: 50%;
            position: absolute;
            left: 30px;
            top: 50px;
        }
        .cdr:nth-of-type(1){
            /* animation: 动画名称 动画执行时间【延迟时间 动画曲线 执行次数 是否反向执行 是否保留最后一帧】; */
            /* infinite重复的 */
            animation: bean_roll1 2s linear infinite alternate;
        }
        .cdr:nth-of-type(2){
            animation: bean_roll2 2s linear infinite alternate;
        }
        .eye{
            width: 16px;
            height: 16px;
            background-color: #333;
            position: absolute;
            left:80px;
            top:66px;
            border-radius: 50%;
        }
        .dou{
            width: 16px;
            height: 16px;
            background-color: gold;
            position: absolute;
            left: 200px;
            top: 92px;
            border-radius: 50%;
            animation: dou_move 2s linear infinite;
        }
    </style>
</head>
<body>
    <div class="bean">
        <div class="cdr"></div>
        <div class="cdr"></div>
        <div class="eye"></div>
        <div class="dou"></div>
    </div>
</body>
</html>

在这里插入图片描述

case03：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case03</title>
    <style>
        @keyframes roll{
            from{
                transform:rotateX(0) rotateY(0) rotateZ(0);
            }
            to{
                transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;

        }
        div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .wrap{
            margin:100px;
            animation: roll 4s linear infinite;
            /* 开启3d */
            transform-style:preserve-3d;
        }
        .wrap div{
            line-height:200px;
            text-align:center;
            font-size: 100px;
            color:#fff;
        }
        /* 左右 */
        .wrap div:nth-of-type(1){
            transform: rotateY(-90deg) translateZ(100px);
            background-color: hotpink;
        }
        .wrap div:nth-of-type(2){
            transform: rotateY(90deg) translateZ(100px);
            background-color: deepskyblue;
        }
        /* 上下 */
        .wrap div:nth-of-type(3){
            transform: rotateX(90deg) translateZ(100px);
            background-color: gold;
        }
        .wrap div:nth-of-type(4){
            transform: rotateX(-90deg) translateZ(100px);
            background-color: tomato;
        }
        /* 前后 */
        .wrap div:nth-of-type(5){
            transform: translateZ(100px);
            background-color: purple;
        }
        .wrap div:nth-of-type(6){
            transform: rotateX(180deg) translateZ(100px);
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
    </div>
</body>
</html>

在这里插入图片描述

case04：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case04</title>
    <style>
        @keyframes roll {
            from {
                transform: rotateX(0) 
                           rotateY(0) 
                           rotateZ(0);
            }
            to {
                transform: rotateX(360deg) 
                           rotateY(720deg) 
                           rotateZ(360deg);
            }
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #111;
        }
        div {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .wrap {
            /* 关键动画点 */
            transform-origin: 300px 300px;
            margin: 200px;
            margin-left: 500px;
            animation: roll 4s linear infinite;
            /* 开启3d */
            transform-style: preserve-3d;
        }
        .wrap div {
            opacity: .5;
        }
        .wrap .small {
            width: 100px;
            height: 100px;
            margin: 50px;
        }
        /* 左右  */
        .wrap div:nth-of-type(1) {
            transform: rotateY(-90deg) translateZ(100px);
            background-color: hotpink;
        }
        .wrap div:nth-of-type(2) {
            transform: rotateY(90deg) translateZ(100px);
            background-color: deepskyblue;
        }
        /* 上下 */
        .wrap div:nth-of-type(3) {
            transform: rotateX(90deg) translateZ(100px);
            background-color: gold;
        }
        .wrap div:nth-of-type(4) {
            transform: rotateX(-90deg) translateZ(100px);
            background-color: greenyellow;
        }
        /* 前后 */
        .wrap div:nth-of-type(5) {
            transform: translateZ(100px);
            background-color: palevioletred;
        }
        .wrap div:nth-of-type(6) {
            transform: rotateX(180deg) translateZ(100px);
            background-color: rgb(255, 162, 0);
        }

        .wrap div:nth-of-type(7) {
            transform: rotateY(-90deg) translateZ(50px);
            background-color: hotpink;
        }
        .wrap div:nth-of-type(8) {
            transform: rotateY(90deg) translateZ(50px);
            background-color: deepskyblue;
        }
        .wrap div:nth-of-type(9) {
            transform: rotateX(90deg) translateZ(50px);
            background-color: gold;
        }
        .wrap div:nth-of-type(10) {
            transform: rotateX(-90deg) translateZ(50px);
            background-color: greenyellow;
        }
        .wrap div:nth-of-type(11) {
            transform: translateZ(50px);
            background-color: palevioletred;
        }
        .wrap div:nth-of-type(12) {
            transform: rotateX(180deg) translateZ(50px);
            background-color: rgb(255, 162, 0);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
    </div>
</body>
</html>

在这里插入图片描述

case05：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case05</title>
    <style>
        @keyframes move{
            /* from{
                left: 0
            }
            to{
                left: -1600px
            } */
            0%{left: 0;}
            24%{left: 0;}
            26%{left: -400px;}
            49%{left: -400px;}
            51%{left: -800px;}
            74%{left: -800px;}
            76%{left: -1200px;}
            98%{left: -1200px;}
            100%{left: -1600px;}
        }

        @keyframes dot{
            0%{opacity: 1;}
            24%{opacity: 1;}
            25%{opacity: .7;}
            100%{opacity: .7;}
        }
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;

        }
        .wrap .move{
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 8s linear infinite;
        }
        .wrap .move img{
            width: 400px;
            height: 300px;
            float: left;
        }
        .wrap .dots{
            position: absolute;
            width: 160px;
            height: 16px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, .75);
            bottom: 16px;
            left: 120px;

            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .wrap .dots .dot{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            opacity: .7;
            animation: dot 8s linear infinite;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="move">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2F005zCUrily1gylkfn0f8gj30j60dp0tb.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=a3a35d304eeccd2325475c7204e3d418" alt="">
           
            
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx11%2F0513201H609%2F2005131H609-2.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=751ede4338bee715a3039446161ae82f" alt="">
            
            
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111420161100%2F201114161100-1.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=eebe81a60606b377b73853799e2e28d9" alt="">
            
            
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffc1f4134970a304e24513b42d6c8a786c9175c12.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653710185&t=0f4274590fae2ab43e78a699c9071fef" alt="">


                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2F005zCUrily1gylkfn0f8gj30j60dp0tb.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=a3a35d304eeccd2325475c7204e3d418" alt="">
            
        </div>
        <div class="dots">
            <div class="dot"></div>
            <div style="animation-delay: 2s;" class="dot"></div>
            <div style="animation-delay: 4s;" class="dot"></div>
            <div style="animation-delay: 6s;" class="dot"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

case06：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case 06</title>
    <style>
        @keyframes show{
            0%{opacity: 1;}
            25%{opacity: 1;}
            26%{opacity: 0;}
            100%{opacity: 0;}
        }
        *{
            margin: 0;
            padding: 0;
        }
        .imgs{
            width: 400px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        }
        .imgs img{
            width: 400px;
            height: 300px;
            /* display: none; */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            animation: show 8s linear infinite;
        }
    </style>
</head>
<body>
    <div class="imgs">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2F005zCUrily1gylkfn0f8gj30j60dp0tb.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=a3a35d304eeccd2325475c7204e3d418" alt="">
   
    
        <img style="animation-delay: 2s;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx11%2F0513201H609%2F2005131H609-2.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=751ede4338bee715a3039446161ae82f" alt="">
    
    
        <img style="animation-delay: 4s;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111420161100%2F201114161100-1.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653708058&t=eebe81a60606b377b73853799e2e28d9" alt="">
    
    
        <img style="animation-delay: 6s;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffc1f4134970a304e24513b42d6c8a786c9175c12.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653710185&t=0f4274590fae2ab43e78a699c9071fef" alt=""> 
</div>
</body>
</html>

在这里插入图片描述

case07：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case07</title>
    <style>
        @keyframes roll{
            0%{transform: rotateX(-45deg) rotateZ(0);}
            100%{transform: rotateX(-45deg) rotateZ(360deg);}
        }
        .bg{
            width: 500px;
            height: 500px;
            background-color: #333;
            position: relative;
        }
        .bg div{
            position: absolute;
        }
        .sun{
            width: 100px;
            height: 100px;
            background-color: gold;
            border-radius: 50%;
            left: 200px;
            top: 200px;
        }
        .sxh{
            /* 怪异盒模型 */
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            border: 2px solid #eee;
            border-radius: 50%;
            left: 100px;
            top: 100px;
            transform: rotateX(45deg);
            transform-style: preserve-3d;
        }
        .ball{
            width: 80px;
            height: 80px;
            background-color: skyblue;
            border-radius: 50%;
            transform: rotateX(-45deg);
            left: 0px;
            top: 20px;
            /* 修改旋转点 */
            transform-origin: 150px 150px;
            animation: roll 4s linear infinite;
            
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="sun"></div>
        <div class="sxh">
            <div class="ball"></div>
        </div>
        
    </div>
</body>
</html>

在这里插入图片描述

case08：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case08</title>
    <style>
        @keyframes jump{
            0%{
                top: 80px;
                transform: rotate(0deg);
            }
            12.5%{
                top: 100px;
                border-bottom-right-radius: 70px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
            }
            25%{
                top: 80px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
            }
            37.5%{
                top: 100px;
                border-top-right-radius: 70px;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
            }
            50%{
                top: 80px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
            }
            62.5%{
                top: 100px;
                border-top-left-radius: 70px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
            75%{
                top: 80px;
                border-top-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
            87.5%{
                top: 100px;
                border-bottom-left-radius: 70px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-top-left-radius: 10px;
            }
            100%{
                top: 80px;
                border-bottom-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-top-left-radius: 10px;
                transform: rotate(360deg);
            }
        }
        @keyframes scaleshadow{
            from{transform: scaleX(1);}
            to{transform: scaleX(1.2);}
        }
        .bg{
            width: 300px;
            height: 300px;
            background-color: rgb(78, 139, 219);
            position: relative;
        }
        .jump{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            left: 100px;
            top: 80px;
            border-radius: 10px;
            animation: jump 3.2s linear infinite;
        }
        .shadow{
            width: 80px;
            height: 20px;
            background-color: rgb(156, 153, 153);
            position: absolute;
            left: 110px;
            top: 190px;
            border-radius: 50%;
            animation: scaleshadow 0.4s linear infinite alternate;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="shadow"></div>
        <div class="jump"></div>
    </div>
</body>
</html>

在这里插入图片描述

case09：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case09</title>
    <style>
        @keyframes roll{
            from{transform: rotate(0);}
            to{transform: rotate(360deg);}
        }
        .bg{
            width: 200px;
            height: 200px;
            background-color: rgb(38, 177, 241);
            position: relative;
        }
        .clock{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 4px solid #fff;
            position: absolute;
            left: 50px;
            top: 50px;
            border-radius: 50%;
        }
        .z1, .z2{
            position: absolute;
            width: 8px;
            height: 50px;
            background-color: #fff;
            left: 96px;
            top: 50px;
            /* 修改旋转点 */
            transform-origin: center bottom;
        }
        .z1{
            animation: roll 2s linear infinite;
        }
        .z2{
            height: 30px;
            top: 70px;
            animation: roll 10s linear infinite;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="clock"></div>
        <div class="z1"></div>
        <div class="z2"></div>
    </div>
</body>
</html>

在这里插入图片描述

fangkuai:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方块</title>
    <style>
        @keyframes roll {
            0% {
                height: 100%;
            }
            25% {
                height: 75%;
            }
            50% {
                height: 50%;
            }
            75% {
                height: 25%;
            }
            100% {
                height: 0%;
            }
        }
        /* @keyframes ball{
            0%{width: 0;height: 0;}
            13%{width: 65px;height: 0;}
            26%{width: 130px;height: 0;}
            39%{width: 130px;height: 65px;}
            52%{width: 130px;height: 130px;}
            65%{width: 65px;height: 130px;}
            78%{width: 0;height: 130px;}
            91%{width: 0;height: 65px;}
            100%{width: 0;height: 0;}
        } */
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            position: relative;
            overflow: hidden;
        }
        .kuai{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid white;
            background-color: white;
            margin-top: -65px;
            margin-left: 95px;
            position:absolute;
            /* animation: roll 4s infinite ease; */
        }
        .roll {
            vertical-align: top;
            display: inline-block;
            width: 100px;
            background-color: blueviolet;
            animation: roll 4s infinite linear;
        }
        /* .big{
            width: 110px;
            height: 110px;
            border: 10px solid pink;
        } */
        .ball{
            width: 10px;
            height: 10px;
            background-color: white;
            margin: 75px;
            /* animation: ball 4s linear infinite; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="big">
            <div class="ball"></div>
        </div>
        
        <div class="kuai">
            <div class="roll"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

xiaochuan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小船</title>
    <style>
        @keyframes roll{
            /* from{transform: rotate(-60deg);}
            to{transform: rotate(60deg);} */
            0%{transform: rotate(-75deg);}
            50%{transform: rotate(75deg);}
            100%{transform:  rotate(-75deg);}
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            /* overflow: hidden; */
            position: relative;
        }
        .chuan{
            width: 100px;
            height: 100px;
            border: 8px solid white;
            border-radius: 50%;
            color: transparent;
            margin: 92px 92px;
            position: absolute;
            overflow: hidden;
        }
        .fan{
            width: 8px;
            height: 50px;
            background-color: white;
            margin: 25px 46px;
            transform-origin: center bottom;
            animation: roll 4s linear infinite;
        }
        .hai{
            /* width: 100px; */
            height: 30px;
            background: white; 
            margin-top: -30px; 
            /* margin-left: 6%; */
            
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="chuan">
            <div class="fan"></div>
            <div class="hai"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

[Augenstern]
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【100天精通Python】Day67：Python可视化_Matplotlib 绘制动画，2D、3D 动画 示例+代码
qq_35831906的博客
09-22 1195
Matplotlib提供了FuncAnimation类，允许您创建基于函数的动画。绘制2D动画，3D动画示例+代码
Android 实现扑克牌动画,Android_开发_Day10_扑克游戏
weixin_35682992的博客
05-26 990
Android_开发day10扑克游戏目的：通过写一些小游戏来增加学习中的乐趣，同时也是对前面学习的一些知识的一些整合。技术：<1> 单例设计模式：所谓的单例设计模式就是创造一个对象实例就可以在不同的地方去访问它，做到一改全改的效果方便程序的形成。单例设计模式首先不允许用户创建某个类的实例，可以将构造函数私有化，第二步在自己的类里面提供创建这个对象的方法。我们可以在类中用public ...
review day05_项目实战
m0_48941160的博客
05-02 1170
02_pygame的概述原装 02_pygame的概述原装 03_游戏的初始化与退出 04_游戏坐标以及rect类的使用 05_显示游戏窗口 05_游戏循环 06_绘制背景图像 未完成:::::::::::::::::::
Android动画屏保,Android Daydream 互动屏保
weixin_34332352的博客
05-26 910
Android Daydream 互动屏保API19 API23Create:2016-03-01继承DreamService来实现一个自定义屏保Dreams是当充电的设备空闲，或者插入底座时显示的互动屏保。在展览或陈列时，Dreams为APP提供一个定制的展示方式。DreamService的生命周期1.onAttachedToWindow()初始化设置，在这里可以调用 setContentVie...
Unity动画Animation Day05
LOVE_Me__的博客
06-25 848
Unity动画Animation
Day03_OpenTTD源代码框架分析
u010593516的专栏
10-11 1185
返回目录 首先，我们找程序的主入口，根据关键字 main( ，我们可以定位到 opentpp.cpp 的 openttd_main() 是程序的主入口。 我这里整理了 openttd_main() 调用的思维导图如下，可以在文章最下面下载这个文件 大致流程： 1.解析命令行参数（与大部分的c和c++处理初始化变量的方法类似，值得学习）; 2.扫描指定路径获取文件列表（图形、音乐、音效、文字等）； 3.初始化 窗口（Linux环境下是通过SDL2的方法开启窗口； 4.初始化Palettes(图片画板)；
Day12_OpenTTD的页面刷新原理
u010593516的专栏
11-12 2236
返回目录 每次我打开游戏看到菜单背景的时候，就惊叹于这个背景动画就像进入正式的游戏界面一般细致。研究源码后，我才知道原来这个背景动画真的就是一个游戏进度，我们只需要注释一行代码，就可以像下面一样拖动菜单的背景。 window.cpp Line2787 static void HandleAutoscroll() { if (_game_mode == GM_MENU || HasModalProgress()) return; <=只需要注释这一行代码 ... 普通的存档文件以.sav作为
糖果机器人_0006_day3_帧动画_应该只有一只汤姆猫
hzj_朝花夕拾
07-06 329
背景帧动画 事件设置 开始 停止 声音播放
【unity基础_Day10】 新版和旧版动画系统
weixin_45344894的博客
07-21 593
一、Legacy动画系统（旧版动画系统） 1.常用API Play() 直接播放动画 PlayQueued() 按顺序播放完一个动画之后继续播放 CrossFade() 在一定时间之内实动画的淡入淡出切换效果 2.Animation动画编辑器 事件的使用 3.Animation组件 二、Mecanim动画系统（新版动画系统） 1.Model 修改模型大小 （1）通过Model修改ScaleFactor （2）给需要修改的模型放入空的父物体中，修改父物体的大小 （3）一般不会...
[Day 7]JS FA、用户交互、JS动画的实现（二）
weixin_50077637的博客
01-27 1098
系列文章目录 文章目录系列文章目录前言一 获取动画对象二、设置动画参数三、添加事件和调用方法总结 前言 今天我们一起学习js动画 一 获取动画对象 通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。 <!-- xxx.hml --> <div class="container"> <div id="content" class="box" onclick="Show"></div> </
vue-component_day04_03.zip
07-02
本教程将深入探讨在“vue-component_day04_03”项目中，如何拆分静态组件并实现它们在页面加载时的正确初始化显示。 首先，让我们了解组件的基本概念。在Vue中，组件可以看作是自包含的独立单元，具有自己的视图和...
day02_04源码
01-30
本示例“day02_04源码”显然是一个学习项目，它通过两个箭头图标来控制图片的切换，为初学者提供了直观的交互体验。下面将详细解析这个知识点，包括图片浏览器的基本架构、图片加载策略以及用户交互设计。 首先，...
day20_JQuery基础.zip
02-20
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库...它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
day05_html_js_css_
09-29
在"day05_html_js_css_"这个主题中，我们主要关注如何利用这些技术实现动态和富有吸引力的动画效果，并将这些效果应用于实际生活中的各种场景。 HTML（HyperText Markup Language）是网页的基础，它定义了网页的...
day211203_web01.rar
12-11
3. **JavaScript**：这是一种编程语言，用于添加交互性到网页上，如表单验证、动态内容更新、动画等。学习JavaScript会涵盖变量、函数、DOM操作、异步编程等。 4. **前端框架**：如React、Vue或Angular，这些工具...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5644
再看代码： JS部分。
原神自定义倒计时
最新发布
lulei5153的博客
08-04 804
【代码】原神自定义倒计时。
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1577
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS：图片间空白间距问题的解决方案
q1003675852的博客
08-02 808
本文主要记录CSS：图片间空白间距问题的解决方案，特别是针对iphone 14 pro设备的新情况进行测试处理。
100day of swiftui
08-15
通过完成每个任务，学习者将逐渐了解和掌握SwiftUI框架的各种功能，包括视图布局、用户界面控件、数据绑定、动画效果、手势识别等等。在完成这些任务的过程中，学习者将从实践中学习并理解SwiftUI的使用方法和最佳...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值