专业网站设计如何提升网页品质,哪里网站建设联系,ui设计app,自己做的网站视频播放不了CSS animation动画和关键帧实现轮播图效果HTML 这轮播图效果使用h5和css3实现效果#xff0c;不需要js控制#xff0c;但是其中的缺点就是不能使用鼠标进行切换效果。 具有代码如下
!DOCTYPE html
html langenheadmeta charset不需要js控制但是其中的缺点就是不能使用鼠标进行切换效果。 具有代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS animation动画和关键帧实现轮播图效果/titlestyle typetext/css* {margin: 0;padding: 0;}#contianer {width: 800px;height: 500px;overflow: hidden;position: relative;margin: 0 auto;}ul {width: 4000px;position: absolute;animation: animationContent 10s infinite normal;list-style: none;}li {float: left;position: relative;}liimg {width: 800px;height: 500px;}li .num {position: absolute;width: 80px;height: 80px;line-height: 80px;background: rgba(136, 255, 0, 0.5);border-radius: 50%;text-align: center;font-size: 30px;color: rgba(255, 255, 255, 0.5);font-weight: bold;margin: 0 auto;left: calc(50% - 40px);top: calc(50% - 40px);}keyframes animationContent {0% {left: 0;}25% {left: -100%;}50% {left: -200%;}75% {left: -300%;}100% {left: -400%;}}/style
/headbodydiv idcontianerullidiv classnum1/divimg srchttps://img0.baidu.com/it/u1049144354,3589714554fm253fmtautoapp120fJPEG?w1280h800/lilidiv classnum2/divimg srchttps://img1.baidu.com/it/u1168515712,1565504543fm253fmtautoapp138fJPEG?w800h500/lilidiv classnum3/divimg srchttps://img2.baidu.com/it/u2080453877,3879502418fm253fmtautoapp120fJPEG?w800h500/lilidiv classnum4/divimg srchttps://img1.baidu.com/it/u1141047078,1542868282fm253fmtautoapp120fJPEG?w1280h800/lilidiv classnum5/divimg srchttps://img1.baidu.com/it/u2337288053,330189716fm253fmtautoapp138fJPEG?w800h500/li/ul/div
/body/html
