【Html】17-transition过渡动画

最新推荐文章于 2023-11-01 20:19:55 发布

郑SaScha

最新推荐文章于 2023-11-01 20:19:55 发布

阅读量379

点赞数

分类专栏： Html+CSS入门学习记录

本文链接：https://blog.csdn.net/m0_53493562/article/details/118067568

版权

transition过渡动画

让目标的CSS属性值在一定的时间范围内，平滑的过渡

`transition`

transition:“改变的CSS属性” “过渡的时间” ‘’运动曲线‘ “延时时间”

transition:"transition-property" "transition-duration" "transition-timing-function" "transition-delay"

先不加动画

<style>
        div {
       
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }

        div:hover {
       
            font-size: 50px;
            font-weight: 700;
            color: #ccf;
            text-align: center;
            line-height: 200px;
            background-color: #ccf;
            text-shadow:
                1px 1px 4px #000,
                -1px -1px 4px #fff;
            border-radius: 50%;
            box-shadow: 1px -1px 10px #ccc;
        }