幻灯片（基于CSS3动画animation）

效果预览：

实现思路：
类似于：h5+css3+js之移动端轮播图
将存放所有图片的容易按照一定的时间在X轴进行移动，但是此处使用的是纯CSS实现，利用动画animation定义每一帧的动画，在每一帧的动画中沿着X轴进行移动
实现代码：
html:

    <main><section><div><img src="/images/1.jpg" alt=""></div><div><img src="/images/2.PNG" alt=""></div><div><img src="/images/4.jpg" alt=""></div><div><img src="/images/dog.jpg" alt=""></div>
<!--            图片索引--></section><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></main>

css

* {padding: 0;margin: 0;
}body {width: 100vw;height: 100vh;display: grid;grid-template: 1fr/1fr;justify-items: center;align-items: center;background: #353b48;
}main {width: 400px;height: 200px;overflow: hidden;position: relative;
}/*存放所有图片 控制整体图片的移动*/
section {width: 1600px;height: 200px;display: grid;grid-template: 1fr/repeat(4,1fr);animation-name: move;animation-duration: 4s;/*每张图占1s 且等1s结束之后再移动*/animation-timing-function: steps(4,end);/*重复播放*/animation-iteration-count: infinite;position: relative;
}div {width: 400px;height: 200px;
}img {width: 100%;
}ul {width: 200px;list-style-type: none;position: absolute;color: #fff;bottom: 0;display: grid;grid-template: 1fr/repeat(4,1fr);z-index: 2;
}ul li {background-color: rgba(0,0,0,.5);width: 30px;height: 30px;border-radius: 50%;display: grid;grid-template: 1fr/1fr;justify-items: center;align-items: center;position: relative;
}ul li:first-child::after {content: "";width: 30px;height: 30px;background-color: #e84118;border-radius: 50%;position: absolute;z-index: -1;animation-name: move_li;animation-duration: 4s;animation-timing-function: steps(4,end);animation-iteration-count: infinite;
}section:hover,section:hover+ul>li::after{animation-play-state: paused;
}@keyframes move {to {transform: translateX(-1600px);}
}/*小圆点动画*/
@keyframes move_li {to {transform: translateX(200px);}
}

幻灯片（基于CSS3动画animation）相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
html css画小车,基于css3动画实现的旅行的小车
旅行的小车.gif 小丸子.gif 抱歉,用工具生成的gif有点卡,小车的轮子都转不利索了,完整demo可以点击文章最底下的［demo展示中心］. 这两个demo的所有元素和动效都是由html+css ...
css3动画animation，transition
animation demo1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...
CSS3动画animation
一.语法 animation: animation-name(创建的动画名) animation-duration(动画时间) animation-timing-function(动画方式) anim ...

幻灯片（基于CSS3动画animation）

幻灯片（基于CSS3动画animation）相关推荐

最新文章

热门文章