純css3實現點選縮圖切換背景圖

阿新 • • 發佈：2019-01-13

1：html頁面部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>純css3實現背景圖片切換效果</title>
<!--Main css-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main role="main">
<!--縮圖【start】-->
<div  
class="slider">
        <ul class="clearfix">
            <li>
                <a href="#bg1">從左往右切換</a>
            </li>
            <li>
                <a href="#bg2">從下往上</a>
            </li>
            <li>
                <a href= 
"#bg3">從小到大</a>
            </li>
            <li>
                <a href="#bg4">從大到小</a>
            </li>
            <li>
                <a href="#bg5">旋轉進入</a>
            </li>
        </ul>
    </div>
<!--縮圖【end】-->
    <!-- 
背景圖【start】-->
<div class="bac_img">
        <img src="img/bg1.jpg" alt="" id="bg1">
        <img src="img/bg2.jpg" alt="" id="bg2">
        <img src="img/bg3.jpg" alt="" id="bg3">
        <img src="img/bg4.jpg" alt="" id="bg4">
        <img src="img/bg5.jpg" alt="" id="bg5">
    </div>
<!--背景圖【end】-->
</main>
</body>
</html>

2：css部分

/*
背景圖切換 css
*/
.clearfix {
  clear: both;
}
.slider {
  width: 100%;
  position: absolute;
  z-index: 999;
  text-align: center;
  bottom: 200px;
}
.slider > ul {
  list-style: none;
}
.slider > ul > li {
  width: 170px;
  height: 130px;
  display: inline-block;
  margin-right: 15px;
}
.slider > ul > li > a {
  width: 100%;
  display: inline-block;
  position: relative;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 22px;
  padding-top: 70px;
  padding-bottom: 20px;
  font-family: 'Yesteryear', cursive;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8), -2px -2px 1px rgba(0, 0, 0, 0.3), -3px -3px 1px rgba(0, 0, 0, 0.3);
}
.slider > ul > li > a:after {
  content: '';
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: -80px;
  left: 50%;
  margin-left: -60px;
  z-index: 1001;
}
.slider > ul > li > a:before {
  content: '';
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: -80px;
  left: 50%;
  margin-left: -60px;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.3);
}
.slider > ul > li > a:hover:before {
  opacity: 0;
}
.slider > ul > li:nth-of-type(1) > a {
  background: #02646e;
}
.slider > ul > li:nth-of-type(1) > a:after {
  background: url(../img/sbg1.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(2) > a {
  background: #eb0837;
}
.slider > ul > li:nth-of-type(2) > a:after {
  background: url(../img/sbg2.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(3) > a {
  background: #67b374;
}
.slider > ul > li:nth-of-type(3) > a:after {
  background: url(../img/sbg3.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(4) > a {
  background: #e6674a;
}
.slider > ul > li:nth-of-type(4) > a:after {
  background: url(../img/sbg4.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(5) > a {
  background: #e61061;
}
.slider > ul > li:nth-of-type(5) > a:after {
  background: url(../img/sbg5.jpg) no-repeat center;
}
.bac_img img {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto !important;
  height: 100%;
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.bac_img img:not(:target) {
  -webkit-animation: notTarget 1s 1;
  -moz-animation: notTarget 1s 1;
  -ms-animation: notTarget 1s 1;
  -o-animation: notTarget 1s 1;
  animation: notTarget 1s 1;
}
#bg1:target {
  z-index: 100;
  animation: slideLeft 1s 1;
  -o-animation: slideLeft 1s 1;
  -ms-animation: slideLeft 1s 1;
  -moz-animation: slideLeft 1s 1;
  -webkit-animation: slideLeft 1s 1;
}
#bg2:target {
  z-index: 100;
  animation: topTop 1s 1;
  -o-animation: topTop 1s 1;
  -ms-animation: topTop 1s 1;
  -moz-animation: topTop 1s 1;
  -webkit-animation: topTop 1s 1;
}
#bg3:target {
  z-index: 100;
  animation: topBig 1s 1;
  -o-animation: topBig 1s 1;
  -ms-animation: topBig 1s 1;
  -moz-animation: topBig 1s 1;
  -webkit-animation: topBig 1s 1;
}
#bg4:target {
  z-index: 100;
  animation: topSmall 1s 1;
  -o-animation: topSmall 1s 1;
  -ms-animation: topSmall 1s 1;
  -moz-animation: topSmall 1s 1;
  -webkit-animation: topSmall 1s 1;
}
#bg5:target {
  z-index: 100;
  animation: rotate 1s 1;
  -o-animation: rotate 1s 1;
  -ms-animation: rotate 1s 1;
  -moz-animation: rotate 1s 1;
  -webkit-animation: rotate 1s 1;
}
/*切換動畫(從左往右)*/
@keyframes slideLeft {
  0% {
    left: -100%;
  }
  50% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes slideLeft {
  0% {
    left: -100%;
  }
  50% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes slideLeft {
  0% {
    left: -100%;
  }
  50% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes slideLeft {
  0% {
    left: -100%;
  }
  50% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@-o-keyframes slideLeft {
  0% {
    left: -100%;
  }
  50% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
/*切換動畫(從下往上)*/
@keyframes topTop {
  0% {
    top: 350px;
  }
  100% {
    top: 0;
  }
}
@-moz-keyframes topTop {
  0% {
    top: 350px;
  }
  100% {
    top: 0;
  }
}
@-ms-keyframes topTop {
  0% {
    top: 350px;
  }
  100% {
    top: 0;
  }
}
@-webkit-keyframes topTop {
  0% {
    top: 350px;
  }
  100% {
    top: 0;
  }
}
@-o-keyframes topTop {
  0% {
    top: 350px;
  }
  100% {
    top: 0;
  }
}
/*切換動畫(從小變大)*/
@keyframes topBig {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: none;
  }
}
@-moz-keyframes topBig {
  0% {
    -moz-transform: scale(0.1);
  }
  100% {
    -moz-transform: none;
  }
}
@-ms-keyframes topBig {
  0% {
    -ms-transform: scale(0.1);
  }
  100% {
    -ms-transform: none;
  }
}
@-webkit-keyframes topBig {
  0% {
    -webkit-transform: scale(0.1);
  }
  100% {
    -webkit-transform: none;
  }
}
@-o-keyframes topBig {
  0% {
    -o-transform: scale(0.1);
  }
  100% {
    -o-transform: none;
  }
}
/*切換動畫(從大變小)*/
@keyframes topSmall {
  0% {
    transform: scale(2);
  }
  100% {
    transform: none;
  }
}
@-moz-keyframes topSmall {
  0% {
    -moz-transform: scale(2);
  }
  100% {
    -moz-transform: none;
  }
}
@-ms-keyframes topSmall {
  0% {
    -ms-transform: scale(2);
  }
  100% {
    -ms-transform: none;
  }
}
@-webkit-keyframes topSmall {
  0% {
    -webkit-transform: scale(2);
  }
  100% {
    -webkit-transform: none;
  }
}
@-o-keyframes topSmall {
  0% {
    -o-transform: scale(2);
  }
  100% {
    -o-transform: none;
  }
}
/*切換動畫(旋轉進入)*/
@keyframes rotate {
  0% {
    transform: rotate(-360deg) scale(0.1);
  }
  100% {
    transform: none;
  }
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(-360deg) scale(0.1);
  }
  100% {
    -moz-transform: none;
  }
}
@-ms-keyframes rotate {
  0% {
    -ms-transform: rotate(-360deg) scale(0.1);
  }
  100% {
    -ms-transform: none;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(-360deg) scale(0.1);
  }
  100% {
    -webkit-transform: none;
  }
}
@-o-keyframes rotate {
  0% {
    -o-transform: rotate(-360deg) scale(0.1);
  }
  100% {
    -o-transform: none;
  }
}
/*設定背景影象不顯示動畫效果*/
@-webkit-keyframes notTarget {
  0% {
    z-index: 75;
  }
  100% {
    z-index: 75;
  }
}
@-moz-keyframes notTarget {
  0% {
    z-index: 75;
  }
  100% {
    z-index: 75;
  }
}
@-ms-keyframes notTarget {
  0% {
    z-index: 75;
  }
  100% {
    z-index: 75;
  }
}
@-o-keyframes notTarget {
  0% {
    z-index: 75;
  }
  100% {
    z-index: 75;
  }
}
@keyframes notTarget {
  0% {
    z-index: 75;
  }
  100% {
    z-index: 75;
  }
}

純css3實現點選縮圖切換背景圖

1：html頁面部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純css3實現背景圖片切換效果&

jquery實現點選縮圖在彈出層顯示原圖功能

場景：列表頁展示圖片，縮圖。點選圖片，在當前頁面，用1個視窗，展示對應的大圖或者原圖。之前採用jquery外掛imgbox，有問題，廢棄。又下載了一個zoomify，放大的，不符合要求。點選檢視“大圖”，只是放大的功能，而不是展示原圖的url。原圖的url和縮圖的url是不同的

純css實現點選切換樣式

原理：利用 a偽類選擇器，focus。（獲得焦點設定樣式，失去焦點恢復樣式）注意： active 和 focus的區別，active是點選 a標籤時（從滑鼠按下開始到滑鼠擡起結束。） focus是獲得焦點，與失去焦點時觸發相應的樣式示例demo： <s

loading動畫的效能優化-摒棄Canvas，擁抱CSS3-實現點選特效

click-colorful 專案中有個活動頁載入時有個loading動畫，效果如上圖，連續綻放小球，問題就是太卡，經常出現一堆小球抱團卡住，遂進行優化注意：（僅在頁面載入時卡頓，載入完畢，點選的時候不卡頓）檢視程式碼發現改動畫時借用的animejs 官網中的效果，通過can

ionic-css3實現點選水波漣漪的觸覺效果

這兩天有時間就繼續在ionic的框架上利用angularjs實現一些在app中經常用到的觸覺漣漪效果，基於material design，給人友好互動感覺。一、點選一些在頭部或者底部的圖示時。產生漣

使用jquery + css + html實現點選左右箭頭切換圖片

$(function() { var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積） var len = $("#focus ul li").length; //獲取焦點圖個數 var index = 0; var picTimer; //以下程式碼新

【js例項】js實現點選標題標籤切換顯示對應內容

var box = document.getElementById("tab"); //獲取滑動標籤最外層元素 var olis = box.getElementsByTagName("li"); //獲取標籤元素 var odivs = box.getElementsByTagNa

Android 通過ViewPager實現點選和滑動切換Fragment標籤頁

如上圖效果，要切換 Fragment 標籤頁，可以通過點選標籤或者滑動標籤頁來實現。網上應該有封裝好的開源庫可以直接利用，不過這裡介紹一下自己通過 ViewPager 實現該效果。首先是佈局檔案： <?xml version="1.0" encodi

jquery 動態點選li標籤切換背景顏色

廢話不多講老規矩先上圖看效果：<script type="text/javascript" src="/jquery/jquery.js"></script> 改為你本地專案的js路徑<!DOCTYPE html><html>

音樂網站開發：實現點選按鈕切換頁面背景圖的功能

最近這一星期在做一個簡單小型的音樂播放器網站，目前各種功能基本都已經實現，包括切換上一曲下一曲，播放與暫停，隨機播放單曲迴圈順序播放模式切換，一首播放完畢自動按模式切換至下一曲，載入單句歌詞及所有歌詞等功能。另外就是本篇部落格要介紹的功能了，點

純html+css實現點選切換tab頁

核心內容是使用單選框實現css的點選事件大致分析一下dom結構，被切換的tab頁和按鈕放在同一個li內一共需要切換三個頁面，也就是說需要有三個li，首先寫一下基本dom結構一、基礎結構我使用的是VScode的軟體，可以使用快捷建立dom，就像使用css選擇器一樣的使用

使用:target實現點選按鈕切換圖片的功能（純CSS）

今天使用CSS中的:target選擇器來實現點選按鈕切換相對應的圖片的demo，此demo也可以使用JS來實現。 demo的結構： <a href="#img1">img

Android實現仿微信朋友圈釋出動態（拍照、相簿選擇、照片壓縮、顯示、儲存、縮圖、點選縮圖刪除對應檔案等）附原始碼

原創作品，轉載請註明出處：http://blog.csdn.net/zhang3776813/article/details/52092591 最近專案需求中要用到類似微信朋友圈釋出動態選擇圖片的UI效果，研究了一下，特來分享成果，多的不說來看程式碼。

Android點選縮圖，放大至全圖

最近做一個專案類似於QQ空間，做到照片瀏覽的功能，對於QQ空間中點選圖片放大至全屏，感覺效果很贊，於是也做了個類似的效果。如下。我不知道QQ那個是怎麼做的，我的思路如下：首先，從圖片縮略介面跳轉到圖片詳情頁面，應該是從一個Activity跳轉到另外一個Activ

使用layer 實現點選顯示大圖

由於開發時需要用到點選時顯示大圖的功能遇到百度到一個比較好用的方法,適用程度比較高廢話不多說,直接貼程式碼 #html部分 <div class="imgview"><img src=""https://avatar.csdn.net/B/7/0/1_qq_3187

js實現點選小圖看大圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #o

Fragment+RadioButton實現點選切換頁面效果

首先，我們需要在主佈局檔案中activity_main.xml 放一個容器，方便讓fragment加入進去,底部導航欄使用RedioButton切換頁面，每一個RadioButton都使用了選擇器進行圖片與字型的變化。 &nb

潤乾報表如何實現“點選檢視原圖”效果

在各種涉及圖片的 Web 網站上，無論是搜圖類、社交類、保險服務類，以及 ERP 或檔案管理等內部系統，其中對於圖片通常會提供一種點選圖片檢視原圖的操作，也就是一開始呈現小圖，點選後放大檢視。這種操作我們能在報表中實現嗎？如果可以的話，該怎麼做？是不是需要許多關於前端頁面的知

使用layer 實現點選顯示大圖

由於開發時需要用到點選時顯示大圖的功能遇到百度到一個比較好用的方法,適用程度比較高廢話不多說,直接貼程式碼 #html部分 <div class="imgview"><img src=""https://avatar.csdn.net/B/7/0/

TabLayout + ViewPager輪播圖（雙層巢狀）,側拉展示條目（頭像加listview，點選頭像可切換）PullToRefreshListView重新整理載入

模組簡介： 1.底部：TabLayout + ViewPager輪播圖 2.主頁面可測拉展示頭像，可選擇系統相簿，切換圖片（二級取樣） 3.TabLayout + ViewPager巢狀TabLayout + ViewPager以展示正在上映和 *

純css3實現點選縮圖切換背景圖

相關推薦