<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>純CSS3實現圖文切換特效 - 何問起</title><base target="_blank" /> <link rel="stylesheet" href="http://hovertree.com/texiao/css3/39/themes/csslider.default.css" /> <style> * { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 2px; background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: rgba(74, 168, 0, 0.6); } ul, ol { padding-left: 40px; } html, body { height: 100%; text-align: center; font: 400 100% 'Raleway', 'Lato'; background-color: #282828; color: #CCC; } h1 { font-weight: 700; font-size: 310%; } h2 { font-weight: 400; font-size: 120%; color: #71AD37; } #hewenqislider { margin: 20px; font-family: 'Lato'; } #hewenqislider > ul > li:nth-of-type(3) { background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg); } #hewenqislider > input:nth-of-type(3):checked ~ ul #hovertreebg { width: 80%; padding: 22px; -moz-transition: .5s .5s; -o-transition: .5s .5s; -webkit-transition: .5s .5s; transition: .5s .5s; } #hewenqislider > input:nth-of-type(3):checked ~ ul #hovertreebg div { -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); -moz-transition: .5s .9s; -o-transition: .5s .9s; -webkit-transition: .5s .9s; transition: .5s .9s; } #hovertreebg { color: #000; padding: 22px 0; position: absolute; left: 0; top: 16%; height: 20%; width: 0; z-index: 10; overflow: hidden; } #hovertreebg:before { content: ''; position: absolute; left: -1px; top: 1px; height: 100%; width: 100%; z-index: -1; background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg) 1px 23%; -webkit-filter: blur(7px); } #hovertreebg:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 20; background: rgba(0, 0, 0, 0.35); pointer-events: none; } #hovertreebg div { -moz-transform: translate(120%); -ms-transform: translate(120%); -o-transform: translate(120%); -webkit-transform: translate(120%); transform: translate(120%); } .scrollable p { padding: 30px; text-align: justify; line-height: 140%; font-size: 120%; } #hewenqislider a{color:greenyellow} .csslider>ul{width:500px;/*在這里改變寬度 何問起*/} </style> </head> <body> <div style="padding: 1em 0;"> <div id="hewenqislider" class="csslider"> <input type="radio" name="slides" id="slides_1" /> <input type="radio" name="slides" id="slides_2" /> <input type="radio" name="slides" id="slides_3" checked /> <input type="radio" name="slides" id="slides_4" /> <ul> <li> <h1>歡迎光臨何問起</h1> <p>CSSlider is lightweight & easy to use slider. No JS - pure CSS. <br />這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。 <br /> by <a href="http://hovertree.com">何問起</a> <a href="http://hovertree.com/h/bjaf/3ciuqvoq.htm">說明</a> </p> </li> <li> <a href="http://hovertree.com/texiao/"><img src="http://hovertree.com/texiao/css3/39/themes/stones.jpg" /></a> </li> <li> <div id="hovertreebg"> <div> <h1>CSS Events</h1> <p>When slide 3 is reached - play CSS animation! 純CSS3的圖文切換 hovertree.com </p> </div> </div> </li> <li class="scrollable"> <h1>Lots of text</h1> <h2>Scrollable one</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 還可以有長文本，會顯示滾動條。這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。by 何問起。 還可以有長文本，會顯示滾動條。這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。by 何問起。 還可以有長文本，會顯示滾動條。這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。by 何問起。 還可以有長文本，會顯示滾動條。這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。by 何問起。 </p> </li> </ul> <div class="arrows"> <label for="slides_1"></label> <label for="slides_2"></label> <label for="slides_3"></label> <label for="slides_4"></label> </div> <div class="navigation"> <div> <label for="slides_1"></label> <label for="slides_2"></label> <label for="slides_3"></label> <label for="slides_4"></label> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。</p> <p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a></p> </div> </body> </html>