在 CSS 中, 大家通过使用伪类选择器”:hover
”等属性,可以给元素添加鼠标移入或移出的样式效果。这是因为 CSS 可以改变元素的样式,也可以改变元素的属性。在实现图片刷新随机变化的时候,大家也可以使用 CSS 样式实现。
.HTML {background:#E6E6E6;} #Img {width:200px; height:200px;} /* css3 切换 transform anational */ #Img:hover {transform:rotate(360deg);} /* css3 切换 opacity */ #Img:hover {opacity:.2;} /* 选项卡切换——不用Preload可以实现随机切换 */ #Img1 {position:absolute; top:0px; left:0px; z-index:1;} #Img2 {position:absolute; top:0px; left:0px; z-index:2;} #Img3 {position:absolute; top:0px; left:0px; z-index:3;} /* CSS3动画 keyframes实现 */ @keyframes shift { 0% {transform:rotate(0);} 20% {transform:rotate(20deg);} 40% {transform:rotate(40deg);} 60% {transform:rotate(60deg);} 80% {transform:rotate(80deg);} 100% {transform:rotate(100deg);} } #Img:hover {animation:shift 1s ease forwards ;}
以上是实现图片刷新随机变化的几种方法,但是,它们需要的前提是每张图片的大小和比例是完全一样的,否则就会出现缺陷。因此,实现图片随机刷新的同时也需要考虑其实际使用效果和应用场景。