欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2023-01-29 15:22:46   作者:佚名   我要評論
春節(jié)快到了,因?yàn)橐咔橐呀?jīng)好久沒有回老家了,今年終于可以回家過年了,我已經(jīng)抑制不住自己激動的心情了。因此,我利用css3的旋轉(zhuǎn)做了一個福到了的特效,而且是雙旋轉(zhuǎ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)文章

最新評論