線上直播系統原始碼，利用css和html實現首頁圖片輪播效果

zhibo系統開發發表於2021-10-08
原始碼CSSHTML

線上直播系統原始碼，利用css和html實現首頁圖片輪播效果的相關程式碼

滑動輪播圖

效果直接儲存本地 html 雙擊開啟可看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.one {
position: absolute;
width: 300px;
height: 300px;
overflow: hidden;
}
.one_cantent img {
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;
}
@keyframes move {
0% {
left: 0px;
}
25% {
left: -300px;
}
50% {
left: -600px;
}
75% {
left: -900px;
}
100% {
left: -1200px
}
}
</style>
</head>
<body>
<div>
<div>
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/113.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/114.png">
</div>
</div>
</body>
</html>


漸變效果實現

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播</title>
<style>
*{
margin: 0;
padding: 0;
}
.one img{
position: absolute;
width: 200px;
height:300px;
}
.two img{
position: absolute;
width: 200px;
height: 300px;
}
.three img{
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;
}
@keyframes cantoons{
0% {
opacity: 1;
}
35% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes cantoons2{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
 
}
}
@keyframes cantoons1{
0% {
opacity: 0;
}
35% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
 
}
}
</style>
</head>
<body>
 
<div>
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png" alt="">
</div>
<div>
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png" alt="">
</div>
<div>
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png" alt="">
</div>
 
</body>
</html>



以上就是線上直播系統原始碼，利用css和html實現首頁圖片輪播效果的相關程式碼， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2794884/，如需轉載，請註明出處，否則將追究法律責任。

相關文章