艺灵设计

全部文章
×
当前位置：首页 >> html5>>HTML5创意动画

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>

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/html5/2013-12-04/124.html

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

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

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

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

相关文章

css3动画教程之画对勾特效妙用伪对象实现3D立方体纯CSS3属性实现静态3D立方体HTML5单车动画初次尝试实现chrome浏览器的logocss3文本阴影效果css3边框阴影效果css3圆角在网页中的应用

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果淘宝店内搜索框代码生成器淘宝天猫pc端宝贝转无线端链接工具全屏海报如何开启HBuilder的javascript语法错误提示功能淘宝天猫店铺装修问题与技巧性经验汇总Vue.js实例之v-show用法Vue.js实例之v-bind:style用法

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。