此编程所需语言有:Html、JavaScript、Css。
一.Html Code
此处由父元素div包括两个子元素节点div组成:
reversal-all和reversal-1的position的属性设为absolute/*相对于浏览器定位 从而达到重叠div的效果，反之会错开),也可以全部设为absolute。*/
但测试后发现这样设置会出现 “刷新页面，第二张图片会在顶层遮住第一张图片”的情况 ,因此可以给第一个图片的div使用z-index: 999语句来强制将其置于顶层。
二.Css Code
此处由两部分动画组成：
第一张图片翻转至一半消失，第二张图片翻转至一半出现。
(1.)
@keyframes reversalin { from { transform: perspective(1400px);/*3d变形 使其更加真实*/ opacity: 1;/*透明值 0为透明 1为不透明*/ } 40% { transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);/*rotate3d(x,y,z,角度)*/ opacity: 1; }/*因为动画效果渐变所以在 50% 也就是动画到一半消失之前 保证他还是可见的*/ 50% { transform: perspective(1400px) rotate3d(0, 1, 0, -90deg); opacity: 0; } to { transform: perspective(1400px) rotate3d(0, 1, 0, -180deg); opacity: 0; }}
(2.)
@keyframes reversalout { from { transform: rotate3d(0, 1, 0, 180deg); opacity: 0; } 50% { transform: perspective(1400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } 60% { transform: perspective(1400px) rotate3d(0, 1, 0, 60deg); opacity: 1; } to { transform:perspective(1400px); opacity: 1; }}
最后只要在reversal-1和reversal-2加入相应的动画时间和名称 就可以用了
animation: reversalin 0.75s linear;/*使动画匀速*/
animation-fill-mode: both;/*animation-fill-mode 属性规定动画在播放之前或 之后，其动画效果是否可见。both为在第一关键帧和最后关键帧*/
animation: reversalout 0.75s linear;
animation-fill-mode: both;
但是目标是鼠标经过才进行效果，所以将它放入js中。
三.Js互动部分
首先建立两个class
.NO1{ animation: reversalin 0.75s linear; animation-fill-mode: both;}.NO2{ animation: reversalout 0.75s linear; animation-fill-mode: both;}
然后用js来调用这两个class， 当鼠标经过时(hover)执行事件
$(function(){ $(".reversal-all").hover(function(){ $(this).find(".reversal-1").children().removeClass();//移除子元素NO2 $(this).find(".reversal-2").children().removeClass();//移除子元素NO1 $(this).find(".reversal-1").children().addClass("NO1");//增加classNO1 $(this).find(".reversal-2").children().addClass('NO2');//增加classNO2 }, function(){ $(this).find(".reversal-1").children().removeClass();//移除classNO1 $(this).find(".reversal-2").children().removeClass();//移除classNO2 $(this).find(".reversal-1").children().addClass("NO2");//增加classNO2 $(this).find(".reversal-2").children().addClass('NO1');//增加classNO1 }); });
结束!
大连看妇科好的医院 http://www.dlbhfk.com/
大连正规妇科医院 http://www.dlfkyy.cn/
大连那家男科好 http://www.39552222.cn/