本篇文章主要是实现经过纯CSS实现图片切换和定时切换css
1、经过点击切换html
效果图以下web
htmlide
<div id="hewenqislider" class="csslider"> <input type="radio" name="slides" id="slides_1" checked /> <input type="radio" name="slides" id="slides_2" /> <ul> <li align="center"> <img src="img/alimt.png" /> </li> <li align="center"> <img src="img/nlp.png" /> </li> </ul> <div class="arrows"> <label for="slides_1"></label> <label for="slides_2"></label> </div> </div>
CSS动画
.csslider { -moz-perspective: 1300px; -ms-perspective: 1300px; -webkit-perspective: 1300px; perspective: 1300px; display: inline-block; text-align: left; position: relative; margin-bottom: 22px; } .csslider>input { display: none; } .csslider>input:nth-of-type(10):checked~ul li:first-of-type { margin-left: -900%; } .csslider>input:nth-of-type(9):checked~ul li:first-of-type { margin-left: -800%; } .csslider>input:nth-of-type(8):checked~ul li:first-of-type { margin-left: -700%; } .csslider>input:nth-of-type(7):checked~ul li:first-of-type { margin-left: -600%; } .csslider>input:nth-of-type(6):checked~ul li:first-of-type { margin-left: -500%; } .csslider>input:nth-of-type(5):checked~ul li:first-of-type { margin-left: -400%; } .csslider>input:nth-of-type(4):checked~ul li:first-of-type { margin-left: -300%; } .csslider>input:nth-of-type(3):checked~ul li:first-of-type { margin-left: -200%; } .csslider>input:nth-of-type(2):checked~ul li:first-of-type { margin-left: -100%; } .csslider>input:nth-of-type(1):checked~ul li:first-of-type { margin-left: 0%; } .csslider>ul { position: relative; width: 420px; height: 300px; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .csslider>ul>li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; } .csslider>ul>li.scrollable { overflow-y: scroll; } .csslider>.arrows { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .csslider>.arrows { position: absolute; left: -31px; top: 50%; width: 100%; height: 26px; padding: 0 31px; z-index: 0; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .csslider>.arrows label { display: none; position: absolute; top: -50%; padding: 13px; box-shadow: inset 2px -2px 0 1px #3a3a3a; cursor: pointer; -moz-transition: .15s; -o-transition: .15s; -webkit-transition: .15s; transition: .15s; } .csslider>.arrows label:hover { box-shadow: inset 3px -3px 0 2px #71ad37; margin: 0 0px; } .csslider>.arrows label:before { content: ''; position: absolute; top: -100%; left: -100%; height: 300%; width: 300%; } .csslider.infinity>input:first-of-type:checked~.arrows label:last-of-type, .csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(0), .csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(1), .csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(2), .csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(3), .csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(4), .csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(5), .csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(6), .csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(7), .csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(8), .csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(9), .csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(10) { display: block; left: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .csslider.infinity>input:last-of-type:checked~.arrows label:first-of-type, .csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(2), .csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(3), .csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(4), .csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(5), .csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(6), .csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(7), .csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(8), .csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(9), .csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(10), .csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(11), .csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(12) { display: block; right: 0; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } /*#region MODULES */ /*#endregion */ ul, ol { padding-left: 40px; background-color: white; } html, body { height: 100%; text-align: center; font: 400 100% 'Raleway', 'Lato'; } .scrollable p { padding: 30px; text-align: justify; line-height: 140%; font-size: 120%; } #hewenqislider a { color: greenyellow } .csslider>ul { width: 375px; /*在这里改变宽度 何问起*/ }
2、自动切换spa
htmlcode
<div id="frame" > <div id="photos" class="play"> <img src="img/alimt.png" > <img src="img/mtsaiAI.png" > </div> </div>
CSSorm
#frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px} #dis{position:absolute;left:-50px;top:-10px;opacity:.5} #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000} #photos img{float:left;width:300px;height:200px} #photos { position: absolute;z-index:9; width: calc(300px * 2);/*---修改图片数量的话须要修改下面的动画参数*/ } .play{ animation: ma 10s ease-out infinite alternate;} @keyframes ma { 0%,45% { margin-left: 0px; } 50%,100% { margin-left: -300px; } }
2、自动切换htm