最全学习CSS3，使用双旋转实现福到了的迎春喜庆特效_css 福(1)，想跳槽涨薪的必看

2401_84182758

于 2024-05-16 04:30:26 发布

阅读量668

点赞数 11

文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84182758/article/details/138936176

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

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

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

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

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

https://bbs.csdn.net/topics/618545628)**

2401_84182758

关注

11
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
最全学习CSS3，使用双旋转实现福到了的迎春喜庆特效_css 福(1)，想跳槽涨薪的必看

这就是css3关于transform的简单使用，从而实现一个福到了的效果。眼看临近春节了，疫情也放开了，提醒大家还是尽量减少无用的聚集，比如有人打牌，你就别去边上看着了；比如赶集，你戴好口罩，这两年我戴的口罩比前些年总和都要多；预祝大家在新的一年里，玉兔吉祥，步步高升。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
复制链接

扫一扫