鼠标经过图形变长

EstherNi

已于 2023-04-18 16:59:38 修改

阅读量189

点赞数

分类专栏： html-css 文章标签： html5 css

于 2021-08-28 13:47:30 首次发布

本文链接：https://blog.youkuaiyun.com/EstherNi/article/details/119967223

版权

CSS 动画 transition hover效果网页设计

关键词由优快云通过智能技术生成

html-css 专栏收录该内容

3 篇文章

订阅专栏

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <style>
        .normal{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .animation{
            margin-top: 30px;
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: width 2s;
            transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
            animation: normal ;
        }

        .animation:hover{
            /*transform: translate(50px,100px);*/
            /*transform: rotate(30deg);*/
            /*transform: scale(2,2);*/
            /*transform: skew(20deg,20deg);*/
            /*transform: rotateX(50deg);*/
            width: 200px;

        }
    </style>
</head>
<body>
    <div class="animation"></div>
    <br/>
</body>
</html>