<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 204px;
position: fixed;
}
.move0 {
left: 100px;
animation-name: picture_alter1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.move1 {
left: 400px;
animation-name: picture_alter2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.move2 {
left: 700px;
animation-name: picture_alter3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
img {
width: 100%;
height: 100%;
border-radius: 4%;
/*
box-shadow: h-shadow v-shadow blur spread color inset;
各属性值的解析:
horizontal(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它偏向左。
vertical(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它偏向上。
blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。
spread:阴影的尺寸,该参数为可选参数。0px代表阴影和当前的实体一样大,大于0则表示大于实体的尺寸。
color(颜色):颜色值,也就是设置阴影颜色。
inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。*/
box-shadow: 10px 10px 30px 5px #b3b2b2;
}
@keyframes picture_alter1 {
from {
width: 400px;
height: 204px;
top: 0px;
left: 100px;
z-index: 0;
}
to {
width: 410px;
height: 209px;
z-index: 20;
left: 400px;
top: 40px;
}
}
@keyframes picture_alter2 {
from {
width: 410px;
height: 209px;
top: 40px;
left: 400px;
z-index: 20;
}
to {
width: 400px;
height: 204px;
z-index: 0;
left: 700px;
top: 0px;
}
}
@keyframes picture_alter3 {
from {
left: 700px;
}
to {
left: 100px;
top: 0px;
}
}
</style>
<style>
/* 三个图片的初始位置:防止刚打开网页时三个图片是重合在一起的状态 */
#img1.initial{
width: 400px;
height: 204px;
top: 0px;
left: 100px;
z-index: 0;
}
#img2.initial{
width: 410px;
height: 209px;
top: 40px;
left: 400px;
z-index: 20;
}
#img3.initial{
left: 700px;
}
</style>
<script>
var img1;
var img2;
var img3;
var flag;
window.onload=function(){
img1 = document.getElementById("img1");
img2 = document.getElementById("img2");
img3 = document.getElementById("img3");
flag = 0;
setInterval(select_model, 2000);
}
function select_model() {
changeClass(flag);
flag = (flag + 1) % 3;
}
function changeClass(i) {
img1.setAttribute("class", "move" + (i));
img2.setAttribute("class", "move" + (i + 1) % 3);
img3.setAttribute("class", "move" + (i + 2) % 3);
}
</script>
</head>
<body>
<div id="img1" class="initial"><img src="./img/test.jfif" alt="img"></div>
<div id="img2" class="initial"><img src="./img/test.jfif" alt="img"></div>
<div id="img3" class="initial"><img src="./img/test.jfif" alt="img"></div>
</body>
</html>
js、css实现三个图片循环播放的效果(图片带有阴影效果)
于 2022-01-20 14:49:13 首次发布