课程JS+css3实现带预览图幻灯片效果问题-慕课网

课程JS+css3实现带预览图幻灯片效果问题

来源：2-3 基本界面样式完成

Mr君

2016-08-18 10:02

有个问题请大家指导哈，就是那两个标题没有在:hover下怎么就动起来了 11分钟左右
.slider .main .main-i h2{margin-left:45px;} .slider .main .main-i h3{margin-left:-45px;} .slider .main .main-i h2,.slider .main .main-i h3{ -webkit-transform:all 0.8s;} .slider .main .main-i_active h2,.slider .main .main-i_active h2{margin-right:0;}

写回答关注

2回答

慕盖茨4878874

2016-08-22 17:56:28

这个是css3动画呀，transition就是一个动画属性，你可以去w3school看看这个API（transition），所以它跟hover是没有关系的，hover是鼠标覆盖，而transition是页面加载时就可以动了
transform:all 0.8s all指的就是.slider .main .main-i h2,.slider .main .main-i h3到.slider .main .main-i_active h2,.slider .main .main-i_active h2里的所有有变化的属性，可以看到margin-right产生了变化，而0.8就是运动的时间了。

0 0
z阿汀

2016-08-22 11:00:08

因为有一个transform。main内div的class名从main-i变成了main-i_active，h2和h3的margin随之发生了变化，加了transform之后，margin会在0.8s内过渡改变，所以有了一个动态的效果。

0 0