网站背景图片自动切换特效css代码

一点优化 2019年8月14日16:52:18
评论
2.4K看1 2536字
广告也精彩

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>背景图片自动切换特效-sbkko.com</title>

<style>

body {

background: #000;

background-attachment: fixed;

word-wrap: break-word;

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

background-repeat: no-repeat

}

 

ul {

list-style: none

}

 

.cb-slideshow li:nth-child(1) span {

background-image: url(/wp-content/uploads/2019/03/timg.jpg)

}

.cb-slideshow li:nth-child(2) span {

background-image: url(/wp-content/uploads/2019/06/45.jpg)

}

.cb-slideshow li:nth-child(3) span {

background-image: url()

}

.cb-slideshow li:nth-child(4) span {

background-image: url()

}

.cb-slideshow li:nth-child(5) span {

background-image: url()

}

.cb-slideshow li:nth-child(6) span {

background-image: url()

}

.cb-slideshow,.cb-slideshow:after {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: -2

}

.cb-slideshow:after {

content: ''

}

.cb-slideshow li span {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

color: transparent;

background-size: cover;

background-position: 50% 50%;

background-repeat: none;

opacity: 0;

z-index: -2;

-webkit-backface-visibility: hidden;

-webkit-animation: imageAnimation 36s linear infinite 0s;

-moz-animation: imageAnimation 36s linear infinite 0s;

-o-animation: imageAnimation 36s linear infinite 0s;

-ms-animation: imageAnimation 36s linear infinite 0s;

animation: imageAnimation 36s linear infinite 0s

}

.cb-slideshow li:nth-child(2) span {

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s

}

.cb-slideshow li:nth-child(3) span {

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s

}

.cb-slideshow li:nth-child(4) span {

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

-o-animation-delay: 18s;

-ms-animation-delay: 18s;

animation-delay: 18s

}

.cb-slideshow li:nth-child(5) span {

-webkit-animation-delay: 24s;

-moz-animation-delay: 24s;

-o-animation-delay: 24s;

-ms-animation-delay: 24s;

animation-delay: 24s

}

.cb-slideshow li:nth-child(6) span {

-webkit-animation-delay: 30s;

-moz-animation-delay: 30s;

-o-animation-delay: 30s;

-ms-animation-delay: 30s;

animation-delay: 30s

}

@-webkit-keyframes imageAnimation {

0% {

opacity: 0;

-webkit-animation-timing-function: ease-in

}

8% {

opacity: 1;

-webkit-transform: scale(1.05);

-webkit-animation-timing-function: ease-out

}

17% {

opacity: 1;

-webkit-transform: scale(1.1) rotate(0)

}

25% {

opacity: 0;

-webkit-transform: scale(1.1) rotate(0)

}

100% {

opacity: 0

}

}

</style>

</head>

<body>

<ul class="cb-slideshow">

<li>

<span>1</span></li>

<li>

<span>2</span></li>

<li>

<span>3</span></li>

<li>

<span>4</span></li>

<li>

<span>5</span></li>

<li>

<span>6</span></li>

</ul>

</body>

</html>

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: