CSS 3 动画实现图片动态切换

用到的方法：

动画 Animation + @keyframes
注意：animation属性要与keyframes规则进行绑定

CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时，需要把它绑定到一个选择器（例如div），否则动画不会有任何效果。

动画属性

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性
animation-name	规定@keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的时间，默认0
animation-timing-function	规定动画速度曲线，默认是“ease”
animation-fill-mode	规定当动画不播放时（当动画完成时或当动画有一个延迟为开始播放时）要用到的元素样式
animation-dispaly	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”
animation-play-state	规定动画是否正在运行或暂停，默认是“running”

animation-timing-function规定速度曲线的参数

值	描述
linear	动画从头到尾速度相同
ease	默认。低速开始——加快——结束变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束

实例

效果图
变换前

变换中

变换后

doem

<div class="background"></div><style>
.background{width: 100%;height: 100vh;animation: move 10s linear  infinite; /*自定义动画名称*//*!move：动画名称，10s：执行时间 ease：执行的函数，infinite：代表执行次数，这里指无限次*!*/
}
@keyframes move {/**注意这几个图片大小一定要一样，否则会出现抖动现象*/
/*这里的0%50%100%是相对于执行时间的，最后一个图片先播放*/0%{background: url('/static/image/img2.png') no-repeat;background-size:100% 100%;}50%{background: url('/static/image/img1.jpg') no-repeat;background-size:100% 100%; }100%{background: url('/static/image/img3.jpg') no-repeat;background-size:100% 100%; }
}
</style>

CSS 3 动画实现图片动态切换相关推荐

Js+CSS淡入式效果图片幻灯切换效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
jq实现背景图片动态切换
在很多需求中都用到了利用jquery实现背景图片的动画效果,接下来我们将实现点击ul中的li实现背景图片的动态切换. 思路和实现步骤: 1.先建立静态页面.其中box盒子用来动态生成ul,li,a和i ...
radio切换控制div显示_JavaScript连载31图片动态切换以及关闭图片案例
一.图标切换 31.1 点击那两个按钮可以做到轮番显示图片二.关闭图片案例 31.2 点击右上角的叉,图片会消失. 三.源码: D31_iconSwitch.html D31_2_CloseImag ...
css波浪动画使用图片
参考:https://www.cnblogs.com/linjiangxian/p/11464753.html 素材如下: 如果让美工设计,需要注意图片波浪的左右高度需要一致,不然对接处对不上,高低不 ...
react实现线上主题动态切换功能
demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描 ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换
开发工具与关键技术: HTML CSS3 JQUERY JS 作者:冉启东撰写时间:2019年1月18日 1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下: ...
dw如何制作图片自动切换效果_dw怎么用css做图片轮播
Adobe Dreamweaver,简称"DW",中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购.DW是集网 ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...

CSS 3 动画实现图片动态切换

用到的方法：

动画属性

实例

CSS 3 动画实现图片动态切换相关推荐

最新文章

热门文章

CSS 3 动画 实现图片动态切换

用到的方法：

动画属性

实例

CSS 3 动画 实现图片动态切换相关推荐

最新文章

热门文章

CSS 3 动画实现图片动态切换

CSS 3 动画实现图片动态切换相关推荐