CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效代碼

春節(jié)快到了,因?yàn)橐咔橐呀?jīng)好久沒有回老家了,今年終于可以回家過年了,我已經(jīng)抑制不住自己激動的心情了。因此,我利用css3的旋轉(zhuǎn)做了一個福到了的特效,而且是雙旋轉(zhuǎn)哦。
1、實(shí)現(xiàn)思路
其實(shí)看上去并不難,首先需要一個喜慶的紅色背景,做為我們貼福字的背景大紅色;這個大紅色的貼紙首先做到第一次旋轉(zhuǎn);但實(shí)現(xiàn)過程中,因?yàn)榧t色背景已經(jīng)做過旋轉(zhuǎn),如果福字還在里面做為內(nèi)部元素來布局,福字肯定會跟著旋轉(zhuǎn),那么就不好控制;所以我決定將紅色紙背景和大福字拆分元素布局,單獨(dú)對福字進(jìn)行樣式處理,旋轉(zhuǎn),再進(jìn)行渲染;更重要的是要將福字與紅色背景的居中處理。
2、大紅紙的渲染過程
大紅紙這塊的需求呢,首先是正方形,寬高相等;然后是旋轉(zhuǎn)45度;旋轉(zhuǎn)我們這里采用transform屬性,代碼如下:
<!-- html部分 --> <div class="fu-box"></div> // css部分 .fu-box { position: absolute; top: 100px; left: 100px; width: 300px; height: 300px; background: red; transform: rotate(45deg); }
3、錯誤的福字布局
開始我想得是將福字元素布局到大紅色元素內(nèi)部,但其實(shí)一旦外層布局旋轉(zhuǎn)過45度以后,內(nèi)部的福字旋轉(zhuǎn)就很沒有規(guī)律性可言,內(nèi)部的福字如果想調(diào)整到那種福到了的效果,需要做很大程度的調(diào)整,代碼如下:
<!-- html部分 --> <div class="fu-box"> <div class="fu-txt">福</div> </div> // css部分 .fu-txt { position: absolute; top: 37px; left: 77px; font-size: 180px; color: #000; transform: rotate(134deg); }
這段代碼雖然也將福字調(diào)整到了居中的位置,但top值,left值,和旋轉(zhuǎn)后的rotate值都不如之前預(yù)想的那么有規(guī)律性
4、正確的福字布局
所以我后來想到,將內(nèi)部的福字布局和外部的紅色紙張布局進(jìn)行拆分,也就是使用2個div元素進(jìn)行布局。這樣,外部的紙張通過rotate旋轉(zhuǎn)45度,對內(nèi)部的福字布局就不會造成影響。而內(nèi)部福字布局也可以根據(jù)自己的原點(diǎn)進(jìn)行旋轉(zhuǎn)布局,這樣就有規(guī)律的多,進(jìn)行了180度旋轉(zhuǎn)。
而仍然需要做的就是內(nèi)部福字和外部紙張的定位顯示,這里需要為內(nèi)部進(jìn)行absolute絕對定位布局,調(diào)整top和left定位即可。代碼如下:
<!-- html部分 --> <div class="fu-box"></div> <div class="fu-txt">福</div> // css部分 .fu-txt { position: absolute; top: 150px; left: 162px; font-size: 180px; color: #000; transform: rotate(180deg); }
最終實(shí)現(xiàn)效果如下:
5、完整源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>福到了</title> <style> * { margin: 0; padding: 0; } body { background: #000;; } .fu-box { position: absolute; top: 100px; left: 100px; width: 300px; height: 300px; background: red; transform: rotate(45deg); } .fu-txt { position: absolute; top: 150px; left: 162px; font-size: 180px; color: #000; transform: rotate(180deg); } </style> </head> <body> <div class="fu-box"></div> <div class="fu-txt">福</div> </body>
6、真實(shí)開發(fā)工作中可能沒那么復(fù)雜
真實(shí)工作中,如果你需要實(shí)現(xiàn)一個類似這樣的需求,很可能UI設(shè)計(jì)師會直接給你一張圖片,讓你直接去進(jìn)行定位到網(wǎng)頁中的某個位置,不會像本文中這樣復(fù)雜,又考慮是否需要雙旋轉(zhuǎn),又考慮定位是否居中的問題。
可能工作中你直接一個Img標(biāo)簽,或者采用background類似的方式就實(shí)現(xiàn)了。而很多人可能img標(biāo)簽和background背景圖片還有點(diǎn)暈。
而我的理解是,在前端的世界里,圖片不僅僅是一個樣式顯示,很多時候,圖片也扮演著一種數(shù)據(jù)的展示。比如商品圖,這張圖片就應(yīng)該用img標(biāo)簽,因?yàn)樗缪莸氖巧唐返囊粋€數(shù)據(jù)屬性,而非樣式角色,再比如輪播圖,這也是網(wǎng)站的一種頂部展示數(shù)據(jù)。而一些小圖標(biāo)啦,花紋啦,很明顯,他就是為了做為樣式而存在的。
7、結(jié)語
這就是css3關(guān)于transform的簡單使用,從而實(shí)現(xiàn)一個福到了的效果。
眼看臨近春節(jié)了,疫情也放開了,提醒大家還是盡量減少無用的聚集,比如有人打牌,你就別去邊上看著了;比如趕集,你戴好口罩,這兩年我戴的口罩比前些年總和都要多;
預(yù)祝大家在新的一年里,玉兔吉祥,步步高升。
到此這篇關(guān)于CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效的文章就介紹到這了,更多相關(guān)CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能,整個div360度旋轉(zhuǎn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考2022-01-25css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可2021-04-29css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時
這篇文章主要介紹了css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時功能,需要的朋友可以參考下2018-02-24CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果
本篇文章主要介紹了CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-13純CSS3制作的鼠標(biāo)懸停時邊框旋轉(zhuǎn)
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)懸停時邊框旋轉(zhuǎn)的效果,代碼簡單易懂,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下2017-01-03