css动画

最新推荐文章于 2025-05-27 21:13:42 发布

磁悬浮电冰箱

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量46

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131857306

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画-变形</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            
        }
        .box1:hover{
            animation: xuanzhuan 1s linear;
        }
        .div1{
            width: 200px;
            border-radius: 50%;
            background-color: aqua;
            /* 平移 translate
                第一个值是 横向偏移量
                第二个值是 纵向偏移量
            */
            
            margin: 0;
        }
        .div1:hover{
            cursor: pointer;
            /* transform: translate(60px,100px); */
            box-shadow: 0px 10px 10px 10px gray;
            transition: 0.2s;
            /* animation: xuanzhuan 1s linear; */
        }
        .div2:hover{
            /* 旋转 角度的单位*/
            transform: rotate(-30deg);
            background-color: aqua;
        }
        .div3:hover{
            /* 缩放 默认值是 1 小于1就是缩小，大于1 就是放大  */
            /* transform: scale(0.6); */
            background-color: aquamarine;
            /* 改变位置 
            top left bottom right center 
            两两组合使用
            */
            transform-origin: right center;
            transform: translateY(50%) scale(0.5,0.5);
            transition: 0.5s;
        }
        .div4:hover{
            /* 倾斜 */
            /* transform: skew(-30deg); */
            transform: skewY(-30deg);
            background-color: brown;
        }
        .div5{
            background-color: aquamarine;
        }
        .div5:hover{
            /* animation: name  2s linear; */
            transform: matrix(1 ,0.2 ,0 ,1 ,0 ,0);
        }

        /* 关键帧 */
        @keyframes name {

            10% {
                width: 200px;
            }
            20%{
                width: 300px;
            }
            40%{
                width: 500px;
            }
            100%{
                width: 200px;
            }
        }
        @keyframes xuanzhuan {
            0%{
                transform: rotate(0deg) translate(30px);
            }
            50%{
                transform: rotate(1800deg) translate(300px);
            }
            100%{
                /* transform: rotate(60deg); */
                transform: rotate(360deg) translate(30px);
                /* width: 300px; */
            }
            /* 40%{
                transform: rotate(360deg);
            }
            60%{
                
                transform: rotate(0deg);
            }
            80%{
                transform: translate(60px);
            }
            100%{
                transform: rotate(360deg);
            } */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="div1">平移</div>
        <!-- 平移之后占位状态不变 -->
        <p>22222</p>
    </div>
    <div>
        <div class="div2">旋转</div>
    </div>
    <div>
        <div class="div3">缩放</div>
    </div>
    <div>
        <div class="div4">倾斜</div>
    </div>
    <div>
        <div class="div5"></div>
    </div>
</body>
</html>