• 如果您觉得本站还有点用,那么赶紧使用Ctrl+D 收藏吧
  • 热烈庆祝图库功能上线,具体请看站长公告
  • api接口慢慢研发中,具体请看发布页:接口发布页

用css给博客加动态切换背景

源码分享 窝主 4个月前 (05-16) 144次浏览 已收录 0个评论 二维码
文章目录[隐藏]

成品效果:

就是本站PC端的效果!

html代码:

<ul class="cb-slideshow">
	<li>
		<span>a</span></li>
	<li>
		<span>b</span></li>
	<li>
		<span>c</span></li>
	<li>
		<span>d</span></li>
	<li>
		<span>e</span></li>
	<li>
		<span>f</span></li>
</ul>

css代码:

body {
	background: rgba(0,0,0,0);
	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://img.acgxo.cn/random.php)
}
 
.cb-slideshow li:nth-child(2) span {
	background-image: url(https://img.acgxo.cn/random.php?v=1)
}
 
.cb-slideshow li:nth-child(3) span {
	background-image: url(https://img.acgxo.cn/random.php?v=2)
}
 
.cb-slideshow li:nth-child(4) span {
	background-image: url(https://img.acgxo.cn/random.php?v=3)
}
 
.cb-slideshow li:nth-child(5) span {
	background-image: url(https://img.acgxo.cn/random.php?v=4)
}
 
.cb-slideshow li:nth-child(6) span {
	background-image: url(https://img.acgxo.cn/random.php?v=5)
}
 
.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
	}
}

食用方法:

1.)因为本站是基于wordpress搭建的,所以就以此作为一个例子,我们需要的就是把html镶嵌到网站的某一个区域,这个可以根据自己主题自己选择,我选择放在footer,
用css给博客加动态切换背景


用css给博客加动态切换背景
2.)把CSS代码镶嵌到你站点所引用的css文件或者打开你的blog后台->外观->自定义->额外css,然后就把css内容粘贴进去,保存发布,CTRL+F5刷新缓存即可看到效果,如果你站点挂载cdn,那你先去得cdn提供商刷处新一下缓存才能看到效果。
用css给博客加动态切换背景
图上指右上箭头是本站搭建的随机api接口,你也可以更换为其他的,只要返回的图片能正常访问就行,图上指左下箭头是为了给浏览器一个标识防止缓存同一张图片。

本教程说的就是一个道理,就是插入html结构然后利用css去表现它,所以其他博客系统也可以自己尝试的。


二次元圈子, 版权所有
转载请注明原文链接:用css给博客加动态切换背景
喜欢 (0)
[扫一扫投喂本站]
分享本页面
窝主
关于作者:
作者简介:咕咕咕

您必须 登录 才能发表评论!

正在获取,请稍候...
00:00/00:00

播放器
换装