记录对hover、transiotion、linear的运用

来源：互联网发布：淘宝店铺权重有哪些编辑：程序博客网时间：2024/06/08 17:16

：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)

阅读全文

0 0