3 4
8 5 这是小狗哦!! 6
7 9 10
14 11 这是小狗哦!!12
13 时间:2021-07-01 10:21:17 帮助过:34人阅读
请看效果:http://webfront.verynet.cc/pc/rotate.html
这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。
HTML结构:
123 485 这是小狗哦!! 679 101411 这是小狗哦!!1213
CSS样式:
1
代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。