1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    CSS3 實現的圖片懸停的切換按鈕_css3_CSS_網頁制作

    來源:腳本之家  責任編輯:小易  

    實現效果:

    實現代碼

    html

    <ul class="slides">
        <input type="radio" name="radio-btn" id="img-1" checked />
        <li class="slide-container">
    		<div class="slide">
    			<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-6" class="prev">&#x2039;</label>
    			<label for="img-2" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <input type="radio" name="radio-btn" id="img-2" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-1" class="prev">&#x2039;</label>
    			<label for="img-3" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <input type="radio" name="radio-btn" id="img-3" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-2" class="prev">&#x2039;</label>
    			<label for="img-4" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <input type="radio" name="radio-btn" id="img-4" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-3" class="prev">&#x2039;</label>
    			<label for="img-5" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <input type="radio" name="radio-btn" id="img-5" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-4" class="prev">&#x2039;</label>
    			<label for="img-6" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <input type="radio" name="radio-btn" id="img-6" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
            </div>
    		<div class="nav">
    			<label for="img-5" class="prev">&#x2039;</label>
    			<label for="img-1" class="next">&#x203a;</label>
    		</div>
        </li>
    
        <li class="nav-dots">
          <label for="img-1" class="nav-dot" id="img-dot-1"></label>
          <label for="img-2" class="nav-dot" id="img-dot-2"></label>
          <label for="img-3" class="nav-dot" id="img-dot-3"></label>
          <label for="img-4" class="nav-dot" id="img-dot-4"></label>
          <label for="img-5" class="nav-dot" id="img-dot-5"></label>
          <label for="img-6" class="nav-dot" id="img-dot-6"></label>
        </li>
    </ul>

    CSS3

    @import url(https://fonts.googleapis.com/css?family=Varela+Round);
    
    html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }
    
    .slides {
        padding: 0;
        width: 609px;
        height: 420px;
        display: block;
        margin: 0 auto;
        position: relative;
    }
    
    .slides * {
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    .slides input { display: none; }
    
    .slide-container { display: block; }
    
    .slide {
        top: 0;
        opacity: 0;
        width: 609px;
        height: 420px;
        display: block;
        position: absolute;
    
        transform: scale(0);
    
        transition: all .7s ease-in-out;
    }
    
    .slide img {
        width: 100%;
        height: 100%;
    }
    
    .nav label {
        width: 200px;
        height: 100%;
        display: none;
        position: absolute;
    
    	  opacity: 0;
        z-index: 9;
        cursor: pointer;
    
        transition: opacity .2s;
    
        color: #FFF;
        font-size: 156pt;
        text-align: center;
        line-height: 380px;
        font-family: "Varela Round", sans-serif;
        background-color: rgba(255, 255, 255, .3);
        text-shadow: 0px 0px 15px rgb(119, 119, 119);
    }
    
    .slide:hover + .nav label { opacity: 0.5; }
    
    .nav label:hover { opacity: 1; }
    
    .nav .next { right: 0; }
    
    input:checked + .slide-container  .slide {
        opacity: 1;
    
        transform: scale(1);
    
        transition: opacity 1s ease-in-out;
    }
    
    input:checked + .slide-container .nav label { display: block; }
    
    .nav-dots {
    	width: 100%;
    	bottom: 9px;
    	height: 11px;
    	display: block;
    	position: absolute;
    	text-align: center;
    }
    
    .nav-dots .nav-dot {
    	top: -5px;
    	width: 11px;
    	height: 11px;
    	margin: 0 4px;
    	position: relative;
    	border-radius: 100%;
    	display: inline-block;
    	background-color: rgba(0, 0, 0, 0.6);
    }
    
    .nav-dots .nav-dot:hover {
    	cursor: pointer;
    	background-color: rgba(0, 0, 0, 0.8);
    }
    
    input#img-1:checked ~ .nav-dots label#img-dot-1,
    input#img-2:checked ~ .nav-dots label#img-dot-2,
    input#img-3:checked ~ .nav-dots label#img-dot-3,
    input#img-4:checked ~ .nav-dots label#img-dot-4,
    input#img-5:checked ~ .nav-dots label#img-dot-5,
    input#img-6:checked ~ .nav-dots label#img-dot-6 {
    	background: rgba(0, 0, 0, 0.8);
    }

    以上就是CSS3 實現的圖片懸停的切換按鈕的詳細內容,更多關于CSS3 圖片懸停切換的資料請關注真格學網其它相關文章!


  3. 本文相關:
  4. css3實現的九宮格圖片鼠標懸停去除遮罩層特效源碼
  5. js+css3透明的霜霧玻璃圖片預覽特效
  6. css 實現 圖片鼠標懸停折疊效果
  7. css3圖片列表鼠標懸停遮罩特效代碼
  8. css3鼠標懸停圖片3d翻頁顯示文字描述特效
  9. css3圖片鼠標懸停多種遮罩動畫效果 42種
  10. 純css3實現懸停圖片文字遮罩特效源碼
  11. css3鼠標懸停圖片遮罩變形動畫特效
  12. css3鼠標滑過圖片效果 用font awesome庫實現懸停圖標
  13. 基于css3實現列表圖片鼠標懸停動畫特效源碼
  14. css 鼠標經過按鈕.按鈕向上切換,出現另一個圖標
  15. 怎樣實現鼠標懸停時圖片的切換? CSS代碼。
  16. html5+css3實現圖片自動切換
  17. 能不能用css3做一個圖片切換效果,
  18. css按鈕:ACTIVE點擊切換背景圖片
  19. 在HTML中用css如何實現圖片切換!!!
  20. css鼠標懸停時,換圖片
  21. css+div問題,如何實現鼠標移上一個圖片按鈕使當前...
  22. 如何用CSS控制按鈕圖片切換
  23. css鼠標懸停圖片更換?
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss3切換懸停圖片基于css3實現列表圖片鼠標懸停動畫特效源碼css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css3的transform中scale縮放詳解純css繪制漂亮的圓形圖案效果css3通過scale()、rotate()實現放大、旋轉純css實現聊天框小尖角、氣泡效果css3 icon font完全指南(css3 font 會取代icon圖標)css3實現div圓角效果完整代碼 css3實現背景顏色漸變讓圖片不再是唯一的實現方式8款精美的css3表單設計(登錄表單/下拉選擇/按鈕附演示css3 media queries(響應式布局可以讓你定制不同的分使用css3背景漸變中的透明度來設置不同顏色的背景漸變css3 實現的圖片懸停的切換按鈕css3實現三角形不斷放大效果css3實現背景圖片顏色修改的多種方式css3 制作的懸停縮放特效css3 制作的書本翻頁特效css3 制作的彩虹按鈕樣式css3制作的背景漸變動畫效果css3實現的天氣圖標動畫效果css3 實現的定價表css3 filter屬性的使用簡介
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载