还没有学习如何用JS实现轮播图效果，所以就用CSS做了一个假的~
氮素！目前只调出三个图实现轮播，图越多代码就越复杂，后面就没调了，才不是因为我懒_(:з」∠)_
代码如下↓↓↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
img[alt="02"]{
position: absolute;
animation: op_02 20s ease-in-out infinite;
}
img[alt="01"]{
position: absolute;
animation: op_01 10s ease-in-out infinite;
}
@keyframes op_01{
30%{
opacity: 1;
}
70%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes op_02{
0%{
opacity: 1;
}
30%{
opacity: 0;
}
}
</style>
<body>
<img src="app_discover_4_05_033_03.png" alt="01">
<img src="app_discover_4_07.png" alt="02">
<img src="app_discover_4_12.png" alt="03">
</body>
</html>
关键点就在于利用opacity属性控制图片在何时变为透明又何时出现，原理很简单吧~ CSS3真的超级强大了~
时间： 2024-11-02 21:18:06