對(duì)于 css3 的喜愛(ài)可謂日漸增加，無(wú)奈自己很忙，沒(méi)有多少時(shí)間來(lái)研究，這段時(shí)間也做了很多這方面的項(xiàng)目，比如類(lèi)似于QQ 的IM溝通工具界面，比如新的博客界面，比如這個(gè)css 幻燈片演示(拿來(lái)的)。

如果讓我來(lái)做這個(gè)幻燈片的效果，我想可能跟這個(gè)不太一樣，至少我是沒(méi)有用到這種transform: translateY(430px); 、transform: translateX(-310px); 和transition-delay: 0.4s;

好久沒(méi)有動(dòng)手寫(xiě)css3的效果了，都有些不記得，回歸了之前寫(xiě)過(guò)的文章，一起來(lái)看看這位同學(xué)的特效是怎么煉出來(lái)的.transform, transition , animate

先說(shuō)一下幻燈片是怎么弄出來(lái)的。之前我在微博上也發(fā)過(guò)一個(gè)手風(fēng)琴的案例，跟這個(gè)幻燈片也是用的同樣的原來(lái)。查看手風(fēng)琴演示

這個(gè)案例里面我們使用到的技術(shù)就是第二種了。但它使用的卻不是這種簡(jiǎn)單的display:none和display:block的方式，而是使用了css3的另外一個(gè)屬性就是，

二、移動(dòng)translate

移動(dòng)translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)(也就是X軸和Y軸同時(shí)移動(dòng))；translateX(x)僅水平方向移動(dòng)(X軸移動(dòng))；translateY(Y)僅垂直方向移動(dòng)(Y軸移動(dòng))，具體使用方法如下：transform:translate(100px,20px):

transform:translateX(100px):

transform:translateY(20px):

目的就是保持跟我們平時(shí)制作幻燈片滾動(dòng)的做法類(lèi)似，我們都是通過(guò)定義一個(gè)里面的盒子向左浮動(dòng)，然后外面的盒子隱藏，通過(guò) JS 來(lái)控制里面的盒子自動(dòng)滾動(dòng)和點(diǎn)擊的時(shí)候滾動(dòng)。 #slider{width:3832px;transition:0.6s cubic-bezier(0.77,0,0.175,1)}.slide{width:958px;height:470px;float:left}#trigger1:checked ~ #wrapper #slider{transform:translateX(0px)}#trigger2:checked ~ #wrapper #slider{transform:translateX(-958px)}#trigger3:checked ~ #wrapper #slider{transform:translateX(-1916px)}#trigger4:checked ~ #wrapper #slider{transform:translateX(-2874px)}

至于第一屏的移動(dòng)上去的菜單效果很炫，同樣是用到了，translateX(-310px)，然后顯示這個(gè)隱藏的盒子，移動(dòng)菜單上面的鏈接逐步出來(lái)則是用到了 .scroll{width:620px;height:430px;transition:0.3s ease-in-out;transform:translateX(0px)}.left{width:310px;height:430px;background:#9bd0d5;float:left}.right{width:310px;height:310px;padding-top:120px;font-size:15px;line-height:2;background:#e0613f;float:left}.right a{opacity:0;display:block;padding-left:20px;color:#f9edd0;transition:transform 0.3s,opacity 0.3s;transform:translate(-10px,5px)}.right a:hover{background:#555555}.right a:nth-of-type(1){transition-delay:0.4s}.right a:nth-of-type(2){transition-delay:0.5s}.right a:nth-of-type(3){transition-delay:0.6s}.right a:nth-of-type(4){transition-delay:0.7s}.right a:nth-of-type(5){transition-delay:0.8s}

每一個(gè)的子節(jié)點(diǎn)對(duì)應(yīng)于一個(gè)transition-delay,逐步增加，形成了鏈接逐步出來(lái)的效果。

這個(gè) css3幻燈片 真的是超贊的，我很喜歡。如果能夠讓他自動(dòng)一直自動(dòng)滾動(dòng)就好了，應(yīng)該有辦法吧。

去看看這個(gè) 作者 的網(wǎng)站吧

演示 css3小游戲演示

本條技術(shù)文章來(lái)源于互聯(lián)網(wǎng)，如果無(wú)意侵犯您的權(quán)益請(qǐng)點(diǎn)擊此處反饋版權(quán)投訴

本文系統(tǒng)來(lái)源：php中文網(wǎng)

總結(jié)

以上是生活随笔為你收集整理的html普通幻灯片效果,超酷的CSS3幻灯片效果-前端开发博客_html/css_WEB-ITnose的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。