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