移动端banner css3(@keyframes )实现
2024-06-20 12:10:03
2019独角兽企业重金招聘Python工程师标准>>> 
工作近2年，对于banner的做法有了一些想法和实践，从最开始的全用js控制到后来的半JS半css控制动画，从开始的只为了实现功能到后来的逐渐优化，不管是代码逻辑还是性能，每次的改善能发现自己慢慢在进步。此次写这个文章，也是感觉这部分勉强能拿出手了吧。
注：此部分代码经过简化，原本是用vue+less写的，这个是编译后的文件，10张图片以下可以使用
//文件结构 只看有用的部分即可
//html 部分
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/x-icon" href="" /><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"><link href="css/home.css" rel="stylesheet"/></head><body><div id="home_banner" class="left0"><article ><a href=""><img src="img/huli_08.jpg" /></a><a href=""><img src="img/huli_08.jpg" /></a><a href=""><img src="img/huli_08.jpg" /></a><a href=""><img src="img/huli_08.jpg" /></a></article><ul><li><span></span></li><li><span></span></li><li><span></span></li><li><span></span></li></ul></div><script src="js/banner.js"></script></body></html>
//JS部分
// 移动端屏幕适配 screen值
var _screen = 750;
var htmfontsi = document.body.clientWidth,_htmfontsize = parseFloat(htmfontsi)/_screen*100;document.getElementsByTagName("html")[0].style.fontSize=_htmfontsize+"px";//behavior 行为
//自用事件封装
function on(argu, method, fun) {argu.addEventListener(method, fun);
}
//banner部分
var $home_banner=function(){var home_banner= document.getElementById("home_banner");imgs =home_banner.getElementsByTagName("img");if(imgs.length>=2){var home_banner$ = document.getElementById("home_banner"),length = imgs.length,len =length -1,arr = [];for( var i =0;i<length;i++){arr.push("left"+i)//从左向右滑动，class成组 注意：i的数字代表当前动画的是第几个img-1} var move =function(){arr.push(arr[0]);arr.shift(arr[0]);home_banner$.setAttribute("class",arr[0])}var remove =function(){arr.unshift(arr[len]);arr.pop(arr[len]);var rearr = arr.join(".").replace(/left/g,"right").split(".");//从右向左滑动，class成组 注意：left与right转换的时候，数字没有变化，动作开始时，新旧class的i值不变home_banner$.setAttribute("class",rearr[0]);} var moveto =setInterval(function(){move();},3000)var xl,xr;function touchstart() {xl = event.changedTouches[0].clientX;clearInterval(moveto);};function touchend() {xr = event.changedTouches[0].clientX;if (xr - xl < -50) {//向左滑动remove();} else if (xr - xl > 50) {//向右滑动move();}moveto =setInterval(function(){move();},3000)};on(home_banner$,"touchstart",function(event){touchstart();})on(home_banner$,"touchend",function(event){touchend();})}
};
$home_banner();//css部分 注：这里是内容部分，下面是cssreset
#home_banner {position: relative;float: left;width: 100%;overflow: hidden;
}
#home_banner.left10 article a:nth-child(10) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left10 article a:nth-child(11) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left10 ul li:nth-child(10) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left10 ul li:nth-child(11) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right10 article a:nth-child(10) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right10 article a:nth-child(11) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right10 ul li:nth-child(10) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right10 ul li:nth-child(11) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left9 article a:nth-child(9) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left9 article a:nth-child(10) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left9 ul li:nth-child(9) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left9 ul li:nth-child(10) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right9 article a:nth-child(9) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right9 article a:nth-child(10) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right9 ul li:nth-child(9) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right9 ul li:nth-child(10) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left8 article a:nth-child(8) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left8 article a:nth-child(9) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left8 ul li:nth-child(8) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left8 ul li:nth-child(9) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right8 article a:nth-child(8) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right8 article a:nth-child(9) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right8 ul li:nth-child(8) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right8 ul li:nth-child(9) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left7 article a:nth-child(7) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left7 article a:nth-child(8) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left7 ul li:nth-child(7) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left7 ul li:nth-child(8) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right7 article a:nth-child(7) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right7 article a:nth-child(8) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right7 ul li:nth-child(7) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right7 ul li:nth-child(8) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left6 article a:nth-child(6) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left6 article a:nth-child(7) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left6 ul li:nth-child(6) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left6 ul li:nth-child(7) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right6 article a:nth-child(6) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right6 article a:nth-child(7) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right6 ul li:nth-child(6) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right6 ul li:nth-child(7) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left5 article a:nth-child(5) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left5 article a:nth-child(6) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left5 ul li:nth-child(5) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left5 ul li:nth-child(6) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right5 article a:nth-child(5) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right5 article a:nth-child(6) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right5 ul li:nth-child(5) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right5 ul li:nth-child(6) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left4 article a:nth-child(4) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left4 article a:nth-child(5) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left4 ul li:nth-child(4) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left4 ul li:nth-child(5) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right4 article a:nth-child(4) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right4 article a:nth-child(5) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right4 ul li:nth-child(4) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right4 ul li:nth-child(5) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left3 article a:nth-child(3) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left3 article a:nth-child(4) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left3 ul li:nth-child(3) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left3 ul li:nth-child(4) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right3 article a:nth-child(3) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right3 article a:nth-child(4) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right3 ul li:nth-child(3) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right3 ul li:nth-child(4) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left2 article a:nth-child(2) {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left2 article a:nth-child(3) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left2 ul li:nth-child(2) span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left2 ul li:nth-child(3) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right2 article a:nth-child(2) {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right2 article a:nth-child(3) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right2 ul li:nth-child(2) span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right2 ul li:nth-child(3) span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.left0 article a:last-child {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left0 article a:first-child {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left0 ul li:last-child span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left0 ul li:first-child span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left1 article a:first-child {z-index: 2;-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.left1 article a:nth-child(2) {z-index: 3;-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left1 ul li:first-child span {-webkit-animation: left_show 0.3s forwards;
}
#home_banner.left1 ul li:nth-child(2) span {-webkit-animation: left_hide 0.3s forwards;
}
#home_banner.right0 article a:last-child {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right0 article a:first-child {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right0 ul li:last-child span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right0 ul li:first-child span {-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right1 article a:first-child {z-index: 2;-webkit-animation: right_hide 0.3s forwards;
}
#home_banner.right1 article a:nth-child(2) {z-index: 3;-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right1 ul li:first-child span {-webkit-animation: right_show 0.3s forwards;
}
#home_banner.right1 ul li:nth-child(2) span {-webkit-animation: right_hide 0.3s forwards;
}
@keyframes left_show {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}
@keyframes right_show {0% {transform: translateX(100%);}100% {transform: translateX(0);}
}
@keyframes left_hide {0% {transform: translateX(0);}100% {transform: translateX(100%);}
}
@keyframes right_hide {0% {transform: translateX(0);}100% {transform: translateX(-100%);}
}
#home_banner article {position: relative;width: 100%;height: 3.58rem;overflow: hidden;
}
#home_banner article a {position: absolute;width: 100%;height: 100%;
}
#home_banner article a img {width: 100%;height: 100%;
}
#home_banner ul {position: absolute;z-index: 3;bottom: 0.24rem;left: 50%;transform: translateX(-50%);display: table;
}
#home_banner ul li {position: relative;float: left;width: 0.22rem;height: 0.06rem;margin: 0 0.12rem;background-color: #fe0000;border-radius: 1rem ;box-shadow: rgba(71, 63, 64, 0.75) 0 2px 2px;font-size: 0;overflow: hidden;
}
#home_banner ul li span {display: block;width: 100%;height: 100%;background-color: #fff;
}
//cssreset
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
select,
img {margin: 0;padding: 0;
}
input,
button,
textarea,
img {outline: none;
}
button {border: none;background-color: rgba(0, 0, 0, 0);
}
img {border: none;
}
a,
a:hover,
a:focus {text-decoration: none;
}
div {-webkit-text-size-adjust: none;
}
li {list-style: none;
}
html {font-size: 16px;text-size-adjust: none;
}
body {font-family: "\5FAE\8F6F\96C5\9ED1";font-size: 0.3rem;
}转载于:https://my.oschina.net/u/3797834/blog/1634751
移动端banner css3(@keyframes )实现相关推荐
- 移动端banner css3(@keyframes )实现
2019独角兽企业重金招聘Python工程师标准>>> 这个是我用webpack时的生产文件部分,为了方便观看,在页面引入了less和vue的cdn,需要复制的话方便看 注:cssr ...
- css3 keyframes zoom,CSS3 @keyframes 规则 | w3cschool菜鸟教程
CSS3 @keyframes 规则 实例 使一个div元素逐渐移动200像素: @keyframes mymove { from {top:0px;} to {top:200px;} } @-web ...
- css3 keyframes zoom,CSS3通过@keyframes创建动画
本文主要和大家介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 定义: 通过 @keyfram ...
- css3 keyframes 取消动画,CSS3 @keyframes简单动画实现
CSS3 @keyframes简单动画实现 定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CS ...
- CSS3 @keyframes animate
2019独角兽企业重金招聘Python工程师标准>>> 1.@keyframes定义和用法 通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式 ...
- css3 @keyframes、transform详解与实例
一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...
- CSS3 keyframes动画实现弹跳效果
首先,"回到顶部"."用户反馈"这两个按钮是通过定位放在左下角上. (1)"回到顶部"的按钮只有当滚动条有出现下滑时才出现 (2)" ...
- css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...
我想制作一个帆船动画.它有效,但它不是一个流畅的动画.它停止在我在@keyframes中做出的每个更改中.我正在使用transform:rotate(-5deg),然后更改为5deg以模拟波浪效果,同 ...
- CSS3 - @keyframes
语法 @keyframes animationname {keyframes-selector {css-styles;} } 值 描述 animationname 必需.定义动画的名称. keyfr ...
最新文章
- gcc c语言标准,GCC 7.1发布 支持当前所有的C ++ 17标准
- arcgis api for JavaScript _跨域请求
- c++ 包络谱分析代码_基于特征分析谱估计算法（Capon, MUSIC, ESPRIT）的C++实现
- random.nextint()
- nginx运行php如何,ThinkPHP项目在Nginx上运行的配置问题
- linux服务器上网页变形,Linux服务器上用iScanner删除网页恶意代码的方法
- 【idea设置】java maven项目，如何打包
- 贾跃亭的乐视股票要被拍卖了，每股2.51元起拍
- python列表解析，生成表达式（一分钟读懂）
- TypeScript 2.8下的终极React组件模式
- maven学习系列——（七）Dependency
- SNMP 简单网络管理协议
- 利用python如何进行数据挖掘
- labview制成app_图形化编程软件(labview)
- python 拆分字符串反斜杠_用反斜杠拆分字符串
- Webmin 远程命令执行漏洞(CVE-2019-15107)
- c语言随机数字密码生成器,随机数生成器(浮点数整型数)
- 员工跟母亲吐槽被同事欺负，隔天母亲跑到公司打同事，结果蒙了
- ZZULIOJ:1136: 首字母变大写
- 微信直播小程序端集成源代码
热门文章
- 用c语言实现ppp协议,PPP协议对同步传输方式采用了（)实现透明传输。A.字符填充法B.比特填充法C.PPP帧D.广播信道...
- LearnLua - 学习笔记
- 双非本科生如何才能进入腾讯、阿里、百度这些大厂？
- 计算机视觉方向简介 | 室内场景的结构化重建
- 个人办理上海人才居住证
- 构造原理中的独立性条件如果不满足，是否原结论仍然成立？试用模拟的方法验证你的结论。
- Python基础Pro | (4) 函数式编程
- dw1510_{已解决｝大家有没有DELL DW1510，BCM94322HM8L最新的win10驱动？dell 1510
- java 获得当前时间_JAVA中获取当前系统时间
- CSS语法之@规则(at-rule)