记录对hover、transiotion、linear的运用

最新推荐文章于 2022-12-01 15:04:59 发布

奔跑的酸菜鱼

最新推荐文章于 2022-12-01 15:04:59 发布

阅读量544

点赞数

分类专栏：个人记录文章标签： hover动画

本文链接：https://blog.csdn.net/a297487901/article/details/76408304

版权

个人记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

：hover，可用于对自身的操作和对子元素的添加属性：

例1（鼠标经过时，子元素开始有动画效果）：

鼠标经过时，子元素开始有动画效果

<style>
        .div1{
            width:200px;
            height:200px;
            background-color: #000;
            padding: 20px;
        }
        .div2{
            width:1px;
            height:1px;
            background-color: #fff;
            transition:width 1s;
        }
        .div1:hover .div2{
            width:200px;
        }
</style>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>

例2：

鼠标经过，子元素span为display:block

鼠标经过，子元素span为display:block。

案例2：图片往左飘：

这里写图片描述

img{
    transition:linear 0.3s;
    }
:hover{
    maring-left:-10px;
    }

相关属性：

transition-property：

可取值：
none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。
property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-timing-function

既然是动画，那么就有动画的运行速率，不同的速度会产生不同的结果，以下是可取值。

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)