CSS背景切换动画

最新推荐文章于 2024-08-31 09:27:14 发布
最新推荐文章于 2024-08-31 09:27:14 发布
阅读量1k 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beijing20110905/article/details/110640181
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3全屏背景图片缩小渐变自动切换代码</title>
<!-- <link rel="stylesheet prefetch" href="http://fonts.useso.com/css?family=Raleway:300"> -->
<style type="text/css">
*{margin:0;padding:0;}

.slideshow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
          animation-name: kenburns;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
          animation-name: kenburns-1;
  z-index: 3;
}
.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
          animation-name: kenburns-2;
  z-index: 2;
}
.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
          animation-name: kenburns-3;
  z-index: 1;
}
.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
          animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  z-index: 99;
  text-align: center;
  font-family: Raleway, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
  padding: 1em 2em;
  line-height: 1.5;
}
h1 small {
  display: block;
  text-transform: lowercase;
  font-size: .7em;
}
h1 small:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: .5em;
}
h1 small:last-child {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding-top: .5em;
}
</style>
</head>
<body>

<!-- 文字区不需要请连css部分代码一并删除 -->
<h1><small>全屏</small>自动切换背景<small>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</small></h1>

<!-- 你可以添加个多“.slideshow-image”项目, 记得修改CSS -->
<div class="slideshow">
    <div class="slideshow-image" style="background-image: url('img/1.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('img/2.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('img/3.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('img/4.jpg')"></div>
</div>

</body>
</html>

