搜索到
2
篇与
css
的结果
-
线性渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style type="text/css"> .box{ height: 200px; background-color: red; background-image:linear-gradient(red,yellow,blue);} </style> </head> <body> <div class="box"></div> </body> </html> <style type="text/css"> #box { height: 200px; background-color: red; background-image: linear-gradient(to bottom right, red, blue); } </style> -
css垂直滚动播放效果 <!DOCTYPE html> <html> <head> <style> *{transition:all 1s ease 0s;} #showSlide{width:300px;height:200px;overflow:hidden; border:20px solid #ccc;box-shadow:1px 1px 3px rgba(0,0,0,1); } #inner{} .slide{width:300px;height:200px;display:inline-block;} label{border-radius: 5px;display: inline-block;width: 10px;height: 10px;background: #ccc;cursor:pointer;} input{display:none} #slide1:hover ~ #showSlide #inner{margin-top:0;} #slide2:hover ~ #showSlide #inner{margin-top:-200px;} #slide3:hover ~ #showSlide #inner{margin-top:-400px;} #slide4:hover ~ #showSlide #inner{margin-top:-600px;} label:hover{background:#000;} </style> </head> <body> <input checked="checked" name="slider" id="slide1" type="radio"> <input name="slider" id="slide2" type="radio"> <input name="slider" id="slide3" type="radio"> <input name="slider" id="slide4" type="radio"> <input name="slider" id="slide5" type="radio"> <div id="showSlide"> <div id="inner"> <artical> <div class="slide"><img src="images/slide1.jpg"></div> </artical> <artical> <div class="slide"><img src="images/slide2.jpg"></div> </artical> <artical> <div class="slide"><img src="images/slide3.jpg"></div> </artical> <artical> <div class="slide"><img src="images/slide4.jpg"></div> </artical> </div> </div> <div id="controller"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> </div> </body> </html>
您的IP: