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

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

  發(fā)布時(shí)間：2023-01-29 15:22:46   作者：佚名   我要評(píng)論
春節(jié)快到了，因?yàn)橐咔橐呀?jīng)好久沒有回老家了，今年終于可以回家過年了，我已經(jīng)抑制不住自己激動(dòng)的心情了。因此，我利用css3的旋轉(zhuǎn)做了一個(gè)福到了的特效，而且是雙旋轉(zhuǎn)，感興趣的朋友跟隨小編一起看看吧

春節(jié)快到了，因?yàn)橐咔橐呀?jīng)好久沒有回老家了，今年終于可以回家過年了，我已經(jīng)抑制不住自己激動(dòng)的心情了。因此，我利用css3的旋轉(zhuǎn)做了一個(gè)福到了的特效，而且是雙旋轉(zhuǎn)哦。

1、實(shí)現(xiàn)思路 

其實(shí)看上去并不難，首先需要一個(gè)喜慶的紅色背景，做為我們貼福字的背景大紅色；這個(gè)大紅色的貼紙首先做到第一次旋轉(zhuǎn)；但實(shí)現(xiàn)過程中，因?yàn)榧t色背景已經(jīng)做過旋轉(zhuǎn)，如果福字還在里面做為內(nèi)部元素來布局，福字肯定會(huì)跟著旋轉(zhuǎn)，那么就不好控制；所以我決定將紅色紙背景和大福字拆分元素布局，單獨(dú)對(duì)福字進(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、錯(cuò)誤的福字布局 

開始我想得是將福字元素布局到大紅色元素內(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個(gè)div元素進(jìn)行布局。這樣，外部的紙張通過rotate旋轉(zhuǎn)45度，對(duì)內(nèi)部的福字布局就不會(huì)造成影響。而內(nèi)部福字布局也可以根據(jù)自己的原點(diǎn)進(jìn)行旋轉(zhuǎn)布局，這樣就有規(guī)律的多，進(jìn)行了180度旋轉(zhuǎn)。

而仍然需要做的就是內(nèi)部福字和外部紙張的定位顯示，這里需要為內(nèi)部進(jìn)行absolute絕對(duì)定位布局，調(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)一個(gè)類似這樣的需求，很可能UI設(shè)計(jì)師會(huì)直接給你一張圖片，讓你直接去進(jìn)行定位到網(wǎng)頁中的某個(gè)位置，不會(huì)像本文中這樣復(fù)雜，又考慮是否需要雙旋轉(zhuǎn)，又考慮定位是否居中的問題。

可能工作中你直接一個(gè)Img標(biāo)簽，或者采用background類似的方式就實(shí)現(xiàn)了。而很多人可能img標(biāo)簽和background背景圖片還有點(diǎn)暈。

而我的理解是，在前端的世界里，圖片不僅僅是一個(gè)樣式顯示，很多時(shí)候，圖片也扮演著一種數(shù)據(jù)的展示。比如商品圖，這張圖片就應(yīng)該用img標(biāo)簽，因?yàn)樗缪莸氖巧唐返囊粋€(gè)數(shù)據(jù)屬性，而非樣式角色，再比如輪播圖，這也是網(wǎng)站的一種頂部展示數(shù)據(jù)。而一些小圖標(biāo)啦，花紋啦，很明顯，他就是為了做為樣式而存在的。

7、結(jié)語 

這就是css3關(guān)于transform的簡(jiǎn)單使用，從而實(shí)現(xiàn)一個(gè)福到了的效果。

眼看臨近春節(jié)了，疫情也放開了，提醒大家還是盡量減少無用的聚集，比如有人打牌，你就別去邊上看著了；比如趕集，你戴好口罩，這兩年我戴的口罩比前些年總和都要多；

預(yù)祝大家在新的一年里，玉兔吉祥，步步高升。

到此這篇關(guān)于CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效的文章就介紹到這了,更多相關(guān)CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論