線上直播系統原始碼，利用css和html實現首頁圖片輪播效果
阿新 • • 發佈：2021-10-08
線上直播系統原始碼，利用css和html實現首頁圖片輪播效果的相關程式碼
滑動輪播圖
效果直接儲存本地 html 雙擊開啟可看
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<styletype="text/css">
.one{
position:absolute;
width:300px;
height:300px;
overflow:hidden;
}
.one_cantentimg{
width:300px;
height:300px;
float:left;
}
.one_cantent{
width:1500px;
height:300px;
position:absolute;
left:0px;
animation-name:move;
animation-duration:10s;
animation-iteration-count:infinite;
}
@keyframesmove{
0%{
left:0px;
}
25%{
left:-300px;
}
50%{
left:-600px;
}
75%{
left:-900px;
}
100%{
left:-1200px
}
}
</style>
</head>
<body>
<div>
<div>
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png">
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png">
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png">
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/113.png">
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/114.png">
</div>
</div>
</body>
</html>
漸變效果實現
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>輪播</title>
<style>
*{
margin:0;
padding:0;
}
.oneimg{
position:absolute;
width:200px;
height:300px;
}
.twoimg{
position:absolute;
width:200px;
height:300px;
}
.threeimg{
position:absolute;
width:200px;
height:300px;
}
.three{
animation-name:cantoons;
animation-duration:10s;
animation-iteration-count:infinite;
}
.two{
animation-name:cantoons2;
animation-duration:10s;
animation-iteration-count:infinite;
}
.one{
animation-name:cantoons1;
animation-duration:10s;
animation-iteration-count:infinite;
}
@keyframescantoons{
0%{
opacity:1;
}
35%{
opacity:0;
}
70%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframescantoons2{
0%{
opacity:0;
}
35%{
opacity:1;
}
70%{
opacity:0;
}
100%{
opacity:0;
}
}
@keyframescantoons1{
0%{
opacity:0;
}
35%{
opacity:0;
}
70%{
opacity:1;
}
100%{
opacity:0;
}
}
</style>
</head>
<body>
<div>
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png"alt="">
</div>
<div>
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png"alt="">
</div>
<div>
<imgsrc="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png"alt="">
</div>
</body>
</html>
以上就是線上直播系統原始碼，利用css和html實現首頁圖片輪播效果的相關程式碼， 更多內容歡迎關注之後的文章