首页 > 其他分享 >CSS3随机背景图片切换特效

CSS3随机背景图片切换特效

时间:2024-05-20 15:58:20浏览次数:22  
标签:CSS3 特效 cb slideshow delay animation background webkit 背景图片

Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`

CSS3随机背景图片切换特效

日期:2018-5-16 阿珏 css 浏览:4572次 评论:16条

css3的随机背景图片淡入淡出切换特效  演示效果如本篇文章背景所示
看大家扒我的 幻想领域二次元限定版扒 的比较累,扒了大半个小时的,抽空整理一下发出来
设计之初本来是打算使用jQuery进行实现的,但是注意到了css3的@keyframes 规则,css3已经强大到曾经只有js才能实现的效果

定义和用法

通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

注释: 请使用动画属性来控制动画的外观,同时将动画与选择器绑定。


核心css部分(记得切换图片地址)
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
}

}






当然还是需要配合HTML代码的






HTML部分(其中的文字部分和<li>的数量是可以随意更改的)



<ul class="cb-slideshow">
	<li>
		<span>幻想</span></li>
	<li>
		<span>领域</span></li>
	<li>
		<span>一个</span></li>
	<li>
		<span>专业的</span></li>
	<li>
		<span>二次元</span></li>
	<li>
		<span>图床</span></li>
</ul>
注意:<li>的数量要和css对应上,并且至少要两个以上。另外ie浏览器是不支持CSS3的特效
  • 苟利
  • 国家
  • 生死以
  • 岂能
  • 祸福
  • 趋避之
本博客所有文章 如无特别注明 均为原创。 作者: 阿珏 , 复制或转载请 以超链接形式 注明转自 阿珏博客
原文地址《 CSS3随机背景图片切换特效

网友评论:

凡人多烦事 1年前 (2020-02-16)
这个怎么搞得了嘞?我研究了半天,还是全黑屏[#aru_15][#aru_15]

阿珏 1年前 (2020-02-16)
@凡人多烦事:可以在群里at下我发个网址瞅瞅

凡人多烦事 1年前 (2020-02-17)
@阿珏:群里面那个是你呀?[#aru_15]叫我主人还是本群群主[#aru_16]

365cent 3年前 (2018-10-12)
翻牌子

我觉得不行 3年前 (2018-08-30)
果然不能纯抄代码,第一行的background: #000;用了之后背景全黑没有特效,排查了后发现改成background-color:rgba(0,0,0,0);成功了,还有代码里缺分号作为一个强迫症的我有点不能接受。不过还是得感谢博主分享的特效代码!

阿珏 3年前 (2018-08-31)
@我觉得不行:有些样式是要根据你实际情况更改的[#aru_36]。css在线格式化后,默认最后一行样式都是不加分号的[#aru_11]

墨渊 3年前 (2018-06-20)
这图片无敌了

墨渊 3年前 (2018-06-20)
审核元素,怎么屏蔽的,这个有点6,直接死机

阿珏 3年前 (2018-06-21)
@墨渊:低调[#aru_130]

腾讯视频 3年前 (2018-06-14)
不能复制?那编写这篇文章干嘛?

阿珏 3年前 (2018-06-14)
@腾讯视频:给你复制扒我文章?

腾讯视频 3年前 (2018-06-14)
@阿珏:真要扒文章是个人都能做到吧,只是对于博客禁右感到莫名所以

梦如 3年前 (2018-05-17)
已解决,强制刷新CSS   ver=

梦奴 3年前 (2018-05-16)
换的是随机图API的链接  在360极速浏览器里不会刷新随机图

阿珏 3年前 (2018-05-17)
@梦奴:被浏览器缓存了,加个时间戳就可以了

梦如 3年前 (2018-05-16)
可以,赞一个

标签:CSS3,特效,cb,slideshow,delay,animation,background,webkit,背景图片
From: https://www.cnblogs.com/Ajue/p/18202138

相关文章

  • 用CSS3绘制iPhone手机
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`用CSS3绘制iPhone手机日期:2017-7-3阿珏css浏览:1825次评论:1条先上效果图,先睹为快。(这绝对不是一张图片。恩~这话怎么怪怪的~)......
  • 简单的css3头像旋转与3D旋转效果
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`简单的css3头像旋转与3D旋转效果日期:2017-7-10阿珏css浏览:3896次评论:2条经常会在一些网站看到评论区,评论人的头像当鼠标经过会360°旋......
  • 挑战前端基础120题--css3基础篇
    1. CSS选择器种类、权重、优先级计算、匹配顺序、继承?!important>行内样式>id>类选择器,伪类(:hover),属性选择器>标签,伪元素选择器(::before::after:root)>通配符,继承,关系选择器(兄弟选择器(子选择器(>),相邻选择器(+)>浏览器默认能够被继承的属性:font-size/f......
  • 网页布局------导航栏悬浮特效
    实现效果:当鼠标指针悬浮在导航栏上会出现内阴影效果页面结构<ul><li>首页</li><li>知识星球</li><li>趣味问答</li><li>奖品</li></ul>页面样式*{margin:0;padding:0;......
  • 博客园-鼠标-粒子追踪-点击烟花爆炸特效
    1.打开设置中的js功能2.代码保存为xx.js"usestrict";var_createClass=function(){functionn(t,e){for(vari=0;i<e.length;i++){varn=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"inn&&(n.writable=!0),Object.defineProperty(t,n......
  • 一款非常强大的从电影中提取人声、提取音乐、提取特效声的AI工具
    NovaVSS是以VSS领域最顶级的人工智能算法为基础,搭载了经大量电影电视数据训练、调优后的AI模型的新一代音视频音轨分离工具。是行业内专门分离电影、电视音轨的新一代最强音视频音轨分离工具,是非常好用的从电影中提取人声、提取背景音乐、提取特效声工具NovaVSS用途从电影电......
  • HarmonyOS NEXT应用开发—听歌识曲水波纹特效案例
    介绍在很多应用中,会出现点击按钮出现水波纹的特效。效果图预览使用说明进入页面,点击按钮,触发水波纹动画。再次点击按钮,停止水波纹动画。实现思路本例涉及的关键特性和实现方案如下:要实现存在两个连续的涟漪,需要两个层叠的Stack分别以一定延迟进行相同的动画。源码参考......
  • 持续性学习-Day15(前端基础CSS3)
    参考教学视频:秦疆1.什么是CSSCascadingStyleSheet层叠样式表CSS3圆角、阴影、动画...浏览器兼容性CSS优势:内容和表现分离网页结构表现统一,可以实现复用样式十分的丰富建议使用独立html的css文件利用SEO,容易被搜索引擎收录2.入门<linkrel="styleshee......
  • css3多行文本多行文本缩略点击更多展开显示全部
    比如我要实现如下效果:数据集名称展示一行,超出自动省略,末尾增加编辑icon。点击编辑的icon,换成input输入框数据集描述最多展示三行,超出自动省略。末尾增加编辑icon。点击编辑的icon,换成textarea输入框展示一行省略+icon实现单行省略实现,无非是这样<div class="flex-row al......
  • HTML&CSS基础(HTML5和CSS3新增内容)
    HTML5一、新增的语义化标签标签名语义单/双标签header整个页面,或者分区域的头部双footer整个页面,或者部分区域的底部双nav导航双article文章、帖子、杂志、新闻、博客、评论双section页面中的某段文字,或者文章中某段文字双aside侧边栏双......