在线直播系统源码，利用css和html实现首页图片轮播效果

在线直播系统源码，利用css和html实现首页图片轮播效果的相关代码

滑动轮播图

效果直接保存本地 html 双击打开可看

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

渐变效果实现

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