微风吹过的夏天2016
关注
专栏目录
html背景图片动效,css3实现点击切换背景图片，并且背景图片实现动画效果
weixin_42627812的博客
06-21 1285
个人认为这是一个很不错的css3案例哦！又是用DW写的啦没办法放效果图哦，就简单放个静态图好了，唉，我也觉得好无奈哦效果图如下：代码如下：xmlns="http://www.w3.org/1999/xhtml">http-equiv="Content-Type"content="text/html; charset=utf-8" />无标题文档body{ margin:0; heigh...
css3全屏背景图片切换特效
weixin_34391854的博客
04-18 615
效果体验：http://hovertree.com/texiao/css3/10/ 一般做图片切换效果，都会使用JS或者jQuery脚本，今天发现，其实只用CSS也可以实现。试试效果吧。 效果图：代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" conte...
CSS特效——背景色彩不停流动效果
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-31 2906
通过CSS，我们可以实现各种各样的动态效果，其中背景色彩流动效果就是一种能够增强页面活力的方式。本文将详细介绍如何使用CSS来创建一个流畅变换背景色的效果，包括实现的基本原理、具体步骤、示例代码及一些实用的技巧。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。CSS允许我们定义元素的背景颜色渐变，渐变可以是线性的也可以是径向的。首先，我们创建一个最基本的背景色流动效果，通过不断改变背景颜色来达到视觉上的流动感。专栏系列（点击解锁）
CSS技巧：背景图转换动画
m0_47883103的博客
09-18 1609
主要借助了 mask-image，一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0, 40%, transparent 60%);，透明的部分则会凸显出另外一张图。 再利用动画，让 mask-image: linear-gradient 的角度旋转起来。 <div class="a"></div> <div class="b"></div> scss $img2: '图片地址'; $img1.
CSS 3 动画 实现图片动态切换
weixin_52418790的博客
11-06 6099
用到的方法： 动画 Animation + @keyframes 注意：animation属性要与keyframes规则进行绑定 CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时，需要把它绑定到一个选择器（例如div），否则动画不会有任何效果。 动画属性 属性 描述 @keyframes 规定动画 animation 所有动画的简写属性 animation-name 规定@keyframes 动
CSS加关键帧动画切换背景图片闪烁问题修复
qq_42356513的博客
03-07 3002
问题描述 给一个div加个关键帧动画,动态改变背景图片,会出现首次进入页面这个div背景图片出现抖动问题 css示例 // 这样会出现抖动 .demo { width: 100px; height: 100px; animation: demo 2s linear infinite; } @keyframes demo { 0% { background: url('1.png') no-repeat; backgrou
纯CSS3模拟iPhone X背景切换动画
11-24
【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中，动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题，它旨在利用CSS3的强大功能，无需JavaScript干预，就能实现类似...
css背景颜色透明背景图片切换效果
12-07
总的来说，实现“css背景颜色透明背景图片切换效果”需要熟练掌握CSS的背景颜色、透明度、过渡和关键帧动画等属性，以及JavaScript事件监听和图片切换逻辑。这个效果不仅增强了网页的视觉吸引力，也提升了用户的交互...
CSS3动态数字翻转切换动画特效特效代码
03-20
【CSS3动态数字翻转切换动画特效特效代码】 在网页设计和开发中，CSS3（层叠样式表第三版）的引入为创建丰富的交互式用户体验提供了强大的工具。本主题聚焦于一个具体的CSS3特效——动态数字翻转切换，这是一种常...
CSS3动画渐变背景切换特效.rar
10-01
【标题】"CSS3动画渐变背景切换特效.rar"是一个包含使用CSS3技术实现的动态背景切换效果的资源包。这个特效代码具有高度实用性，能够无缝融入到网页设计中，并且用户可以根据自己的需求进行二次修改，以适应不同的...
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
09-24
【HTML5+CSS3 实现灵动的动画TAB切换效果】是一种常见的前端交互设计，这篇文章提供了一个DEMO，展示了如何利用这两种技术创建具有动画效果的标签页切换。在HTML5中，我们通常使用`<div>`、`<ul>`和`<li>`等元素构建...
CSS3全屏背景图片缩小渐变自动切换代码
06-11
这是一款css3实现的全屏背景图片渐变式切换代码特效，图片缩小渐变动画切换效果，不依赖任何JS代码。
css3动画 --- 网站背景图片渐变且切换
weixin_30483013的博客
09-20 1341
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3全屏背景图片缩小渐变自动切换代码</title> <!-- <link rel="stylesheet prefetch" href="http://fonts.useso....
css实现定时切换背景颜色或者图片
weixin_65451509的博客
09-20 1194
解释一下上面代码中的内容：class为background-img的图片元素，初始显示的是图片地址1。animation属性设定了图片在5秒内循环播放，infinite意味着无限循环。这个动画名字为changeBg。@keyframes是指定动画的关键帧，表示动画从0%开始时，显示的是图片地址1，中间50%时，显示的是图片地址2，最后100%时，显示的是图片地址3。这样，我们就实现了使用CSS实现图片轮播的功能。如果要增加图片，可以按照上面的格式在@keyframes中添加更多关键帧，增加图片元素即可。
css3边框、背景、过渡以及动画
weixin_71437031的博客
07-21 697
css3时钟小动画
css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
ZDM_9999的博客
01-03 717
【代码】css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
JQUERY 轮播图片 淡入淡出效果
qq_60485359的博客
07-19 220
【代码】JQUERY 轮播图片 淡入淡出效果。
原生JavaScript实现图片切换
weixin_44771433的博客
02-29 1210
原生JavaScript实现图片切换效果 效果： html布局`` <div class="slideshow"> <!-- 图片区域 --> <div class="contentImg"> <input type="image" src="img/prev.png" class="pre...
轮播图效果的实现
m0_67647150的博客
08-10 560
轮播图效果的实现，实现自动轮播，左右按钮切换，点选图片
CSS3动画实现渐变背景切换特效
资源摘要信息:"CSS3动画渐变背景切换特效" CSS3动画与渐变背景切换特效是现代网页设计中非常受欢迎的视觉元素，它们能够为网页增添动态感和美观性。通过使用CSS3的动画和渐变技术，设计师可以创造出流畅的视觉效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值