2. 程式人生 > >利用CSS3實現圖片切換特效

利用CSS3實現圖片切換特效

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

利用label標籤和:checked，並使用到了transform和transition屬性。實現簡單，相比JS而言，非常方便，且效果更佳，有興趣可以拷貝程式碼，修改圖片路徑，執行看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="關鍵詞一，關鍵詞二">
    <meta name="Description" content="網站描述內容">
    <meta
 
 name="Author" content="劉豔">
    <title></title>
    <style>
        #content{width:800px;margin: 30px auto;position: relative;}
        input[type="radio"]{display: none;}
        input[type="radio"]~img{width: 800px;position: absolute;top:0px;left:0px;opacity: 0;height: 500px;transform:scale(1.1
 
);transition:all 1s;}
        input:checked +label + img{opacity: 1;transform:scale(1.0);}
        input:checked +label img{border: 8px solid #FFDA34; opacity: 1.0; transition: all 1s;}
        label {display: inline-block;width: 134px;margin: 5px 8px;}
        label img{ opacity:0.5; width: 134px; margin-top
 
:500px;height: 75px;border:8px solid #000;}
    </style>
</head>
<body>
    <div id = "content">
        <input type = "radio" name="carousel" id = "list1" checked>
        <label for="list1">
            <img src="../images/photo1.jpg">
        </label>
        <img src="../images/photo1.jpg">

        <input type = "radio" name="carousel" id = "list2">
        <label for="list2">
            <img src="../images/photo2.jpg">
        </label>
        <img src="../images/photo2.jpg">

        <input type = "radio" name="carousel" id = "list3">
        <label for="list3">
            <img src="../images/photo3.jpg">
        </label>
        <img src="../images/photo3.jpg">

        <input type = "radio" name="carousel" id = "list4">
        <label for="list4">
            <img src="../images/photo4.jpg">
        </label>
        <img src="../images/photo4.jpg">

        <input type = "radio" name="carousel" id = "list5">
        <label for="list5">
            <img src="../images/photo5.jpg">
        </label>
        <img src="../images/photo5.jpg">
    </div>
</body>
</html>

靜態的效果圖如下：
這裡寫圖片描述

相關推薦

利用CSS3實現圖片切換特效

利用label標籤和:checked，並使用到了transform和transition屬性。實現簡單，相比JS而言，非常方便，且效果更佳，有興趣可以拷貝程式碼，修改圖片路徑，執行看看效果。 <

利用JS實現圖片切換

事件舉例: 1.要求實現效果：當滑鼠懸停在照片上時更換為另一張照片；當滑鼠離開時，還原為本來的圖片。 說明： 1.一般來說對於一個事件問題處理起來分為三個步驟： （1）獲取事件 （2）繫結事件 （3）書寫事件驅動程式 程式碼如下 <!doctype html> <htm

純CSS3實現圖片展示特效

Web瀏覽器端的特效越來越讓人興奮，通過CSS和JavaScript，各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代

利用MATLAB實現圖片切換動畫效果詳解

利用MATLAB實現圖片切換動畫效果內容摘要：本博文介紹MATLAB圖片切換動畫效果的製作以及GIF檔案儲存，並結合具體程式碼詳細解釋。介紹了利用MATLAB程式設計進行幾幅圖片的輪流切換，切換時實現與幻燈片切換相似的炫酷的圖片切換特效。其中涉及一些MATLAB的高階圖形設計

利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法

class ansi clas form屬性 css transform 大小 方法 鼠標懸停 1.改變background-size屬性 將圖片作為某個html元素的背景圖片，用transition屬性改變圖片的大小。 1 .container{ 2 ba

CSS3 實現圖片倒影炫酷特效

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250

web前端實驗一：利用Js捕獲滑鼠事件實現圖片切換

    很多時候在做web時，頭疼的不是功能的實現，而是前臺的介面，下面是介紹關於利用javascript捕獲滑鼠事件的實驗 實驗目的：滑鼠指向某一圖片時，把該圖片切換為指定圖片，離開時回覆原來圖片。 實驗用途：製作web導航、強調某一功能時非常常用。 直接附上原始碼，非

純css3實現圖片自動切換

實現圖片自動切換需要用到的主要是css3裡面的過渡這一節的內容。 大致思路是這樣的： 1、將圖片設定為li的背景圖片； 2、規定一個@keyframes的規則使得圖片按照這個規則進行切換； 3、設定每

css3全屏背景圖片切換特效

一般做圖片切換效果，都會使用JS或者jQuery指令碼，今天發現，其實只用CSS也可以實現。試試效果吧。 效果圖：程式碼如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

css3實現圖片平滑切換

疑惑點透徹分析，側重點：hover實現圖片切換 css部分： <style> #div01{ width:200px;

原生js+css3實現圖片自動切換，圖片輪播

運用CSS3transition及opacity屬性 製作圖片輪播動畫 自己這兩天根據用js來控制觸發CSS3中transition屬性，從而寫出來的以CSS3動畫為基礎，js控制過程的圖片輪播

利用js實現滑鼠切換控制元件背景圖片

需要三張不同的圖片，預設背景圖片為img1，滑鼠放在控制元件上方背景圖片為img2，滑鼠離開背景圖片恢復為img1，滑鼠點選控制元件背景圖片為img3. 主要應用於導航欄監聽滑鼠的位置和狀態。 &l

CSS3實現Loading動畫特效

搜狗 tran color orm for ima utf pad body 查看效果：http://hovertree.com/texiao/css3/43/代碼如下： <!DOCTYPE html> <html> <head>

利用Selenium實現圖片文件上傳的兩種方式介紹

最簡 pfile 狀態 blog nbsp ftw fin send find 在實現UI自動化測試過程中，有一類需求是實現圖片上傳，這種需求根據開發的實現方式，UI的實現方式也會不同。 一、直接利用Selenium實現 這種方式是最簡單的一種實現方式，但是依賴於

php利用gd實現圖片的邊框

col spl tmp pic ora play 圖片 取圖 from 1 <?php 2 3 //實現兩張圖片合並 並內圖片有一定的邊框 4 5 $file = ‘image/qr_1047.png‘; 6 $logo = ‘image/log

css3實現圖片木桶布局

wrap ado 設置 ctype adding selector 前端學習 i++ creat 思路： 1、容器flex布局2、圖片定高、超出換行3、圖片都設置 flex-grow: 1; 以充滿整行4、圖片都設置 object-fit: cover; 以解決圖片變形5、

css3實現圖片的變大變小

out transform head body inner mar orm add gin 主要是使用 css3的animation，scale等於1是原圖大小，大於1是把圖片放大，小於1 是把圖片縮小。animation-delay用來延遲5秒觸發這個動畫 <

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

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

利用bootstrap實現圖片Carousel效果

span per inner boot 頭文件 app cat carousel inter 引入頭文件： <link rel="stylesheet" href="bootstrap.min.css"> <link rel="styl

深度學習 （四）Keras利用CNN實現圖片識別（Mnist、Cifar10）

視覺集        視覺資料庫是用來提供給圖片識別領域用素材，目前各個教材常用的主要有手寫數字識別庫、10中小圖片分類庫，詳細介紹如下： Mnist       &