html+css3 过渡模块-弹性效果设计

最新推荐文章于 2023-07-19 22:52:53 发布

老张谋

最新推荐文章于 2023-07-19 22:52:53 发布

阅读量439

点赞数

分类专栏：前端技术文章标签： html css web 弹出效果

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88059376

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

1.编写过渡效果套路：
（1）不要管过渡，先编写基本界面
（2）编写我们认为需要修改的属性
（3）再回过头去给被修改属性的那个元素添加过度即可；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>165-过渡模块-弹性效果</title>
    <style>
        *{
           margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            text-align: center;
            margin-top: 100px;
            line-height: 100px;
        }
        div span{
            font-size:80px;
        }
        /*告诉系统只要div悬停了，就会找到span*/
        div:hover span{
            margin:0 20px;
            transition:margin 3s;
        }

    </style>
</head>
<body>
<!--
<div>
    <span>祖</span>
    <span>国</span>
    <span>我</span>
    <span>永</span>
    <span>远</span>
    <span>爱</span>
    <span>你</span>
</div>
</body>
</html>

效果：鼠标放上去后，字体慢慢弹开

老张谋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css3 过渡模块-弹性效果设计

1.编写过渡效果套路：（1）不要管过渡，先编写基本界面（2）编写我们认为需要修改的属性（3）再回过头去给被修改属性的那个元素添加过度即可；&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;165-过渡模块-弹性效果
复制链接

扫一扫