艺灵设计

全部文章
×

HTML5创意动画

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-12-04 15:53:54 - 阅: - 评:2 - 积分:0

好几天没有更新文章了,一直在忙于公司工作,昨晚到今天一直在捣鼓一个效果.放图一张:

现在效果是出来了,但在天猫店铺中是如此的惨不忍睹,原因是屏蔽掉了部分代码(店铺效果预览地址:http://maerduke.tmall.com/p/rd322097.htm)心碎啊!!!唉,。。。。源码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5创意动画--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <meta name="keywords" content="HTML5创意动画,css3属性,animation,translateX,scale缩放,z轴旋转,位置互换特效">
  8. <meta name="description" content="HTML5创意动画,css3属性,animation,translateX,scale缩放,z轴旋转,位置互换特效">
  9. <style type="text/css">
  10. *{margin:0; padding:0;}
  11. body{background:#28251c url(/d/file/html5/2013-12-04/pic_bg.png) repeat-y 50% 0;height:100%;line-height:1%;overflow:hidden;}
  12. h2{text-align:left; color:#fff;width:25%; z-index:2222; padding-left:2%;position:absolute;top:30px;word-wrap:break-word;line-height:30px;}
  13. .user-l,.user-r{z-index:1000;width:50%;height:100%;background:#fff;top:0;}
  14. .user-l{-webkit-animation:ani8_l 5s linear 1;-moz-animation:ani8_l 5s linear 1;-o-animation:ani8_l 5s linear 1;-ms-animation:ani8_l 5s linear 1;animation:ani8_l 5s linear 1;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-o-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}
  15. .user-r{left:50%;-webkit-animation:ani8_r 5s linear 1;-moz-animation:ani8_r 5s linear 1;-o-animation:ani8_r 5s linear 1;-ms-animation:ani8_r 5s linear 1;animation:ani8_r 5s linear 1;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-o-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}
  16. .ts8{height:726px;width:990px; margin:0 auto;position:relative;overflow:hidden;}
  17. .user-hd8{position:absolute;top:500px;left:49%;z-index:40; text-align:center;}
  18. span{position:absolute; display:inline-block;}
  19. .ts8 span img{position:relative;}
  20. .z8_0{left:7px;bottom:29px;position:absolute;width:990px;height:310px; z-index:30}
  21. .z8_1{left:135px;top:61px;z-index:10;}
  22. .z8_2{left:625px;top:61px;z-index:11;}
  23. .z8_3{left:324px;bottom:156px;z-index:12;}
  24. .z8_0 .z8_0_1{background-image:url(/d/file/html5/2013-12-04/白云.png); background-repeat:repeat-x;width:100000px;height:310px;margin-left:-500px}
  25. .user-gy_all4{-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;-o-transition:all .8s ease-out;-ms-transition:all .8s ease-out;transition:all .8s ease-out;}
  26. .user-hd8 label{width:10px;height:10px;line-height:10px;border-radius:10px;background:#f00;cursor:pointer;display:inline-block;text-indent:-9999px;}
  27. .user-hd8 label:hover,#slider1:checked~.user-hd8 label:nth-child(1),#slider2:checked~.user-hd8 label:nth-child(2),#slider3:checked~.user-hd8 label:nth-child(3),#slider4:checked~.user-hd8 label:nth-child(4){-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);box-shadow:0 0 3px 3px #ff9900}
  28. .ts8 input{display:none;}
  29. #slider1:checked~.z8_1{z-index:11;left:674px;top:61px;}
  30. #slider1:checked~.z8_2{z-index:12;left:424px;bottom:156px;}
  31. #slider1:checked~.z8_3{z-index:10;left:135px;bottom:156px;}
  32. #slider1:checked~.z8_2 img,#slider2:checked~.z8_1 img{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);}
  33. #slider1:checked~.z8_3 img,#slider2:checked~.z8_3 img{-webkit-transform:scale(.8);-moz-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
  34. #slider2:checked~.z8_1{z-index:12;left:375px;top:61px;}
  35. #slider2:checked~.z8_2{z-index:10;left:135px;bottom:156px;}
  36. #slider2:checked~.z8_3{z-index:11;left:575px;bottom:156px;}
  37. #slider3:checked~.z8_1{z-index:10;left:135px;top:61px;}
  38. #slider3:checked~.z8_2{z-index:11;left:625px;top:61px;}
  39. #slider3:checked~.z8_3{z-index:12;left:324px;bottom:156px;}
  40. @-webkit-keyframes ani8_l{0%{-webkit-transform:translateX(0%);}100%{-webkit-transform:translateX(-100%);}}
  41. @-moz-keyframes ani8_l{0%{-moz-transform:translateX(0%);}100%{-moz-transform:translateX(-100%);}}
  42. @-o-keyframes ani8_l{0%{-o-transform:translateX(0%);}100%{-o-transform:translateX(-100%);}}
  43. @-ms-keyframes ani8_l{0%{-ms-transform:translateX(0%);}100%{-ms-transform:translateX(-100%);}}
  44. @keyframes ani8_l{0%{-webkit-transform:translateX(0%);}100%{-webkit-transform:translateX(-100%);}}
  45. @-webkit-keyframes ani8_r{0%{-webkit-transform:translateX(0%);}100%{-webkit-transform:translateX(100%);}}
  46. @-moz-keyframes ani8_r{0%{-moz-transform:translateX(0%);}100%{-moz-transform:translateX(100%);}}
  47. @-o-keyframes ani8_r{0%{-o-transform:translateX(0%);}100%{-o-transform:translateX(100%);}}
  48. @-ms-keyframes ani8_r{0%{-ms-transform:translateX(0%);}100%{-ms-transform:translateX(100%);}}
  49. @keyframes ani8_r{0%{-webkit-transform:translateX(0%);}100%{-webkit-transform:translateX(100%);}}
  50. @-webkit-keyframes ani8_z8_3{0%{-webkit-transform:translateY(-100%);}100%{-webkit-transform:translateY(0%);}}
  51. @-moz-keyframes ani8_z8_3{0%{-moz-transform:translateX(-100%);}100%{-moz-transform:translateX(0%);}}
  52. @-o-keyframes ani8_z8_3{0%{-o-transform:translateX(-100%);}100%{-o-transform:translateX(0%);}}
  53. @-ms-keyframes ani8_z8_3{0%{-ms-transform:translateX(-100%);}100%{-ms-transform:translateX(0%);}}
  54. @keyframes ani8_z8_3{0%{-webkit-transform:translateX(-100%);}100%{-webkit-transform:translateX(0%);}}
  55. @-webkit-keyframes ani8_z8_1{0%{-webkit-transform:translate(-100%);}100%{-webkit-transform:translate(0%);}}
  56. @-moz-keyframes ani8_z8_1{0%{-moz-transform:translate(-100%);}100%{-moz-transform:translate(0%);}}
  57. @-o-keyframes ani8_z8_1{0%{-o-transform:translate(-100%);}100%{-o-transform:translate(0%);}}
  58. @-ms-keyframes ani8_z8_1{0%{-ms-transform:translate(-100%);}100%{-ms-transform:translate(0%);}}
  59. @keyframes ani8_z8_1{0%{-webkit-transform:translate(100%);}100%{-webkit-transform:translate(0%);}}
  60. @-webkit-keyframes ani8_z8_2{0%{-webkit-transform:translate(100%);}100%{-webkit-transform:translate(0%);}}
  61. @-moz-keyframes ani8_z8_2{0%{-moz-transform:translate(100%);}100%{-moz-transform:translate(0%);}}
  62. @-o-keyframes ani8_z8_2{0%{-o-transform:translate(-100%);}100%{-o-transform:translate(0%);}}
  63. @-ms-keyframes ani8_z8_2{0%{-ms-transform:translate(-100%);}100%{-ms-transform:translate(0%);}}
  64. @keyframes ani8_z8_2{0%{-webkit-transform:translate(-100%);}100%{-webkit-transform:translate(0%);}}
  65. @-webkit-keyframes ani8_user-hd8{0%{opacity:0;}100%{opacity:1;}}
  66. @-moz-keyframes ani8_user-hd8{0%{opacity:0;}100%{opacity:1;}}
  67. @-o-keyframes ani8_user-hd8{0%{opacity:0;}100%{opacity:1;}}
  68. @-ms-keyframes ani8_user-hd8{0%{opacity:0;}100%{opacity:1;}}
  69. @keyframes ani8_user-hd8{0%{opacity:0;}100%{opacity:1;}}
  70. .z8_3{-webkit-animation:ani8_z8_3 5s linear 1;-moz-animation:ani8_z8_3 5s linear 1;-o-animation:ani8_z8_3 5s linear 1;-ms-animation:ani8_z8_3 5s linear 1;animation:ani8_z8_3 5s linear 1;}
  71. .z8_1{-webkit-animation:ani8_z8_1 5s linear 1;-moz-animation:ani8_z8_1 5s linear 1;-o-animation:ani8_z8_1 5s linear 1;-ms-animation:ani8_z8_1 5s linear 1;animation:ani8_z8_1 5s linear 1;}
  72. .z8_2{-webkit-animation:ani8_z8_2 5s linear 1;-moz-animation:ani8_z8_2 5s linear 1;-o-animation:ani8_z8_2 5s linear 1;-ms-animation:ani8_z8_2 5s linear 1;animation:ani8_z8_2 5s linear 1;}
  73. .user-hd8{-webkit-animation:ani8_user-hd8 10s linear 1;-moa-animation:ani8_user-hd8 10s linear 1;-o-animation:ani8_user-hd8 10s linear 1;-ms-animation:ani8_user-hd8 10s linear 1;animation:ani8_user-hd8 10s linear 1;}
  74. .z8_1:hover{-webkit-transform:rotate3d(0,1,0,360deg);-moz-transform:rotate3d(0,1,0,360deg);-o-transform:rotate3d(0,1,0,360deg);-ms-transform:rotate3d(0,1,0,360deg);transform:rotate3d(0,1,0,360deg)}
  75. .z8_2:hover{-webkit-transform:rotate3d(1,0,0,360deg);-moz-transform:rotate3d(1,0,0,360deg);-o-transform:rotate3d(1,0,0,360deg);-ms-transform:rotate3d(1,0,0,360deg);transform:rotate3d(1,0,0,360deg)}
  76. .z8_3:hover{-webkit-transform:rotate3d(1,1,1,360deg);-moz-transform:rotate3d(1,1,1,360deg);-o-transform:rotate3d(1,1,1,360deg);-ms-transform:rotate3d(1,1,1,360deg);transform:rotate3d(1,1,1,360deg)}
  77. </style>
  78. </head>
  79. <body>
  80. <h2>操作说明:左图为x轴翻转;中图为360度全方位翻转;右图为y轴翻转。鼠标滑过时请勿一直更换位置,即滑过后就不要移动。下面三个圆点点击时是三张图进行位置切换 <br/>(请使用非ie内核浏览器浏览,推荐chrome,ff等)</h2>
  81. <span class="user-l"></span>
  82. <span class="user-r"></span>
  83. <div class="ts8">
  84.  <input type="radio" name="slider" id="slider1">
  85.  <input type="radio" name="slider" id="slider2">
  86.  <input type="radio" name="slider" id="slider3">
  87.  <span class="z8_1 user-gy_all4"><img src="/d/file/html5/2013-12-04/pic1.png" class="user-gy_all4" /></span>
  88.  <span class="z8_2 user-gy_all4"><img src="/d/file/html5/2013-12-04/pic2.png" class="user-gy_all4" /></span>
  89.  <span class="z8_3 user-gy_all4"><img src="/d/file/html5/2013-12-04/pic3.png" class="user-gy_all4" /></span>
  90.  <div class="user-hd8">
  91.   <label for="slider1" class="la1 user-gy_all4"></label>
  92.   <label for="slider2" class="la2 user-gy_all4"></label>
  93.   <label for="slider3" class="la3 user-gy_all4"></label>
  94.  </div>
  95.  <marquee scrollamount="2" scrolldelay="120" direction="left" behavior="scroll" class="z8_0"><span class="z8_0_1"></span></marquee>
  96.  </div>
  97. </body>
  98. </html>

注:本文预期效果的思路与方法均为个人观点,不代表大众,准确性不做保证,以实现最终效果为标准!代码仅供读者参考。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/html5/2013-12-04/124.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: HTML5创意动画 css3属性 animation translateX scale缩放 z轴旋转 位置互换特效

上一篇: HTML5单车动画   下一篇: h5实战二之软装设计师招募令

评论区