首页IT科技css设置旋转动画(学习CSS3,使用双旋转实现福到了的迎春喜庆特效)

css设置旋转动画(学习CSS3,使用双旋转实现福到了的迎春喜庆特效)

时间2025-04-30 22:23:19分类IT科技浏览3375
导读:春节快到了,因为疫情已经好久没有回老家了,今年终于可以回家过年了,我已经抑制不住自己激动的心情了。因此,我利用css3的旋转做了一个福到了的特效,而且是双旋转哦。...

春节快到了            ,因为疫情已经好久没有回老家了                 ,今年终于可以回家过年了      ,我已经抑制不住自己激动的心情了            。因此            ,我利用css3的旋转做了一个福到了的特效                 ,而且是双旋转哦                  。

目录

1            、实现思路 

2                  、大红纸的渲染过程

3     、错误的福字布局 

4      、正确的福字布局 

5                  、完整源代码

6           、真实开发工作中可能没那么复杂

7      、结语 

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的简单使用                 ,从而实现一个福到了的效果            。

眼看临近春节了      ,疫情也放开了      ,提醒大家还是尽量减少无用的聚集                 ,比如有人打牌            ,你就别去边上看着了;比如赶集      ,你戴好口罩                 ,这两年我戴的口罩比前些年总和都要多;

预祝大家在新的一年里            ,玉兔吉祥,步步高升                 。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
如何解决网站流量销售问题?(活动推广成为新选择,提升流量销售!) 网站排名优化技巧详解(从选择到实战技巧,让你的网站快速上升排名!)