css3动画切换背景图片

最新推荐文章于 2024-04-17 01:37:33 发布
最新推荐文章于 2024-04-17 01:37:33 发布
阅读量1.3k 收藏 6
点赞数
分类专栏： ccs3 动画切换背景图 文章标签： css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43059898/article/details/113407968
版权 
复制代码
<!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('1.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('2.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('3.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('4.jpg')"></div>
</div>

</body>
</html>
今晚来我家吗
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
css背景颜色透明背景图片切换效果
12-07
总的来说，实现“css背景颜色透明背景图片切换效果”需要熟练掌握CSS的背景颜色、透明度、过渡和关键帧动画等属性，以及JavaScript事件监听和图片切换逻辑。这个效果不仅增强了网页的视觉吸引力，也提升了用户的交互...
css3炫酷环形背景动画
ICode联盟
04-24 360
下载地址 很酷的网页背景动画效果，css3环形飞入的特效。 dd:
CSS3常用动画效果合集（最全），2024年最新阿里P8面试官都说太详细了
最新发布
m0_63174811的博客
04-17 481
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
用CSS3实现惊艳面试官的背景及背景动画（建议收藏）
github_38314237的博客
09-24 4789
我们传统的前端更多的是用 JavaScript 实现各种复杂动画，自从有了CSS3 transition 和 animation 以来,前端开发在动画这一块有了更高的自由...
CSS3动画，变形及背景
weixin_46221319的博客
03-07 580
动画 animation-name: 要对当前元素生效的关键帧的名字 animation-name: test; animation-duration: 动画的执行时间 animation-duration: 4s; animation-delay:动画的延时 animation-delay: 2s; nimation-iteration-count 动画执行的次数 可选值： 次数 infinite 无限执行 animation-iteration-count: 1; anima
前端实现滑动页面动态切换背景图片的炫酷效果
weianl的博客
11-22 8099
我发现现在很多网站都用了如下GIF的模块与背景图片切换的效果，这让在下心痒痒的，所以自己动手写了一遍发现蛮简单的，分享给大家！ 首先我的思路是介个样子的：先让一个空的宽度高度都占满的div孩子悬浮最底层，里面设置宽度高度都占满背景图片，这样底部的图片就搞定了；然后再设置竖直排列宽度高度都占满的div模块，模块的排布为：实体模块=》透明模块=》实体模块=》透明模块=》实体模块，这样的话向下滑动滚动...
css3马赛克样式图片切换
06-12
**背景图片与伪元素**：另一种方法是使用`::before`或`::after`伪元素，并设置`background-image`属性，通过CSS3的`background-size`控制每个马赛克单元的图片大小，`background-position`调整图片的位置，以及`...
纯CSS3模拟iPhone X背景切换动画
11-24
【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中，动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题，它旨在利用CSS3的强大功能，无需JavaScript干预，就能实现类似...
CSS3环形菜单切换动画特效
06-05
总结来说，实现“CSS3环形菜单切换动画特效”涉及到对CSS3特性的熟练运用，包括变换、过渡、伪类选择器、定位、响应式设计以及图片处理。这种设计不仅展示了CSS3的强大功能，也为用户带来了新颖、有趣的交互体验。在...
CSS3画板画架图片切换特效
07-24
【CSS3画板画架图片切换特效】是一种利用现代网页技术，特别是CSS3特性实现的交互式图片展示效果。在这款特效中，多张图片被模拟呈现在一个虚拟的“画板”上，用户可以像翻阅画架上的画作一样进行切换，带来独特的...
CSS3实现的全屏背景图片缩小渐变切换效果特效代码
03-20
这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码，页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然，采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码。
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
weixin_42282699的博客
06-07 2142
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题：在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色和自动全屏适应背景渐变色本文只介绍线性渐变背景渐变相信大家也都不陌生先看下图小编配的这个色也还可以哈 代码如下body{background-image:-webkit-linear-gradient(60d...
css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
weixin_32999557的博客
08-03 400
原标题：小码哥-利用CSS3渐变实现唯美背景图CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变(gradients)，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。接下来奉上几张图片来一睹CSS3 渐变的魔法吧~ 以...
css3 背景图动画一
05-03 153
一 实现背景图循环播放 @keyframes mlfly { 0%{ background-position:0 0; } 100%{ background-position:210px 0; ...
div背景图片_Vue 各种坑总结（swiper、背景图片）
weixin_39732249的博客
11-21 246
swiper 的使用 全局引入 CDN 模式，在 index.html 直接使用。 <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.min.js"> </scri...
纯css实现图片自动切换
hong
09-01 8045
纯css实现图片自动切换 **对于我这样的小菜鸟来说真的不喜欢写js 以前写图片切换都是用js 刚好cs3的出现解决了这个 头疼的问题 主要用到的是css3的过渡 实现图片自动切换并添加轮播焦点 先看图吧 因为这里小洪做的是手机端网页的效果 大家在复制代码的时候记得加上meta标签 使用手机端的尺寸来看 我已经放在html代码上了 下面css的代码格式大家将就看看吧 主要是为了节省空间 大家一定要按照规范来写 亲测有效 一定要用第二张图上的模式来测试 ** 1. 效果图 注意看轮播图和轮播焦点 因为不会
CSS加关键帧动画切换背景图片闪烁问题修复
qq_42356513的博客
03-07 2877
问题描述 给一个div加个关键帧动画,动态改变背景图片,会出现首次进入页面这个div背景图片出现抖动问题 css示例 // 这样会出现抖动 .demo { width: 100px; height: 100px; animation: demo 2s linear infinite; } @keyframes demo { 0% { background: url('1.png') no-repeat; backgrou
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m
纯 css 3 动画实例tab 背景切换的动态效果
09-17
Tab背景切换的动态效果是一种常见的纯CSS3动画实例，可以通过使用CSS3的属性和过渡效果来实现。 首先，HTML结构中需要有切换的Tab标签和对应的内容区域。可以使用无序列表（`<ul>`）来创建Tab标签，每个标签使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值