非常迷你的純CSS3時間軸切換焦點圖

2016-02-21 分類：焦點圖動畫、素材庫、指令碼程式碼0人評論發表於2016-02-21

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

這是一款基於jQuery和CSS3的焦點圖動畫外掛，外掛非常迷你，功能也比較簡單，它的特點是圖片切換按鈕類似一條時間軸，點選時間軸的圓圈即可切換到相應的圖片。點選切換按鈕時，按鈕會出現漸隱漸顯的發光特效，圖片切換過程中整張圖片過渡的效果非常柔和，並且圖片描述也相應以動畫的方式顯示在圖片上，是一款非常棒的CSS3圖片切換元件。

線上演示原始碼下載

HTML程式碼：

<div id="gal">
  <nav class="galnav">
    <ul>
		<li><input type="radio" name="btn" value="one" checked="checked" />
		<label for="btn"></label>
        <figure>
          <img src="images/01_Fabio_Basile.jpg" />
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity</p>
		<ul>
			<li><a href="#" class="entypo-dribbble">
			</a></li>
			<li><a href="#" class="entypo-twitter"></a>
			</li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
		<li><input type="radio" name="btn" value="two" /> <label for="btn">
		</label>
         <figure class="entypo-forward">
          <img src="images/08_Brian_Miller.jpg" />
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role='navigation'>
                <p>TypeTi.me</p>
		<ul>
			<li><a href="#" class="entypo-dribbble"></a>
			</li>
			<li><a href="#" class="entypo-twitter"></a>
			</li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
		<li><input type="radio" name="btn" value="three" /> <label for="btn">
		</label>
        <figure class="entypo-forward">
          <img src="images/05_Nicolas_Quod.jpg" />
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role='navigation'>
                <p>Iphone 6 - Notification - iOS 7</p>
		<ul>
			<li>
			<a href="#" class="entypo-dribbble">
			</a></li>
			<li>
			<a href="#" class="entypo-twitter">
			</a></li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
		<li><input type="radio" name="btn" value="four" /> <label for="btn">
		</label>
         <figure class="entypo-forward">
          <img src="images/04_Joffrey.jpg" />
          <figcaption>
            <h4>Joffrey</h4>
              <nav role='navigation'>
                <p>功能齊全</p>
		<ul>
			<li><a href="#" class="entypo-dribbble">
			</a></li>
			<li><a href="#" class="entypo-twitter">
			</a></li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
		<li><input type="radio" name="btn" value="five" /> <label for="btn">
		</label>
         <figure class="entypo-forward">
          <img src="images/09_Jared_Long.jpg" />
          <figcaption>
            <h4>Jared Long</h4>
              <nav role='navigation'>
                <p>Don't drop your iPhone Infinity</p>
		<ul>
			<li>
			<a href="#" class="entypo-dribbble">
			</a></li>
			<li>
			<a href="#" class="entypo-behance">
			</a></li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
		<li><input type="radio" name="btn" value="six" /> <label for="btn">
		</label>
         <figure class="entypo-forward">
          <img src="images/02_Charles_Treece.jpg" />
          <figcaption>
            <h4>Charles Treece</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity Side Status Bar</p>
		<ul>
			<li>
			<a href="#" class="entypo-dribbble">
			</a></li>
			<li>
			<a href="#" class="entypo-twitter">
			</a></li>
		</ul>
              </nav>  
          </figcaption>
        </figure>
      	</li>
	</ul>
  </nav>
</div>

CSS程式碼

因為這款焦點圖外掛並沒有使用任何JS程式碼，所以，圖片切換功能全部依賴CSS3相關特性，具體的CSS程式碼如下：

