1.Hover(伪类)的含义:
伪类在鼠标移到元素上时向此元素添加特殊的样式。
2. transition动画过渡的含义:
transition是一个复合属性,包含以下几个子属性:
- transition-property:指定过渡或动态模拟的CSS属性;
- transition-duration:指定过渡完成所需的时间;
- transition-timing-function:指定过渡函数;
- transition-delay:指定开始出现的延迟时间;
过渡效果的时间曲线:
ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。
linear:元素样式从初始状态过渡到终止状态速度是恒速的(平均速度)。
ease-in:元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态。称之为渐显效果。
ease-out:元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态。称之为渐隐效果。
ease-in-out:元素样式从初始状态到终止状态时,先加速再减速。这种效果称之为渐显渐隐效果。
案列:
HTML 源代码:
<div class="newsPic">
<a href=""><img src="img/1124410538_1556158971180_title0h.jpg" alt=""></a>
<h4><a href="">[热点]丝绸之路起点城市西安观察</a></h4>
</div>
CSS样式表:
实现效果:
用红色矩形圈住的是过渡动画,transition: all(所有属性) 0.5s(过度的时间)ease过度属性(元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢)
用紫色矩形圈住的是position定位,如果这个元素不使用定位,那么当鼠标移入到伪类元素里面其他的元素就会被撑开,使用了定位就是相当于把这个元素从页面中拿出来不占页面的位置,自然也就不受其他元素的影响。
当鼠标移入img元素之后就会触发hover伪类里面写的样式,那么这个触发过程就会发生过渡动画,过渡的作用就是看起来有一个变化的过程。
谢谢观看,如有侵权请联系我删除,如有不足的地方希望指出。