HTML5+CSS3實(shí)現(xiàn)下面靜態(tài)頁(yè)面效果

純css是不可行的，滑動(dòng)是要用到j(luò)s的，這邊就不說(shuō)了，簡(jiǎn)單說(shuō)一下滾動(dòng)顯示的效果，就是給這五個(gè)小按鈕各添加animation，不過(guò)這里要注意動(dòng)畫延遲，沒(méi)記錯(cuò)的話就是animation-delay了。然后就是最終位置的問(wèn)題了，自己控制一下

成都創(chuàng)新互聯(lián)是一家專業(yè)提供資溪企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為資溪眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

如何使用html5與css3完成google涂鴉動(dòng)畫

這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬(wàn)惡的ie。但是我們不能以此為理由不去擁抱css3。

我們先來(lái)看html代碼。

復(fù)制代碼

代碼如下:

!DOCTYPE html

html

head

title/title

link rel="stylesheet"

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/

/head

body

div id="logo"

div

class="frame"

img src="img/muybridge12-hp-v.png"/

/div

label for="play_button"

id="play_label"/label

input type="checkbox" id="play_button"

name="play_button"/

span id="play_image"

img

src="img/muybridge12-hp-p.jpg"/

/span

div

class="horse"/div

div class="horse"/div

div class="horse"/div

/div

/body

/html

下面是部分css。

復(fù)制代碼

代碼如下:

*{margin:0px;padding:0px;}

#logo{position: relative;}

.horse{

width:469px;

height:54px;

background: url('../img/muybridge12-hp-f.jpg');

}

.frame{position:absolute;left:0;top:0;z-index: 1;}

#play_button{display:

none;}

#play_label{

width:67px;

height:54px;

display:block;

position: absolute;

left:201px;

top:54px;

z-index: 2;

}

#play_image{

position: absolute;

left:201px;

top:54px;

z-index: 0;

overflow: hidden;

width: 68px;

height: 55px;

}

#play_image img{

position: absolute;

left: 0;

top: 0;

}

這部分代碼沒(méi)太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的。可以自行閱讀position屬性，了解absolute具體作用。

下面是上述html和css代碼完成的頁(yè)面效果。

pic

下面我們來(lái)介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過(guò)

了解更多信息。

我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。

復(fù)制代碼

代碼如下:

@-webkit-keyframes horse-ride {

%

{background-position: 0 0;}

% {background-position: -804px 0;}

}

@-moz-keyframes horse-ride {

% {background-position: 0 0;}

%

{background-position: -804px 0;}

}

下面，我們來(lái)為horse添加css3的動(dòng)畫效果。

復(fù)制代碼

代碼如下:

#play_button:checked ~.horse{

-webkit-animation:horse-ride 0.5s steps(12,end) infinite;

-webkit-animation-delay:2.5s;

-moz-animation:horse-ride 0.5s

steps(12,end) infinite;

-moz-animation-delay:2.5s;

background-position:

-2412px 0;

-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,

0.190);

-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);

}

這里首先介紹:checked和~，:checked是偽類，指當(dāng)#play_button選中時(shí)的css效果，~指的是#play_button的兄弟節(jié)點(diǎn)。

接下來(lái)介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過(guò)animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過(guò)transition和background-position集合起來(lái)，設(shè)置背景的過(guò)渡動(dòng)畫。

最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。

復(fù)制代碼

代碼如下:

#play_button:checked ~#play_image img{

left:-68px;

-webkit-transition: all 0.5s ease-in;

-moz-transition:

all 0.5s ease-in;

}

大家可以自己動(dòng)手嘗試開發(fā)了。

demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁(yè)面的【開始】按鈕之后，頁(yè)面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來(lái)，。

這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬(wàn)惡的ie。但是我們不能以此為理由不去擁抱css3。

我們先來(lái)看html代碼。

復(fù)制代碼

代碼如下:

!DOCTYPE html

html

head

title/title

link rel="stylesheet"

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/

/head

body

div id="logo"

div

class="frame"

img src="img/muybridge12-hp-v.png"/

/div

label for="play_button"

id="play_label"/label

input type="checkbox" id="play_button"

name="play_button"/

span id="play_image"

img

src="img/muybridge12-hp-p.jpg"/

/span

div

class="horse"/div

div class="horse"/div

div class="horse"/div