#gal {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#gal:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
input[type="radio"] {
  opacity:0;
  z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
  left:10px;
  top:5px;
  font-size:2rem;
  color:rgba(255,255,255,0);
  z-index:1;
  -webkit-transition:color .1s;
  -moz-transition:color .1s;
  -o-transition:color .1s;
  transition:color .1s;
}
a[class*="entypo-"]:before {
  top:8px;
  left:9px;
  font-size:1.5rem;
  color:white;
}
a:hover[class*="entypo-"]:before {
  color:white;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
  right:0;
}
figure {
  bottom:0;
  left:0;
  width:600px;
  height:300px;
  display:block;
  overflow:hidden;
}
figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  z-index:1;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s .15s, z-index 0s;
  -moz-transition:all .15s .15s, z-index 0s;
  -o-transition:all .15s .15s, z-index 0s;
  transition:all .15s .15s, z-index 0s;
}
figcaption {
  display:block;
  width:270px;
  height:300px;
  padding-top:20px;
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
  background-size:600px 600px;
  background-repeat:no-repeat;
  background-position:-300px -150px;
  text-align:center;
  z-index:3;
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .35s;
  -moz-transition:all .35s;
  -o-transition:all .35s;
  transition:all .35s;
}
h4 {
  display:inline-block;
  padding:0 15px;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:2rem;
}
figcaption nav ul {display:block;padding-top:10px;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {
  position:relative;
  display:block;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption nav ul li a:hover {
  background:rgba(255,255,255,0);
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
}
figcaption p {
  padding:50px 15px;
  font-family:'Titillium Web', sans-serif;
  font-weight:300;
  color:#333;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:50% 0%;
}

input[type="radio"]:hover + label {
  background:rgba(255,255,255,0.6);
}
input[type="radio"]:checked + label {
  background:rgba(255,255,255,1);
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
}
input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}

線上演示原始碼下載

本文連結：http://www.codeceo.com/article/mini-css3-timeline-image-player.html
本文作者：碼農網 – 小峰
[ 原創作品，轉載必須在正文中標註並保留原文連結和作者等資訊。]

非常漂亮的CSS3百葉窗焦點圖動畫
2016-02-22
CSSS3動畫
CSS3時間軸效果
2017-04-05
CSSS3
vue元件開發練習–焦點圖切換
2019-03-01
Vue元件
vue元件開發練習--焦點圖切換
2017-11-29
Vue元件
《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫
2019-12-20
前端CSS網站動畫
簡單的圖片間隔指定時間切換效果
2017-02-19
View手動切換焦點注意事項
2013-09-17
View
非常震撼的純CSS3人物行走動畫
2016-02-23
CSSS3動畫
純css設定input文字框獲取焦點時的樣式
2017-03-23
CSS
JS時間軸效果(類似於qq空間時間軸效果)
2013-11-04
JS
點選方向鍵實現文字框焦點切換程式碼例項
2017-04-01
切好雲端計算的時間點
2011-02-23
純CSS3發光按鈕動畫非常絢麗
2016-02-27
CSSS3動畫
純CSS實現Tab欄的切換
2018-11-21
CSS
純CSS3實現超炫酷的3D開關切換按鈕
2016-02-27
CSSS33D
遮罩效果的焦點圖
2012-07-08
遮罩
時間系統、程式的排程與切換
2013-09-16
Python Pandas 時間序列雙軸折線圖
2018-05-13
Python
【純手工打造】時間戳轉換工具（python）
2023-12-16
時間戳Python
點選enter回車能夠切換表單元素焦點程式碼例項
2017-03-31
用純css實現Tab切換
2018-07-17
CSS
業務時間軸，各專業狀態參與點
2010-05-19
Oracle redo 日誌切換時間頻率
2014-11-10
Oracle Redo
win10主題切換時間設定在哪裡 win10主題切換時間設定方法
2020-10-10
Win10
設定文字框得到焦點或者失去焦點時的樣式
2017-02-24
純CSS彈出層，城市切換效果
2015-03-15
CSS
純CSS的導航欄Tab切換例項
2021-09-09
CSS
win10怎麼設定桌面桌布切換時間_win10桌面桌布切換時間怎麼調整
2020-05-15
Win10
17點圖：xy軸的幾何圖案
2016-01-03
如何設計一個好玩的競技遊戲——結構時間軸與戰鬥時間軸
2020-07-17
遊戲
時間軸元件 by Vue.js
2019-01-12
元件Vue.js
時間軸/里程碑模式
2010-06-10
模式
Label和input實現純CSS切換
2019-02-02
CSS
純css實現控制文字框獲得焦點的樣式
2017-03-04
CSS
點選按鈕實現圖片切換效果
2017-04-12
js點選實現多圖順序切換和迴圈切換效果程式碼
2017-04-12
JS
非常規 - VUE 實現特定場景的主題切換
2019-08-15
Vue
前端css實現最基本的時間軸
2020-04-05
前端CSS

非常迷你的純CSS3時間軸切換焦點圖

HTML程式碼：

CSS程式碼

相關文章