大家都知道，在網(wǎng)頁(yè)制作時(shí)使用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。推薦7款CSS3實(shí)現(xiàn)的動(dòng)態(tài)特效。希望對(duì)大家有所幫助！
CSS3實(shí)現(xiàn)的全屏幕覆蓋層效果
一個(gè)使用CSS3生成的超酷幻燈效果，擁有非常棒覆蓋效果，整體設(shè)計(jì)也非常的流暢大氣，大家可以直接下載演示看效果，或者使用GBdebug來(lái)在線調(diào)試。非常適合用戶首頁(yè)或者產(chǎn)品，作品集的展示。
CSS3實(shí)現(xiàn)的模糊文字效果
非常特別的一款效果，鼠標(biāo)離開(kāi)就會(huì)變得好像有點(diǎn)近視度一樣的模糊，但把鼠標(biāo)移動(dòng)回來(lái)，卻又清晰起來(lái)。這樣效果如果用在情人節(jié)告白上，可能會(huì)更有效果吧。
用CSS3實(shí)現(xiàn)的按鈕效果
用CSS3 實(shí)現(xiàn)的幾種按鈕的效果。當(dāng)鼠標(biāo)滑過(guò)按鈕，就可以看到不同的效果啦！
超棒CSS3動(dòng)畫泡沫按鈕，不影響舊版本瀏覽器使用
非常可愛(ài)的泡泡按鈕！適用于多種風(fēng)格的網(wǎng)站。
CSS3實(shí)現(xiàn)的超棒3D Grid效果
非常棒的一款3D特效，我本人非常喜歡3D效果，因?yàn)樗梢宰屇阏鎮(zhèn)€頁(yè)面看起來(lái)更加立體更加豐滿！如果你也和我一樣，趕快來(lái)收藏吧！
CSS實(shí)現(xiàn)的變戲法小球
#container {
width: 200px;
height: 50px;
position: absolute;
top: calc(50% + 50px);
left: calc(50% + 50px);
opacity: 0;
animation: fadeIn 1s 1;
animation-fill-mode: forwards;
}
.wrap {
animation: translateX 1000ms infinite ease-in-out alternate;
position: absolute;
}
.ball {
width: 50px;
height: 50px;
box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.15) inset;
background-color: #397BF9;
border-radius: 50%;
animation: translateY 500ms infinite ease-in-out alternate;
border: 2px solid black;
}
.wrap:after {
content: '';
width: 50px;
height: 7.5px;
background: #eee;
position: absolute;
bottom: 0;
top: 70px;
border-radius: 50%;
animation: scale 500ms infinite ease-in-out alternate;
}
#wrap2, #ball2, #wrap2:after {
animation-delay: -400ms;
}
#wrap3, #ball3, #wrap3:after {
animation-delay: -800ms;
}
#wrap4, #ball4, #wrap4:after {
animation-delay: -1200ms;
}
#wrap5, #ball5, #wrap5:after {
animation-delay: -1600ms;
}
#ball2 {
background-color: #F4B400;
}
#ball3 {
background-color: #EEEEEE;
}
#ball4 {
background-color: #00A656;
}
#ball5 {
background-color: #E3746B;
}
@keyframes translateX {
100% {
transform: translateX(-150px);
}
}
@keyframes translateY {
100% {
transform: translateY(-187.5px);
}
}
@keyframes scale {
100% {
transform: scale(0.85);
}
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
復(fù)制代碼
使用CSS3 keyframe生成的好玩變戲法小球特效。非常好玩，如果在有個(gè)小丑在旁邊就更完美了不是嗎？
使用CSS3的step()生成的動(dòng)畫效果
在這些DEMO中，將演示如何使用CSS3的step()來(lái)處理動(dòng)畫效果。
運(yùn)動(dòng)的小車：
.contain-car {
animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
animation: drive 4s steps(4, start) infinite;
}
@keyframes drive {
to {
transform: translateX(640px);
}
}
復(fù)制代碼
時(shí)鐘效果：
.second {
animation: tick-tock 60s steps(60, end) infinite;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
復(fù)制代碼
腳爪：
.cover {
animation: walk 7s steps(7, end) infinite;
}
@keyframes walk {
to {
transform: translateX(675px);
}
復(fù)制代碼
進(jìn)度：
.circle {
animation: fill 5s steps(5, start) forwards;
}
@keyframes fill {
to {
opacity: 1;
}
}
復(fù)制代碼
