怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自动轮播:
实现切换图片,图片循环播放;鼠标悬停某张图片, 则暂停切换。css
方法一、opacity控制透明度实现轮播效果
依照需求咱们选择用CSS3的animation动画进行实现;transition动画须要触发才能启动,html
因此咱们选择自动触发的animation属性;动画
思路就是:将三个图片进行绝对定位重叠以后,将三个图片的动画放在一条时间轴上,分别在不一样时间点控制透明度,在样式代码中的细节code
写的很好理解了,在不用DOM的状况下是一种办法。orm
html:htm
css:图片
.banner{
height: 378px;
width: 100%;
position: relative;
img{
width:100%;
height: 378px;
position: absolute;
top: 0;
}
&__pics1{
opacity: 1;
animation:pics1 5s linear 0s infinite normal both running;
}
@keyframes pics1 {
// 0%{opacity: 1;}
// 33%{opacity: 1;}
// 33.3%{opacity: 0;}
// 66.6%{opacity: 0;}
// 100%{opacity: 1;}
from{
opacity: 1;
}
32%{
opacity: 1;
}
33%{
opacity: 0;
}
to{
opacity: 0;
}
}
&__pics2{
opacity: 0;
animation:pics2 5s linear 0s infinite normal both running;
}
@keyframes pics2 {
// 0%{opacity: 0;}
// 33.3%{opacity: 1;}
// 63.6%{opacity: 1;}
// 66.6%{opacity: 0;}
// 100%{opacity: 0;}
from{
opacity: 0;
}
30%{
opacity: 0;
}
31%{
opacity: 1;
}
60%{
opacity: 1;
}
61%{
opacity: 0;
}
to{
opacity: 0;
}
}
&__pics3{
opacity: 0;
animation:pics3 5s linear 0s infinite normal both running;
}
@keyframes pics3 {
// 0%{opacity: 0;}
// 33.3%{opacity: 0;}
// 66.6%{opacity: 1;}
// 96.6%{opacity: 1;}
// 100%{opacity: 0;}
from{
opacity: 0;
}
60%{
opacity: 0;
}
61%{
opacity: 1;
}
to{
opacity: 1;
}
}
// &:hover{
// &__pics1, &__pics2, &__pics3{
// cursor: pointer;
// animation-play-state: paused;
// }
// }
}
.banner:hover img{
animation-play-state: paused;
cursor: pointer;
}
方法二、left定位控制向左实现轮播效果
.banner{
height: 378px;
width: 1900px;
margin: 0 auto;
overflow: hidden;
position: relative;
img{
width:100%;
height: 378px;
position: absolute;
top: 0;
}
&__pics1{
animation:pics1 15s linear 0s infinite normal both running;
}
@keyframes pics1 {
from{
left: 2000px;;
}
2%{
left: 0;
}
31%{
left: 0;
}
33%{
left: -2000px;
}
to{
left: -2000px;
}
}
&__pics2{
animation:pics2 15s linear 0s infinite normal both running;
}
@keyframes pics2 {
from{
left: 2000px;
}
31%{
left: 2000px;
}
33%{
left: 0;
}
64%{
left: 0;
}
66%{
left: -2000px;
}
to{
opacity: -2000px;
}
}
&__pics3{
animation:pics3 15s linear 0s infinite normal both running;
}
@keyframes pics3 {
from{
left: 2000px;
}
64%{
left: 2000px;
}
66%{
left: 0;
}
98%{
left: 0;
}
to{
left: -2000px;
}
}
}
.banner:hover img{
animation-play-state: paused;
cursor: pointer;
}
怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结相关推荐
- 怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说 直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码 展开 收起 唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻 通:唯)问女何所思,问女何 ...
- html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
- 纯CSS3实现超酷幻灯片图文切换效果
纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图.切换点通过表单radio来实现,通过radio的chec ...
- css 边缘闪光_纯css3闪烁动画《发光的边框效果》
纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...
- html桌面卡牌效果,纯CSS3超酷文章卡片UI设计效果
这是一款使用纯CSS3制作的超酷文章卡片UI设计效果.该文章卡片带有阴影效果,当鼠标滑过卡片时,文章的描述信息会以滑动动画的方式显示在卡片中. 使用方法 HTML结构 一张卡片的HTML结构如下: 文 ...
- html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
- 自动图片轮播php源码,js图片自动轮播代码分享(js图片轮播)
1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclic ...
最新文章
- [原]SQL解决“俯瞰金字塔”矩阵
- 是什么牌子_电暖气片什么牌子好
- 并发调试和JDK8新特性
- C++ POD(Plain Old Data)类型
- Kubernetes应用部署模型解析(原理篇)
- SAP UI5应用debug级别的日志打印如何设置
- netty源码解解析(4.0)-2 Chanel的接口设计
- leetcode198 打家劫舍
- FreeSql (二十一)查询返回数据
- unbuntu cmake安装mysql_Ubuntu下源码安装MySQL-5.5.25a
- android 悬浮窗 输入框_利用DecorView实现悬浮窗的效果
- 小米11系列有望提前亮相:最快年底相见
- 外媒:三星电子正与华为商讨芯片代工事宜
- 【内推】字节跳动-计算机视觉(实习 线上面试!)
- kali学习-主动信息收集
- ubuntu SecureCRT 安装破解
- 我们能从围棋中学到什么?
- 新手学习易语言必须掌握的命令
- 微信朋友圈装x代码_微信朋友圈写入代码 微信朋友圈代码大全
- 做管理,“重人情”还是“重制度”?
热门文章
- java做服务器端给客户端传数据包_java 服务器怎样给客户端传输数据
- matlab优化 带参数设置,优化选项参考
- MATLAB Simulink
- MathWorks 中国
- 【渝粤题库】广东开放大学 民事诉讼法学 形成性考核
- saiku docker配置部署_【安装教程】01 Gitea Docker 安装部署 - 【SkywenCode】技术团队基...
- 404 单页应用 报错 路由_通过 Laravel 创建一个 Vue 单页面应用(五)
- MATLAB库函数unwrap(相位解卷绕)的C语言实现
- html制作任务计划列表网页,添加计划任务的脚本
- latex学习篇【一】论文中的图片技巧QA
- 宋利兵 mysql_《MySQL 5.7 Replication新特性》分享之互动问题解答
- html选中列表整列变色,excel选中行变色完整代码和动画效果