用css3實現背景即背景動畫(高級附源碼)

2021-01-07 酷扯兒

本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫

我們傳統的前端更多的是用javascript實現各種複雜動畫,自從有了Css3 transition和animation以來,前端開發在動畫這一塊有了更高的自由度和格局,對動畫的開發也越來越容易。這篇文章就讓我們匯總一下使用Css3實現的各種特效。

這篇文章參考《css揭秘》這本書,並作出了自己的總結,希望能讓大家更有收穫,也強烈推薦大家看看這本書,你值得擁有。我們將學到

Css3outlineradial-gradientlinear-gradientbox-shadow

1.實現內部虛線邊框

知識點:outline

核心代碼

.dash-border{

width: 200px;

height: 100px;

line-height: 100px;

outline: 1px dashed #fff;

outline-offset: -10px;

}

2.邊框內圓角的實現

知識點:box-shadow

核心代碼

.radius-border{

margin-top: 20px;

width: 180px;

height: 80px;

box-shadow: 0 0 0 10px gray;

}

3.實現條紋背景與進度條

知識點:linear-gradient,repeating-linear-gradient

核心代碼

/* 上 */

background: linear-gradient(to right,#fb3 50%,#58a 0);

background-size: 40px 100%;

box-shadow: inset 0 0 3px #555;

/* 中 */

background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);

background-size: 40px 40px;

/* 下 (可以實現任意角度的漸變,45°時顯示效果最好) */

background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);

4.複雜的背景圖案

知識點:linear-gradient,repeating-linear-gradient,radial-gradient

由於第二個圖會有複雜的隨機動畫,建議大家可以親自嘗試看看效果,核心代碼

<style>

.bg-grid{

margin-top: 20px;

width: 200px;

height: 200px;

background-image: linear-gradient(rgba(255,255,255,1) 2px,transparent 0),

linear-gradient(to right,rgba(255,255,255,1) 2px,transparent 0),

linear-gradient(rgba(255,255,255,.2) 1px,transparent 0),

linear-gradient(to right,rgba(255,255,255,.2) 1px,transparent 0);

background-position: -50px -50px;

background-size: 100px 100px,100px 100px, 100% 10px, 10px 100%;

}

.animate-grid{

animation: move-grid 6s linear infinite;

}

@keyframes move-grid{

0%{

background-position: -50px -50px;

}

30%{

background-position: -100px -100px;

}

60%{

background-position: -100px -150px;

}

100%{

background-position: -50px -50px;

}

}

</style>

<div></div>

<div></div>

紅綠燈以及紅路燈隨機運動動畫

利用css3多背景和position實現紅綠燈和背景色塊移動

核心代碼

<style>

.bg-dot{

margin-top: 20px;

width: 200px;

height: 50px;

background-image: radial-gradient(circle,#0cf 15px,transparent),

radial-gradient(circle,red 15px,transparent),

radial-gradient(circle,yellow 15px,transparent),

radial-gradient(circle,green 15px,transparent);

background-repeat: no-repeat;

background-position: 0 0, 50px 0, 100px 0, 150px 0, 200px 0;

background-size: 50px 50px;

}

.animate-dot{

animation: move-dot 8s linear infinite;

}

.animate-dot2{

animation: move-dot2 6s linear infinite;

}

@keyframes move-dot{

0%{

background-position: 0 0, 50px 0, 100px 0, 150px 0;

}

30%{

background-position: 50px 0, 0 0, 100px 0, 150px 0;

}

60%{

background-position: 50px 0, 100px 0, 0 0, 150px 0;

}

100%{

background-position: 50px 0, 100px 0, 150px 0, 0 0;

}

}

@keyframes move-dot2{

0%{

background-image: radial-gradient(circle,#0cf 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent);

}

30%{

background-image: radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,red 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent);

}

60%{

background-image: radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,yellow 15px,transparent),

radial-gradient(circle,gray 15px,transparent);

}

100%{

background-image: radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,gray 15px,transparent),

radial-gradient(circle,green 15px,transparent);

}

}

</style>

<div></div>

<div></div>

棋盤背景以及棋盤背景隨機動畫

利用背景漸變實現棋盤圖案

核心代碼

<style>

.bg-qi{

margin-top: 20px;

width: 200px;

height: 200px;

background-color: #eee;

background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),

linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);

background-position: 0 0, 20px 20px;

background-size: 40px 40px;

box-shadow: 2px 2px 4px rgba(0,0,0,.4);

}

</style>

<div></div>

偽隨機背景

利用背景漸變,keyframe動畫,實現複雜的偽隨機動畫

核心代碼

<style>

.bg-line-rand{

margin-top: 20px;

width: 480px;

height: 60px;

background-color: #eee;

background-image: linear-gradient(90deg,#fb3 11px, transparent 0),

linear-gradient(90deg,#ab4 23px, transparent 0),

linear-gradient(90deg,#655 41px, transparent 0);

background-size: 41px 100%, 61px 100%, 83px 100%;

box-shadow: 2px 2px 4px rgba(0,0,0,.4);

}

.bg-dot-rand{

margin-top: 20px;

width: 200px;

height: 200px;

background-color: #eee;

background-image: radial-gradient(circle,#fb3 5px, transparent 0),

radial-gradient(circle,#ab4 13px, transparent 0),

radial-gradient(circle,#655 31px, transparent 0);

background-repeat: no-repeat;

background-size: 101px 203px, 147px 60px, 373px 201px;

box-shadow: 2px 2px 4px rgba(0,0,0,.4);

}

.animate1{

animation: move 4s linear infinite;

}

.animate2{

animation: move2 4s linear infinite;

}

@keyframes move{

0%{

background-position: 0 0, 0 0, 0 0;

}

50%{

background-position: -10px 0, 20px 0, 30px 0;

}

100%{

background-position: 0 0, 30px 0, 10px 0;

}

}

@keyframes move2{

0%{

background-position: 0 0, 0 0, 0 0;

}

50%{

background-position: -10px 30px, 20px 0, -40px 80px;

}

100%{

background-position: 0 20px, 60px -20px, 10px 30px;

}

}

</style>

<div></div>

<div></div>

<div></div>

5.折角效果

知識點:linear-gradient

核心代碼

<style>

.fold{

margin-left: auto;

margin-right: auto;

margin-bottom: 20px;

width: 200px;

height: 80px;

color: #fff;

line-height: 80px;

text-align: center;

background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5) 0) no-repeat 100% 0 / 2em 2em,

linear-gradient(-135deg,transparent 1.4em,#06c 0);

}

.linear{

background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5)) no-repeat 100% 0 / 2em 2em,

linear-gradient(-135deg,transparent 1.4em,#06c);

}

</style>

<div>折角效果哦</div>

<div>折角效果哦</div>

2.內陰影圓折角效果

核心代碼

<style>

.fold-1{

margin-left: auto;

margin-right: auto;

margin-bottom: 20px;

position: relative;

width: 200px;

height: 80px;

border-radius: .5em;

color: #fff;

line-height: 80px;

text-align: center;

background: linear-gradient(-150deg,transparent 1.5em, #58a 0);

}

.fold-1::before{

content: "";

position: absolute;

top: 0;

right: 0;

background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;

width: 1.73em;

height: 3em;

transform: translateY(-1.3em) rotate(-30deg);

transform-origin: bottom right;

border-bottom-left-radius: inherit;

box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);

}

</style>

<div>折角效果哦</div>

6.自適應文本的條紋背景

知識點:linear-gradient,line-height,background-origin

核心代碼

<style>

.stripe-bg{

padding: .5em;

line-height: 1.5em;

background: beige;

background-size: auto 3em;

background-origin: content-box;

background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);

}

.stripe-bg > p{

margin: 0;

}

</style>

<div>

<p>hello you</p>

<p>hello you</p>

<p>hello you</p>

<p>hello you</p>

<p>hello you</p>

</div>

7.自定義的下劃線實現

知識點linear-gridient

小夥伴們注意到了嗎?默認的下劃線會將文字穿過,而上面的不會呦!

核心代碼

<style>

.my-line{

line-height: 1.4em;

background: linear-gradient(gray,gray) no-repeat;

background-size: 100% 1px;

background-position: 0 1.15em;

text-shadow: .05em 0 #fff, -.05em 0 #fff;

}

</style>

<div><span>i have your big apple.you have a too? hi hi hi.</span></div>

相關焦點

  • 前端工程師必備的css3動畫技巧(附源碼)
    本文是筆者之前文章用css3實現驚豔面試官的背景即背景動畫(高級附源碼)的續篇也是介紹css3技巧的文章,因為css這塊知識難點不是很多
  • 前端工程師必備的css3動畫技巧
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫本文是筆者之前文章用css3實現驚豔面試官的背景即背景動畫(高級附源碼)的續篇也是介紹css3技巧的文章,因為css這塊知識難點不是很多,更多的在於去熟悉css3的新特性和基礎理論知識。
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    你將收穫網站換膚設計方案介紹:target偽類介紹和用法以及如何使用css實現網站換膚transition動畫以及如何用純css實現焦點圖動畫效果展示1.網站換膚2.焦點圖動畫實現思路1.網站換膚通常我們實現網站換膚都基於如下方式實現:方案一: 使用OOCSS模式,通過js動態切換公共類名來達到換膚效果方案二
  • 前端—— CSS3動畫
    雖說IE9以及更早版本的IE瀏覽器都不支持css3動畫,但是IE6-8瀏覽器已是江河日下,使用谷歌瀏覽器、火狐瀏覽器、IE10+瀏覽器以及移動端瀏覽器等這些支持css3動畫的瀏覽器的人數越來越多,所以如果很簡單的就能讓一部分人獲得更好的用戶體驗,那何樂而不為呢。
  • CSS3滑鼠經過動畫特效
    在網際網路項目開發過程中,經常需要用到特效,以增強視覺特殊效果,給用戶更好的體驗效果;今天給大家分享的是一款css3滑鼠經過動畫特效,在該特效中,當滑鼠經過圖片時,圖片略微放大,底部遮罩層出現,同時圖片的描述文字和連結會以動畫的方式出現在遮罩層之上,非常炫酷。
  • 8個純CSS3製作的動畫應用及源碼
    它們是純CSS3/HTML5實現3D波浪形動畫和HTML5 WebGL實驗 超酷的HTML5 Canvas波浪牆,其中一款利用WebGL讓3D效果渲染得淋漓盡致,不過也消耗CPU。今天我們要再分享一款基於HTML5 3D的點陣列波浪翻滾動畫特效,同樣是非常的壯觀。
  • 因為CSS3,動畫將一切皆有可能
    熱火朝天的css3無疑吸引了很多前端開發者的眼球,然而在css3中的動畫屬性則是新功能中的主打招牌,說到css3的動畫屬性不得不讓人想起這三個屬性:Transform﹑Transition﹑Animation。
  • css3動畫怎麼實現旋轉效果
    華清遠見成都中心高端IT就業培訓專家伴隨HTML5而來的CSS3讓前端小夥伴們可以用簡單的CSS樣式即可寫出動畫效果來,而在這之前,一提到動畫我們可能會想到JavaScript,Flash,等。如果是用JavaScript那倒也不是很糟糕的事啦,但如果寫出來的效果非要強迫客戶端安裝第三方插件才能顯示,畢竟不是很理想。這也就是為什麼谷歌會不遺餘力地推廣他所主導的開源項目WebRTC (Web Real-Time Communication),把實時通訊的功能都做進瀏覽器,像視頻通話這樣的高級應用直接在JavaScript裡調用幾個瀏覽器API即可實現!這在以前想都不敢想。
  • 巧用css圓角實現有點意思的加載動畫
    的圓角屬性來實現有點意思的加載動畫.以上是設置一個邊的border-color的樣子和設置四個邊的border-color的樣子, 所以說實現餅圖用css就夠用了.動畫是不是可以實現下面的加載動畫了?動畫時經常會用到transform 和 animation, 所以建議大家把這兩個屬性掌握.實現更優雅的圓環加載動畫有了以上的css知識, 我們再來思考一下, 如何用最簡短的代碼實現一個圓環呢?
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    但隨著對用戶體驗的越來越重視,對交互體驗要求的提高以及css3等新標準的出現,使得web更加大放異彩, 各種動效的實現都變得非常容易.筆者在研究materialUI框架時對於它的交互及其讚嘆.所以為了自己能實現一個類似materialUI的按鈕點擊動畫,並封裝到自己的UI庫中,筆者特地總結了一些思路,希望可以和廣大的前端工程師們一起探討.
  • SVG動畫、CSS3動畫常用知識點全解析
    用type屬性指定transform需要改變的屬性(translate, scale, rotate, skewX, skewY)。3.animateMotion之前所有動畫功能在css裡都可以用animation實現,但<animateMotion>可以讓父元素沿著指定的路徑運動。
  • 分享一個超級好用的PPT技能—高級背景填充,你確定不試一試?
    ,但是這種缺乏設計感的背景,絲毫不能引起觀看者的共鳴,其實你只要學會這一招-背景填充,就能讓你的PPT提升一個檔次。背景填充其實就是將整張圖片用形狀的格式鋪滿整個幻燈片的「最底層」,這樣它不屬於形狀,我們可以在其上自由插入各種內容。其與原始的白色背景唯一的區別就是它長得好看。我們通過背景填充的效果,可以讓PPT顯得更加高級,更加賞心悅目。
  • 推薦9款使用CSS3實現的超酷動畫效果
    大家都知道,在網頁製作時使用CSS技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。
  • 背景音樂學年畢業論文,對動畫中背景音樂藝術存在重要作用的
    摘要:動畫是以畫面和聲音為主要傳播手段的,畫面是它的視覺形象,配音與音樂則是它的聽覺形象。背景音樂對動畫畫面進行補充、深化、烘託和渲染,使動畫更加細膩、形象、豐富、生動。畫面的情感和情緒效果由於動畫的背景音樂的存在而變的更為生動。
  • 動畫裡的背景圖怎麼畫 這些動畫作品給你靈感!
    動畫裡的背景圖怎麼畫?這些動畫作品給你靈感!畫師Orks772作品來了,Orks772的動畫裡的背景圖畫得特別棒,畫動畫裡的背景圖可以參考Orks772的作品,喜歡畫師Orks772的小夥伴別錯過哦,畫師Orks772的作品很受歡迎,畫師Orks772的動畫裡的背景圖都相當棒,臨摹學習的時候存一下畫師Orks772的作品準沒錯,下面進入今天畫師Orks772的作品分享吧,一起感受畫師Orks772的筆下世界!
  • 12個經典大氣的HTML5/CSS3應用動畫
    1、HTML5/CSS3自定義下拉框 3D卡片摺疊動畫之前我們分享過一款CSS3帶小圖標下拉菜單,它更多的是一款菜單,但是今天要分享的一款CSS3自定義下拉框取代了傳統的Select樣式,用不一樣的風格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片摺疊動畫效果,非常酷。
  • 傳智播客解讀Css3新特性、常用屬性及應用案例
    在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。下面,傳智播客將針對Css3的新特性、常用屬性及應用案例進行解讀。一、 Css3新特性與常用屬性1.傳智播客解讀Css3—css3和css2的區別css3=css2擴展和優化2.傳智播客解讀Css3—css3的新增的語法l偽類選擇器l選擇器:first-child第一項
  • 基於Vue實現一個有點意思的拼拼樂小遊戲
    回到我們的小遊戲開發,我們更多的是javascript和css3的掌握程度,在學習完這篇文章之後相信大家對javascript和css3的編程能力都會有極大的提升,後面還會介紹如何使用canvas實現生成戰績海報圖的功能。
  • 爆笑PS:給我P個高級點的背景,大神:高級會所背景夠不夠?
    爆笑PS:給我P個高級點的背景,大神:高級會所背景夠不夠?網友:時間過得真快,眼睛一晃不知不覺中大四了,馬上就要畢業加入求職大軍了。不過在象牙塔裡待得太久了突然出去找工作這讓我非常不適應,根本沒有什麼經驗就跟一隻小白鼠一樣。
  • 花20萬日元製作一集動畫,質量如何呢?背景直接用實物圖!
    最近在補新番的時候,老白髮現了一部簡介很有意思的動畫,這部動畫簡介裡有這麼一句話吸引老白:這部番是通過眾籌200萬日元製作的TV動畫,預計全10話!這部新番的名字叫《超普通都市柏傳說R》,是一部地方性宣傳動畫,目的是推廣【日本千葉縣柏市】,讓更多的人了解它。這類方式在日本屢見不鮮,比如以前出的動畫《你還是不懂群馬》,目的是介紹群馬縣的民俗和美食特色;還有《八十龜醬觀察日記》,給我們介紹了愛知縣風土人情和美食,用動畫的形式來讓更多人知曉那裡。