css能实现自动更换图片吗

css能实现自动更换图片吗

css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图片的效果。

具体实现代码如下:(相关课程推荐:css视频教程

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .iamge2,
        .iamge3,
        .iamge4 {
            opacity: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
        }
        
        @keyframes cf4FadeInOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
        #cf4a {
            position: relative;
            height: 280px;
            width: 450px;
            margin: 0 auto;
            overflow-x: hidden;
            border: 1px solid #ccc;
            background: #ccc
        }
        
        .iamge1 {
            animation-name: cf4FadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-direction: alternate;
        }
        
        .iamge2 {
            animation-name: cf4FadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 2.5s;
            animation-direction: alternate;
        }
        
        .iamge3 {
            animation-name: cf4FadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 4.5s;
            animation-direction: alternate;
        }
        
        .iamge4 {
            animation-name: cf4FadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            animation-direction: alternate;
        }
    </style>
    <title>animate demo</title>
</head>

<body id="center">
    <div id="cf4a">
        <img class="iamge1" src="html1.jpg" />
        <img class="iamge2" src="css-4.jpg" />
        <img class="iamge3" src="css3.jpg" />
        <img class="iamge4" src="js2.jpg" />
    </div>
</body>

</html>

效果:

4.gif

Image placeholder
前端答疑
未设置
  94人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css能判断手机是安卓还是ios吗?

css能判断手机是安卓还是ios吗?css不能判断手机是安卓还是ios,css只能通过媒体查询判断屏幕宽度。判断是安卓还是ios需要使用javascript。下面我们来看看使用javascript判断

CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想:知乎

JS 直接打印功能实现代码

Jsweb打印方法汇总 1.插件打印,网上可以搜有付费和免费的打印插件可以用,一般来说免费的一般只支持ie浏览器,有的免费插件还有水印。需要安装插件到打印机所用电脑上。2.js直接打印,只支持IE浏览

当年“你说什么,我都能实现”的软件公司,后来都是怎么死的?

在 #“我,80后,曾经靠副业的收入买车买房”# 的评论区里,有读者问,十几年前,圈内有不少软件公司,规模大小不一,遍布各个行业,但这几年似乎都没动静了,他们还活着吗?我说,撇开纯做“劳工”输出的外包

把 14 亿中国人都拉到一个微信群,程序员在技术上能实现吗?

根据国家统计局的数据,截至2017年末,中国大陆总人口为13亿9008万人(包括31个省、自治区、直辖市和中国人民解放军现役军人,不包括香港、澳门和台湾以及海外华侨人数),早已超过13亿。目前,微信群

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css使用url引用图片报错

css使用url引用图片报错css使用url引用图片报错,是因为图片路径填写错误,路径需要相对于css文件,而不是引用css文件的html文件。例如:css文件夹下的index.css样式表中back

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

css要不要给div里的图片设置宽高

css要不要给div里的图片设置宽高css需要给div里的图片设置宽高,因为图片尺寸过大时在小屏幕上会显示不下,出现横向滚动条,横向滚动条在移动端的显示并不是很友好,因此需要避免横向滚动条在移动端的出

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

如何保存css里的图片

如何保存css里的图片1、打开网页,按下f12打开开发者工具;2、使用dom选取工具(ctrl+shift+c)选择网页中需要下载的图片;3、之后在右侧css规则面板中,右键图片的url;(推荐学习:

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

dw里怎样设置图片的css样式

dw里怎样设置图片的css样式1、首先在文件内插入一张图片,点击插入\图像,选择一张图片即可。2、选中图像,点击css样式窗口的+号,新建一个CSS(相关课程推荐:css视频教程)样式,打开对话框。选

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

css图片属性如何设置?

css图片属性如何设置?首先新建一个style标签;然后在style标签内使用语法img{属性:值}即可,比如设置图片边框属性img{border:1pxsolidred}。语法:img{ 属性:值;

css中怎么设置图片大小?

css中怎么设置图片大小?语法:img{ width:150px; height:60px; }注:这里设置CSS宽度为150px,css高度为60px,CSS样式中width和height的值都单位

如何在css中让图片横向展开排列?

如何在css中让图片横向展开排列?1、首先添加一个div来存放所有的图片。2、然后隐藏div在纵向的滚动条,横向的滚动条设置为自动。3、最后设置divwhite-space:nowrap不换行即可。这