[关闭]
@yangfch3 2016-01-03T11:10:27.000000Z 字数 938 阅读 1670

CSS 效果代码备忘

CSS


全屏slide中全屏无滚动条实现方法

  1. <div class="slide"></div>
  2. .slide{
  3. width:100%;
  4. overflow:hidden;
  5. }
  6. var slideHeight = window.innerHeight;
  7. var slide = document.getElementByClassName("slide")[0];
  8. slide.style.height = slideHeight;

背景图片轮播不间断实现方法

两个绝对定位的盒子,使用相同的背景图片,接连的无限制的往复移动即可!

  1. <div class="swiper-slide swiper_flow swiper-slide-active" style="height: 965px; margin-bottom: 30px;">
  2. <div class="temp_box">
  3. <div class="test01">
  4. </div>
  5. <div class="test02">
  6. </div>
  7. </div>
  8. </div>
  9. .swiper-slide-active .test01,.test02{
  10. width:100%;
  11. height:100%;
  12. background-image: url(./testBg.png);
  13. background-repeat: no-repeat;
  14. background-size:cover;
  15. }
  16. .swiper-slide-active .test01{
  17. display: block;
  18. position: absolute;
  19. left:-100%;
  20. top:0;
  21. z-index:100;
  22. animation: move01 5s linear infinite;
  23. }
  24. .swiper-slide-active .test02{
  25. display: block;
  26. position: absolute;
  27. left:0;
  28. top:0;
  29. animation: move02 5s linear infinite;
  30. }
  31. @keyframes move01{
  32. 0%{
  33. left:-100%;
  34. }
  35. 100%{
  36. left:0;
  37. }
  38. }
  39. @keyframes move02{
  40. 0%{
  41. left:0%;
  42. }
  43. 100%{
  44. left:100%;
  45. }
  46. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注