2. 程式人生 > >純css實現輪播效果

純css實現輪播效果

阿新 • • 發佈：2019-02-07
#frame {/*----------圖片輪播相框容器----------*/ position:absolute;width:300px; height:200px;overflow:hidden;border-radius:5px;} #photos {/*---設定總的圖片寬度--通過位移來達到輪播效果----*/ position:absolute;z-index:9;width:calc(300px * 5);/*---修改圖片數量的話需要修改下面的動畫引數*/} #photos img { float
:left;width:300px;height:200px;} .play{ animation:ma 20s ease-out infinite alternate;/**/ } @keyframes ma {/*---每圖片切換有兩個階段：位移切換和靜置。中間的效果可以任意定製----*/ 0%,20% {margin-left:0; } 25%,40% {margin-left:-300px;} 45%,60% {margin-left:-600px;} 65%,80% {margin-left:-900px;} 85%,100% {margin-left
:-1200px;} } .num{ position:absolute;z-index:10;display:inline-block;right:10px;top:165px;border-radius:100%; background:#f00;width:25px;height:25px;line-height:25px;cursor:pointer;color:#fff; text-align:center;opacity:0.8;} .num:hover{background:#00f;} .num
:hover,#photos:hover{animation-play-state:paused;} .num:nth-child(4){margin-right:30px} .num:nth-child(3){margin-right:60px} .num:nth-child(2){margin-right:90px} .num:nth-child(1){margin-right:120px} #a1:hover ~ #photos{animation:ma1 .5s ease-out forwards;} #a2:hover ~ #photos{animation:ma2 .5s ease-out forwards;} #a3:hover ~ #photos{animation:ma3 .5s ease-out forwards;} #a4:hover ~ #photos{animation:ma4 .5s ease-out forwards;} #a5:hover ~ #photos {animation:ma5 .5s ease-out forwards;} @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:0;} } @keyframes ma2 {0%{margin-left:0;}100%{margin-left:-300px;} } @keyframes ma3 {0%{margin-left:-300px;}100%{margin-left:-600px;} } @keyframes ma4 {0%{margin-left:-600px;}100%{margin-left:-900px;} } @keyframes ma5 {0%{margin-left:-900px;}100%{margin-left:-1200px;} }

相關推薦

純css實現輪播效果

#frame {/*----------圖片輪播相框容器----------*/ position:absolute;width:300px; height:200px;overflow:hidden;border-radius:5px;} #phot

CSS實現輪播效果

ini html out mes 實現 discover body opacity屬性 blog 還沒有學習如何用JS實現輪播圖效果，所以就用CSS做了一個假的~ 氮素！目前只調出三個圖實現輪播，圖越多代碼就越復雜，後面就沒調了，才不是因為我懶_(:з」∠)_ 代碼如下↓↓

【CSS3】選擇器-純css實現輪播

ica 焦點 集合 meta 表示 style disable 設置 :active CSS選擇器： 基本選擇器： 通配符選擇器：*； 元素選擇器：元素標簽； class選擇器：相當於身份證上的名稱； id選擇器：相當於身份證號（唯一性）； 多元素組合選擇器

使用css實現輪播效果

之前寫過一個點選切換的教程，這裡附上鍊接： 與點選切換一樣，首先先製作一個容器，用來容納所顯示的內容： HTML程式碼： <html> <head> <meta charset="utf-8"> <link

HTML+CSS+JS實現輪播效果

1.lunbo.html程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大輪播</tit

實現輪播效果

fault num 設置圖 pro ren pos ont mouseout return HTML <div class="wrap"> <div id="slide"> <ul class="list"> &l

jQuery實現輪播效果(一) - 基礎

時代 例如 自己 -1 fun 時間間隔 order .html 官方 前戲： XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！之前盡管有學過一點HTML。CSS的知識。可

css實現輪播效果圖

http lac play relative osi hid jdi mar active <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

js實現輪播效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title> <style>

swiper3 ajax獲取後臺資料渲染實現輪播效果

1.呼叫介面獲取需要渲染的資料，根據返回的介面資料，渲染節點，緊接著在插入節點的後邊呼叫步驟2編寫的初始化方法 // 將資料加入節點後，插入父節點中 $('#swiper_demo').html(html);

詳解swiper輪播圖的各種坑以及呼叫ajax實現輪播效果

Swiper常用於移動端網站的內容觸控滑動，對於前端開發人員來說使用swiper可以提高工作效率，不再需要寫太多的程式碼，輕輕鬆鬆的實現想要的效果，工作中最常用的就是輪播圖了，下面我來說說如何寫一個簡單的輪播圖： 1、首先需要下載一個swiper.css檔案和一個swiper.js檔案，到時候直

js實現輪播效果(二)

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

使用css實現輪播圖

使用css3實現圖片輪播 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖 工具介紹： 使用的編輯器： Hbuilder 進入正題 html程式碼： <div id="slide_show"> <div id

js實現輪播效果幾種方式

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。   輪播呢，也是各種網站上常見的一種展示效果，這裡我來寫一寫實現輪播的一些簡單方法。 //

自制的Banner輪播圖 ，只需載入圖片地址集合，即可實現輪播效果

BannerView Extends from my another repository”AutoPlayViewpager” BannerView從我的初始專案AutoPlayViewpager改進而來 簡介: 這是一個無限輪播圖片的控制元件

Android實現輪播效果SliderLayout

實現輪播效果有2種方法: (1)使用ViewPager+ImageView,通過Handler進行間隔傳送訊息,實現自動輪播效果 xml程式碼: <android.support.v4.view.ViewPager android:i

Jquery和純JS實現輪播圖（一）--左右切換式

var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的

純css實現圖片翻轉效果

所要掌握知識點 CSS樣式 1.backface-visibility; visible/hidden: 設定當所指定的元素被進行翻轉等操作而使背面顯示時，是否進行顯示還是隱藏 2.transf

react-slider-swiper 用react實現輪播效果，程式碼完整，直接複製下來就能執行

demo1 App.js import React, { Component } from 'react'; import Swiper from 'react-id-swiper'; import './Swiper.css' import './App.css' im

純CSS實現選項卡效果

利用 :focus-within 可以在父節點獲取元素獲得焦點的特性，實現的TAB導航切換 .xxk { width: 300px;margin: 50px auto;padding: 10px;border: 1px solid #ddd;} .nav-box {f