用css3動畫製作幻燈片效果實現不了的問題
前段時間有一次去面試,面試官問到我一個如何用css3實現一個幻燈片效果的問題,當時想了半天沒想出來,結果就跪了。
我發現類似於這些小例子經常容易問到,比如讓實現一個倒計時器,三列布局,還有一些事件比如拖拽事件,touch事件,冒泡事件;還有閉包,匿名函式這些。。。
扯的有點遠了,回到正題把。我在w3cSchool學習了css3 animation,然後想用下面的程式碼實現一個幻燈片效果卻怎麼也顯示不出來。
html:
<div class="center">
<ul class="photoController">
<li><img class="photoStyle" src="image1.jpg"></li>
<li><img class="photoStyle" src="image2.jpg"></li>
<li><img class="photoStyle" src="image3.jpg"></li>
<li><img class="photoStyle" src="image4.png"></li>
</ul>
</div>
css:
.center {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.photoController {
margin: 0;
padding: 0;
list-style: none;
-webkit-animation: ani 20s infinite;
}
@-webkit-keyframes ani {
from to {
top: 0;
}
12.5% {
top: 0;
}
25% {
top: -400px;
}
50% {
top: -800px;
}
75% {
top: -1200px;
}
}
.photoStyle {
width: 600px;
height: 400px;
}
查了好多次程式碼,就是實現不了。感覺也沒什麼問題,想了一下原理,其實就是設定四張圖片的定位,height:400px,最開始距第一張圖片上面0px,然後每隔一定的時間第一張圖片距上面-400px,第二張圖片最開始距上面400px,此時就變成了0px,依次這樣。
無意中看到了div的定位是relative,我好奇為什麼不用absolute呢,然後實驗了一下,如果用absolute,那麼我在html下面再加上一些程式碼如下
<div class="center">
<ul class="photoController">
<li><img class="photoStyle" src="image1.jpg"></li>
<li><img class="photoStyle" src="image2.jpg"></li>
<li><img class="photoStyle" src="image3.jpg"></li>
<li><img class="photoStyle" src="image4.png"></li>
</ul>
</div>
<div>
<h1>這個資料會顯示在什麼地方?</h1>
</div>
下面加的一行字會被圖片擋住,也就是說<h1></h1>這個標籤會忽視absolute,為什麼呢?因為如果不設定定位,預設是static定位。
static
:沒有定位,元素出現在正常的流中,忽略(
top,bottom,
left,right
或者
z-index
說明)
感覺問題找到了,我沒有設定ul的定位,那麼它預設就是static定位,那麼是不是就會忽視top的設定,試驗了一下,給 .photoController {
positon:absolute;
margin: 0;
padding: 0;
list-style: none;
-webkit-animation: ani 20s infinite;
}
加上了定位,問題解決了。
相關推薦
用css3動畫製作幻燈片效果實現不了的問題
前段時間有一次去面試,面試官問到我一個如何用css3實現一個幻燈片效果的問題,當時想了半天沒想出來,結果就跪了。 我發現類似於這些小例子經常容易問到,比如讓實現一個倒計時器,三列布局,還有一些事件比如拖拽事件,touch事件,冒泡事件;還有閉包,
HTML5 - 用CSS3動畫製作場景切換效果(移動,旋轉,淡入淡出等)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5-頁面切換動畫</title> 6 <l
效果使用css3動畫製作,但是動畫會導致頁面抖動閃屏
2、問題原因 效果使用css3動畫製作,但是動畫會導致頁面抖動閃屏 3、解決方案 使用到動畫的樣式設定如下樣式,可解決 -webkit-backface-visibility: hidden;(設定進行轉換的元素的背面在面對使用者時是否可見:隱藏) // 如果有3d加上下面句 ,沒有可省略 -webk
h5新標籤和css3動畫製作一個滑鼠懸停的動畫效果
<span style="font-size:18px;"><div class="grid wow zoomIn"> <figure class="effect-bubba"> <
css3動畫在安卓上不生效
@keyframes anim{ 0{transform:translate(0,100px);} 100%{transform:translate(0,-50%);} } 就是因為少在動畫的起始位置0後面寫100%在安卓手機不能生效在蘋果手機生效》》》查了很久才發現的》》
css3動畫製作太極圖
css3:animation製作太極圖(勻速逆方向旋轉)【轉載】: 我們先來看下效果圖截圖: 製作時主要用到了css3的animation屬性 html: <div class="taiji"> <div class="
解決vuejs 創建數據後設置對象的屬性實現不了雙向綁定問題
asc PE quantity VM type 響應 rip 頁面 RR 拋出踩坑:vue創建後的數據,自定義設置對象的屬性,實現不了雙向綁定 當業務場景,需要在請求接口數據新增自定義的屬性 let foodList = [ {title: ‘回鍋肉‘, price:
Android camera.action.CROP 截圖 有些版本實現不了
我是想實現拍照和或者選擇相機中的照片,剪下後新增都畫板然後進行塗鴉。 這個是sony 安卓4.1.2系統 然後就是按了右上角那個剪下之後沒有任何反應 而在安卓2.3.5 G10上 就有一個儲存的按鈕,按了之後就可以將剪下的圖片載入到畫布上了 這是我的程式碼 @Overrid
ToolTip動態提示,實現不了
文字框 當輸入的時候, 提示 輸入內容。, 用ToolTip,(已經規定了,用這個控制元件,其他控制元件勿擾。。。。。 不知道怎麼搞的,ToolTip 只能 顯示 註冊的時候,第一次設定 顯示的內容 然後就無法改變了。。。。。。。。。 我想動態提示,如何實現???
關於“用VS2010的C++匯入ADO匯入不了,提示無法開啟原始檔msado15.tlh”的問題
vc++2010中,要使用ado操作資料庫,所以在stdafx.h中引入了ado的dll庫,引入程式碼如下: #import “C:/Program Files/Common Files/System/ado/msado15.dll” no_namespace renam
canvas簡單封裝一個echarts實現不了的餅圖
說明效果展示:我用echars很久了,如果出現如上圖所示樣式的餅圖,我用echarts很難實現,官方給的文件沒有這種模式的餅圖。試過用d3和canvas分別畫餅圖,因為本人對canvas比較熟悉和d3還要引入外掛,本著輕量化的原則,所以採用canvas封裝。官方餅圖兩種模式:
用css3和canvas實現的蜂窩動畫效果
image() all nim 自己 clas 函數 顯示 var 不兼容 近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性,大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速,這會降低移動端的性能需求。 今
詳解用CSS3製作圓形滾動進度條的動畫效果
今天手把手教大家用CSS3製作圓形滾動進度條動畫! 先看一下效果圖,會提升我們的學習興趣喲: 第一種效果: html結構: <div id="progress"> <span></span> </div>
css3動畫實現簡單的幻燈片效果
css3 Animation屬性 css3的animation屬性可以像Flash製作動畫一樣,通過關鍵幀控制動畫的每一步,實現複雜的動畫效果。@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目
詳解用CSS3製作圓形滾動進度條動畫效果
主題 今天手把手教大家用CSS3製作圓形滾動進度條動畫,想不會都難!那麼,到底是什麼東東呢?先不急,之前我分享了一個css實現進度條效果的部落格《CSS實現進度條和訂單進度條》,但是呢,那篇部落格只是製作出來效果而已,並沒有動畫效果,因為當時正期末複習
用css3實現滑鼠移入在原來的層上面顯示另一個層的動畫效果
演示效果 這是當滑鼠移入會在原來的層上顯示另一個層的動畫,我這個頁面裡有很多項都需要用這個效果,之前我想用js來實現這個效果,不過彈出來的層的位置不好固定,特別是頁面裡有太多這個效果,而最麻煩的還是當視窗縮小時彈出的層會亂飄,後來我使用css3動畫來實現,不僅在
css3實現幻燈片效果
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
css3動畫 文字自動縮放 圖片自動移動效果的製作
佈局就不寫了 直接上樣式 .p_tx a{animation: rotate 0.3s ease-in-out alternate infinite;margin-left:20px;} .p_tx1 img{animation: skew 1.5s ease-in-
[CSS3學習]用CSS3做一個圓圈等待條動畫效果
前面學習瞭如何用CSS3繪製一個自定義的扇形,現在想利用那個扇形加上動畫方法來實現一種圓圈等待條動畫效果,算是該方法的一種應用吧。 目標:用CSS3實現一種圓圈等待條動畫效果 想法: 和之前描繪扇形不同,這次繪製牽扯到大於半圓的扇形,可以同樣的方法繪製兩個半圓進行組合實現;
用css3實現頁面背景圖片不重複
也許許多人在做網頁的時候都會遇到過一個這樣的問題,什麼問題呢那就是跟下面這張圖片一樣的問題 出現這樣的問題的原因是因為div的大小大於背景圖片的大小,從而導致了背景圖片的重複,其實在css3中解決像這樣的問題特別簡單隻需要新增一個這樣的樣式即可 background