CSS3 Random Background Image Switching Effect

css3 random background image fade switching effects demo effect as shown in the background of this article See you pick my fantasy field of secondary limited edition pick more tired, pick a half an hour, take the time to organize and send it out! design was originally intended to use jQuery to achieve, but noticed the css3 @keyframes rule, css3 has been so powerful that once only js can achieve the effect!

Definitions and Usage

The @keyframes rule enables you to create animations.

Animation is created by gradually changing one set of CSS styles to another.

You have the ability to change the CSS styles several times during the animation.

Specify when the change occurs in terms of a percentage, or by the keywords “from” and “to”, which are equivalent to 0% and 100%.

0% is the start time of the animation, 100% the end time of the animation.

For best browser support, you should always define 0% and 100% selectors.

Note: Please use the animation property to control the appearance of the animation while binding the animation to the selector.

Core css section (remember to toggle image address)

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(https://random.52ecy.cn/randbg.php?v=1520341099) }

.cb-slideshow li:nth-child(2) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159) }

.cb-slideshow li:nth-child(3) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149) }

.cb-slideshow li:nth-child(4) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139) }

.cb-slideshow li:nth-child(5) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129) }

.cb-slideshow li:nth-child(6) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119) }

.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
}

}

Of course it still needs to be accompanied by HTML code The HTML part (in which the text part and the number of

’s can be changed at will)

Fantasy
Field
A
A specialty
Secondary
Graph bed

Note: The number of

s should correspond to the css and should be at least two or more. Also ie browser does not support CSS3 effects!

Gouli
the country.
if not, why not?
How can I?
What’s the worst that can happen?
I can’t avoid it.

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{z-index:99;list-style:none}li{list-style: none;}.cb-slideshow li:nth-child(1) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341099)}.cb-slideshow li:nth-child(2) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341159)}.cb-slideshow li:nth-child(3) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341149)}.cb-slideshow li:nth-child(4) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341139)}.cb-slideshow li:nth-child(5) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341129)}.cb-slideshow li:nth-child(6) span{background-image:url(https://random.52ecy.cn/randbg.php?v=1520341119)}.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}}

Definitions and Usage#

Definitions and Usage