/div

/body

/html

下面是部分css。

復(fù)制代碼

代碼如下:

*{margin:0px;padding:0px;}

#logo{position: relative;}

.horse{

width:469px;

height:54px;

background: url('../img/muybridge12-hp-f.jpg');

}

.frame{position:absolute;left:0;top:0;z-index: 1;}

#play_button{display:

none;}

#play_label{

width:67px;

height:54px;

display:block;

position: absolute;

left:201px;

top:54px;

z-index: 2;

}

#play_image{

position: absolute;

left:201px;

top:54px;

z-index: 0;

overflow: hidden;

width: 68px;

height: 55px;

}

#play_image img{

position: absolute;

left: 0;

top: 0;

}

這部分代碼沒(méi)太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的?？梢宰孕虚喿xposition屬性，了解absolute具體作用。

下面是上述html和css代碼完成的頁(yè)面效果。

pic

下面我們來(lái)介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過(guò)

了解更多信息。

我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。

復(fù)制代碼

代碼如下:

@-webkit-keyframes horse-ride {

%

{background-position: 0 0;}

% {background-position: -804px 0;}

}

@-moz-keyframes horse-ride {

% {background-position: 0 0;}

%

{background-position: -804px 0;}

}

下面，我們來(lái)為horse添加css3的動(dòng)畫效果。

復(fù)制代碼

代碼如下:

#play_button:checked ~.horse{

-webkit-animation:horse-ride 0.5s steps(12,end) infinite;

-webkit-animation-delay:2.5s;

-moz-animation:horse-ride 0.5s

steps(12,end) infinite;

-moz-animation-delay:2.5s;

background-position:

-2412px 0;

-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,

0.190);

-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);

}

這里首先介紹:checked和~，:checked是偽類，指當(dāng)#play_button選中時(shí)的css效果，~指的是#play_button的兄弟節(jié)點(diǎn)。

接下來(lái)介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過(guò)animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過(guò)transition和background-position集合起來(lái)，設(shè)置背景的過(guò)渡動(dòng)畫。

最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。

復(fù)制代碼

代碼如下:

#play_button:checked ~#play_image img{

left:-68px;

-webkit-transition: all 0.5s ease-in;

-moz-transition:

all 0.5s ease-in;

}

大家可以自己動(dòng)手嘗試開發(fā)了。

什么是HTML5和CSS3

HTML5和CSS3是HTML和CSS的最新版本。

HTML和CSS并不難理解。HTML為構(gòu)成網(wǎng)頁(yè)的主要語(yǔ)言。通過(guò)這種語(yǔ)言，我們可以向計(jì)算機(jī)說(shuō)明網(wǎng)頁(yè)格式、內(nèi)容、顯示效果等等。而CSS則是專門用來(lái)控制網(wǎng)頁(yè)顯示效果的語(yǔ)言。

怎么用html5+css3 實(shí)現(xiàn)圖片輪播

1、首先我們創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，如圖所示包括html，css和img三個(gè)。

2、這里是html文件，引入css和html代碼文件，如圖所示。

3、這里是css文件代碼，上面是div和圖片顯示的效果代碼，后面是動(dòng)畫效果。

4、這里是事件，這里定義了四個(gè)時(shí)間段的狀態(tài)，兼容了ie的。

5、如圖所示這里是效果圖，會(huì)根據(jù)時(shí)間輪播顯示下一張圖片 了。

html5 / css3功能有多強(qiáng)大

你好，首先html5支持Flash播放各種音視頻，無(wú)需安裝插件，html5語(yǔ)法上的改變，也更利于seo，

css3增加動(dòng)畫效果的支持，會(huì)使你的網(wǎng)站更炫，更吸引用戶，帶來(lái)更大的收益

希望對(duì)你有所幫助

html5和css3能實(shí)現(xiàn)哪些效果

ie6是必然會(huì)淘汰掉的！只是一個(gè)時(shí)間段過(guò)渡！

chrome，firefox，opera，android等瀏覽器目前都兼容了css3和html5

html和css3個(gè)人認(rèn)為能流行，比如說(shuō)wordpress搭建的博客，如今wordpress官方已不兼容ie6，很多wordpress博客的朋友也在kil

ie6。

當(dāng)然我的博客也是，我的就沒(méi)兼容ie6，懶得理它。呵呵！