文章
文章用户商铺文档快讯圈子网址导航供求信息

WP文章或页面实现CSS3随机背景图片的切换特效

简述

在阿钰博客发现的一篇文章，css3的随机背景图片淡入淡出切换特效（图片可自行设置），演示效果如本篇文章背景所示！

定义和用法

[ssredlist]

  • 通过 @keyframes 规则，您能够创建动画。
  • 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
  • 在动画过程中，您能够多次改变这套 CSS 样式。
  • 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
  • 0% 是动画的开始时间，100% 动画的结束时间。
  • 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
  • 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

[/ssredlist]

核心css部分(记得切换图片地址)

  1. body {  
  2.     background: #000;  
  3.     background-attachment: fixed;  
  4.     word-wrap: break-word;  
  5.     -webkit-background–size: cover;  
  6.     -moz-background–size: cover;  
  7.     background–size: cover;  
  8.     background-repeat: no-repeat  
  9. }  
  10.    
  11. ul {  
  12.     list-style: none  
  13. }  
  14.    
  15. .cb-slideshow li:nth-child(1) span {  
  16.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)  
  17. }  
  18.    
  19. .cb-slideshow li:nth-child(2) span {  
  20.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)  
  21. }  
  22.    
  23. .cb-slideshow li:nth-child(3) span {  
  24.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)  
  25. }  
  26.    
  27. .cb-slideshow li:nth-child(4) span {  
  28.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)  
  29. }  
  30.    
  31. .cb-slideshow li:nth-child(5) span {  
  32.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)  
  33. }  
  34.    
  35. .cb-slideshow li:nth-child(6) span {  
  36.     background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)  
  37. }  
  38.    
  39. .cb-slideshow,.cb-slideshow:after {  
  40.     position: fixed;  
  41.     width: 100%;  
  42.     height: 100%;  
  43.     top: 0;  
  44.     left: 0;  
  45.     z-index: -2  
  46. }  
  47.    
  48. .cb-slideshow:after {  
  49.     content: ”  
  50. }  
  51.    
  52. .cb-slideshow li span {  
  53.     width: 100%;  
  54.     height: 100%;  
  55.     position: absolute;  
  56.     top: 0;  
  57.     left: 0;  
  58.     color: transparent;  
  59.     background–size: cover;  
  60.     background-position: 50% 50%;  
  61.     background-repeat: none;  
  62.     opacity: 0;  
  63.     z-index: -2;  
  64.     -webkit-backface-visibility: hidden;  
  65.     -webkit-animation: imageAnimation 36s linear infinite 0s;  
  66.     -moz-animation: imageAnimation 36s linear infinite 0s;  
  67.     -o-animation: imageAnimation 36s linear infinite 0s;  
  68.     -ms-animation: imageAnimation 36s linear infinite 0s;  
  69.     animation: imageAnimation 36s linear infinite 0s  
  70. }  
  71.    
  72. .cb-slideshow li:nth-child(2) span {  
  73.     -webkit-animation-delay: 6s;  
  74.     -moz-animation-delay: 6s;  
  75.     -o-animation-delay: 6s;  
  76.     -ms-animation-delay: 6s;  
  77.     animation-delay: 6s  
  78. }  
  79.    
  80. .cb-slideshow li:nth-child(3) span {  
  81.     -webkit-animation-delay: 12s;  
  82.     -moz-animation-delay: 12s;  
  83.     -o-animation-delay: 12s;  
  84.     -ms-animation-delay: 12s;  
  85.     animation-delay: 12s  
  86. }  
  87.    
  88. .cb-slideshow li:nth-child(4) span {  
  89.     -webkit-animation-delay: 18s;  
  90.     -moz-animation-delay: 18s;  
  91.     -o-animation-delay: 18s;  
  92.     -ms-animation-delay: 18s;  
  93.     animation-delay: 18s  
  94. }  
  95.    
  96. .cb-slideshow li:nth-child(5) span {  
  97.     -webkit-animation-delay: 24s;  
  98.     -moz-animation-delay: 24s;  
  99.     -o-animation-delay: 24s;  
  100.     -ms-animation-delay: 24s;  
  101.     animation-delay: 24s  
  102. }  
  103.    
  104. .cb-slideshow li:nth-child(6) span {  
  105.     -webkit-animation-delay: 30s;  
  106.     -moz-animation-delay: 30s;  
  107.     -o-animation-delay: 30s;  
  108.     -ms-animation-delay: 30s;  
  109.     animation-delay: 30s  
  110. }  
  111.    
  112. @-webkit-keyframes imageAnimation {  
  113.     0% {  
  114.         opacity: 0;  
  115.         -webkit-animation-timing-function: ease-in  
  116.     }  
  117.    
  118.     8% {  
  119.         opacity: 1;  
  120.         -webkit-transform: scale(1.05);  
  121.         -webkit-animation-timing-function: ease-out  
  122.     }  
  123.    
  124.     17% {  
  125.         opacity: 1;  
  126.         -webkit-transform: scale(1.1) rotate(0)  
  127.     }  
  128.    
  129.     25% {  
  130.         opacity: 0;  
  131.         -webkit-transform: scale(1.1) rotate(0)  
  132.     }  
  133.    
  134.     100% {  
  135.         opacity: 0  
  136.     }  
  137. }  

当然还是需要配合HTML代码的
HTML部分(其中的文字部分和

  • 的数量是可以随意更改的)
    1. <ul class=“cb-slideshow”>  
    2.     <li>  
    3.         <span>幻想</span></li>  
    4.     <li>  
    5.         <span>领域</span></li>  
    6.     <li>  
    7.         <span>一个</span></li>  
    8.     <li>  
    9.         <span>专业的</span></li>  
    10.     <li>  
    11.         <span>二次元</span></li>  
    12.     <li>  
    13.         <span>图床</span></li>  
    14. </ul>  
    • 幻想
    • 领域
    • 一个
    • 专业的
    • 二次元
    • 图床

    传送门：在线预览

文章链接：https://www.sbkko.com/1-62.html
文章标题：WP文章或页面实现CSS3随机背景图片的切换特效
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！

相关文章:

  1. 鼠标点击显示与隐藏更多内容 readmore.js
  1. 纯CSS给网站实现极简的动态字符背景
  1. 给网站页面的左右两侧添加梅花飘落特效
  1. 让WordPress媒体库支持外链图片保存的插件
  1. 两款在线目录浏览源码
  1. WordPress文章添加下载详情独立页面

给TA打赏
共{{data.count}}人
人已打赏
html5wordpresswordpress教程网站日记
在线工具文章

CSS代码渐变颜色生成工具神器-Grabient

2018-5-18 17:24:19

在线工具文章

在线制作中文LOGO竟如此简单

2018-5-25 15:14:15

猜你喜欢
2 条回复 A文章作者 M管理员

  1. 博主文章写的不错，小白想问下，这两段代码应该分别放到哪个文件里呢

    • 上面可以放在已经引用的CSS的样式里（也可自己创建，自己百度吧），下面是放在需要使用的页面里。

❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 微信公众号

  • 微信小程序

  • QQ资源群

返回顶部