CSS3使用双旋转实现福到了的迎春喜庆特效代码
我要评论春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了一个福到了的特效，而且是双旋转哦。
1、实现思路
其实看上去并不难，首先需要一个喜庆的红色背景，做为我们贴福字的背景大红色；这个大红色的贴纸首先做到第一次旋转；但实现过程中，因为红色背景已经做过旋转，如果福字还在里面做为内部元素来布局，福字肯定会跟着旋转，那么就不好控制；所以我决定将红色纸背景和大福字拆分元素布局，单独对福字进行样式处理，旋转，再进行渲染；更重要的是要将福字与红色背景的居中处理。
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度以后，内部的福字旋转就很没有规律性可言，内部的福字如果想调整到那种福到了的效果，需要做很大程度的调整，代码如下：
<!-- 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值都不如之前预想的那么有规律性
4、正确的福字布局
所以我后来想到，将内部的福字布局和外部的红色纸张布局进行拆分，也就是使用2个div元素进行布局。这样，外部的纸张通过rotate旋转45度，对内部的福字布局就不会造成影响。而内部福字布局也可以根据自己的原点进行旋转布局，这样就有规律的多，进行了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);
}
最终实现效果如下：
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、真实开发工作中可能没那么复杂
真实工作中，如果你需要实现一个类似这样的需求，很可能UI设计师会直接给你一张图片，让你直接去进行定位到网页中的某个位置，不会像本文中这样复杂，又考虑是否需要双旋转，又考虑定位是否居中的问题。
可能工作中你直接一个Img标签，或者采用background类似的方式就实现了。而很多人可能img标签和background背景图片还有点晕。
而我的理解是，在前端的世界里，图片不仅仅是一个样式显示，很多时候，图片也扮演着一种数据的展示。比如商品图，这张图片就应该用img标签，因为他扮演的是商品的一个数据属性，而非样式角色，再比如轮播图，这也是网站的一种顶部展示数据。而一些小图标啦，花纹啦，很明显，他就是为了做为样式而存在的。
7、结语
这就是css3关于transform的简单使用，从而实现一个福到了的效果。
眼看临近春节了，疫情也放开了，提醒大家还是尽量减少无用的聚集，比如有人打牌，你就别去边上看着了；比如赶集，你戴好口罩，这两年我戴的口罩比前些年总和都要多；
预祝大家在新的一年里，玉兔吉祥，步步高升。
到此这篇关于CSS3使用双旋转实现福到了的迎春喜庆特效的文章就介绍到这了,更多相关CSS3使用双旋转实现福到了内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考2022-01-25
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
这篇文章主要介绍了css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可2021-04-29
这篇文章主要介绍了css3 实现圆形旋转倒计时功能,需要的朋友可以参考下2018-02-24
本篇文章主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-13- 本文给大家分享一段css3代码实现鼠标悬停时边框旋转的效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-03
最新评论