CSS盒子模型是什么意思？ _WEB前端开发
因为CSS盒子模型具有内容内容、内边界填充、边框边界和外边界边距等属性，这些属性可以比喻日常生活中常见的“盒子”
CSS引起的轮播效应(带编码) ) ) ) ) ) ) ) ) )。
理论基础
CSS3 animation属性和@keyframes规则
主体思想
1、准备多个相同大小的图像
2、将要展示的照片横向摆放在一个照片容器里
3、图片容器外再增加一个展示容器，展示容器大小为图片尺寸
4、向图像容器添加自定义动画，并在动画的不同阶段设置增加的偏移值
注意事项
动画效果分为切换和停留
自定义动画的阶段与图像的数量相关
动画中每个阶段的偏移值取决于图像的大小
setTimeout和setInterval的区别是什么_WEB前端开发
setTimeout和setInterval都是JS计时器，可以在执行某项操作之前指定延迟时间。 不同之处在于，setTimeout在规定时间后执行某个操作时会停止，但setInterval可以一直循环。
没有从本文示例中的最后一个图像切换到第一个图像的效果。 一种思路是从最后一张图像依次切换到第一张图像
HTML
分析：
在这里，我们创建了三个img元素。 img元素外有图像容器，图像容器外有展示容器。
CSS
#container {
width: 400px；
height: 300px；
overflow :隐藏；
}
#photo {
width: 1200px；
animation :交换机5s ease-out infinite；
}
#photo img {
浮动：左；
width: 400px；
height: 300px；
}
@keyframes switch {
0%，25% {
边距左边缘： 0；
}
35%，60% {
边距左边缘：-400 px；
}
70%，100% {
边距左边缘：-800 px；
}
}
分析：
1、展示容器大小与图片大小一致
2、给图片添加浮点效果，不用考虑麻烦的边距问题
3、因为例子只有三个图片，所以增加三个动画阶段，每个阶段通过设置增加的边距-左值来达到切换的效果
4、设定的动画阶段(例如35(60 ) )是动画停留部分，前一阶段的空闲时间(例如25 ) ) 35 )是动画切换部分，各个部分的时间的长度需要自己控制
效果的执行
谢谢您的阅读。 希望各位收益多多。
原文： https://blog.csdn.net/u 011848617/article/details/80468463
推荐教程： 《CSS教程》