当前位置:   article > 正文

立体旋转(滚动圆环)_网页 、立体圆形滚动效果

网页 、立体圆形滚动效果

本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。

这一节为大家介绍的HTML5 & CSS3 动画效果,是一个滚动的圆环。先看看效果图:



也许大家看到这样的效果,都不知道怎么处理。其实思路很重要。只要相通了,其实并不难。(注:上面转动的图片大小均为 200 *130)


一、思路分析

Step 1. 将所有的图片堆叠在一起, 即图片1在最下面,图片2覆盖在图片1的上面,以此类推,图片9在最上面。此刻我们能看到的只有图片9。

Step 2. 由于总共是9张图片,而一圈总共是360°,所以我们可以将第一张图片绕着Y轴旋转40°,第二张图片绕着Y轴旋转80°,以此类推,最后一张图绕着Y轴旋转320°,使之整体看起来有层次感,从Y轴往下看。效果图如下:


Step 3. 将所有图片沿着自己的平面垂直的方向 "往外拉", 拉动到一定距离的时候,可以使得所有图片的边缘相接,看起来就像一个圆环一样,效果图如下:


二、代码清单

1. HTML代码:

  1. <div id="container">
  2. <ul>
  3. <li class="page1 light"><a href="http:/www.baidu.com"><img src="images/1.png"></a></li>
  4. <li class="page2 light"><a href="#"><img src="images/2.png"></a></li>
  5. <li class="page3"><a href="#"><img src="images/3.png"></a></li>
  6. <li class="page4"><a href="#"><img src="images/4.png"></a></li>
  7. <li class="page5"><a href="#"><img src="images/5.png"></a></li>
  8. <li class="page6"><a href="#"><img src="images/6.png"></a></li>
  9. <li class="page7"><a href="#"><img src="images/7.png"></a></li>
  10. <li class="page8"><a href="#"><img src="images/8.png"></a></li>
  11. <li class="page9 light"><a href="#"><img src="images/9.png"></a></li>
  12. </ul>
  13. </div>

代码结构非常清晰。 id为container的div用来摆放整个操作区的位置;ul用来存放所有需要控制的图片。

2. CSS代码:

  1. <style type="text/css">
  2. *{margin:0; padding:0;}
  3. #container{
  4. width:600px;
  5. height:300px;
  6. margin:100px auto;
  7. }
  8. #container ul{
  9. list-style: none;
  10. position: relative;
  11. /* 呈现3D效果 */
  12. -webkit-transform-style: preserve-3d;
  13. -webkit-transform:rotateX(-10deg) rotateY(0deg);
  14. /* 添加过度效果 */
  15. transition:all 1s ease 0s;
  16. }
  17. /* 居中显示 */
  18. #container ul li{
  19. float:left;
  20. position: absolute;
  21. top:85px;
  22. left:200px;
  23. opacity: 0.5;
  24. transition:all 1s ease 0s;
  25. }
  26. /* rotateY:每一个li均绕着y轴旋转40度;
  27. translateZ:能看出9个小块立体呈现的样子,属性要一起书写,不然会被覆盖掉 */
  28. #container ul li.page1{
  29. -webkit-transform:rotateY(0deg) translateZ(274.7479px);
  30. }
  31. #container ul li.page2{
  32. -webkit-transform:rotateY(40deg) translateZ(274.7479px);
  33. }
  34. #container ul li.page3{
  35. -webkit-transform:rotateY(80deg) translateZ(274.7479px);
  36. }
  37. #container ul li.page4{
  38. -webkit-transform:rotateY(120deg) translateZ(274.7479px);
  39. }
  40. #container ul li.page5{
  41. -webkit-transform:rotateY(160deg) translateZ(274.7479px);
  42. }
  43. #container ul li.page6{
  44. -webkit-transform:rotateY(200deg) translateZ(274.7479px);
  45. }
  46. #container ul li.page7{
  47. -webkit-transform:rotateY(240deg) translateZ(274.7479px);
  48. }
  49. #container ul li.page8{
  50. -webkit-transform:rotateY(280deg) translateZ(274.7479px);
  51. }
  52. #container ul li.page9{
  53. -webkit-transform:rotateY(320deg) translateZ(274.7479px);
  54. }
  55. #container ul li.light{
  56. opacity: 1;
  57. }
  58. </style>

这里的CSS代码,我有几点需要进行说明:

2.1)   -webkit-transform-style: preserve-3d: 使得ul这个整体具有3D动画的功能。

2.2)   -webkit-transform: rotateX(-10deg) rotateY(0deg): 默认情况下,整体绕着X轴倾斜10°,使之看起来有立体感。

2.3)   transition这个CSS3属性,如果有什么不明白的,请参考 图片翻转  这一章节的讲解。

2.4)   #container ul li 属性top和left值的计算, 由于设置的#container的 宽高分别为 600, 300, 而 ul中每张图片的尺寸是 200 * 130, 为了使得这些图片均居中显示,计算可得, top为85px,left为200px。

2.5)   关于#container ul li.page... 这些属性值的设定,请参照 step2 和 step3 的图解分析。

3. JQuery代码:

  1. <script type="text/javascript">
  2. $(function(){
  3. var originalDeg = 0;
  4. /* 一号开始是亮着的 */
  5. var lightedIndex = 0;
  6. var interval = setInterval(shift, 1000);
  7. function shift(){
  8. originalDeg = originalDeg - 40;;
  9. $("#container ul").css("-webkit-transform","rotateX(-10deg) rotateY("+originalDeg+"deg)");
  10. if(lightedIndex < 8){
  11. lightedIndex++;
  12. }else{
  13. lightedIndex = 0;
  14. }
  15. /* 先让所有的都灭掉*/
  16. $("#container ul li").removeClass("light");
  17. /* 先让正对面的亮起来 */
  18. $("#container ul li").eq(lightedIndex).addClass("light");
  19. /* 让正对面的左边亮起来*/
  20. if($("#container ul li").eq(lightedIndex).prev().length != 0){
  21. $("#container ul li").eq(lightedIndex).prev().addClass("light");
  22. }else{
  23. $("#container ul li:last").addClass("light");
  24. }
  25. /* 让正对面的右边亮起来*/
  26. if($("#container ul li").eq(lightedIndex).next().length != 0){
  27. $("#container ul li").eq(lightedIndex).next().addClass("light");
  28. }else{
  29. $("#container ul li:first").addClass("light");
  30. }
  31. }
  32. });
  33. </script>

这里的脚本代码还是比较容易理解的。

1. 定时更改originalDeg的值,使得#container ul每隔1秒转动40°。

2. 通过给不同的图片设置light这个属性,让图片不透明显示,而其他图片半透明显示,从而产生 "距离感"。 默认情况下,设置第1,2,9这三张图片具有light属性(HTML代码中),因为程序刚启动的时候,这三张图片是正对着我们的。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/86728
推荐阅读
相关标签
  

闽ICP备14008679号