位置: IT常识 - 正文

学习CSS3,使用双旋转实现福到了的迎春喜庆特效(css3知识总结)

编辑:rootadmin
学习CSS3,使用双旋转实现福到了的迎春喜庆特效

推荐整理分享学习CSS3,使用双旋转实现福到了的迎春喜庆特效(css3知识总结),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css3知识总结,css3的用途,css使用教程,css3技术简介,如何使用css3,css3知识总结,如何使用css3,如何使用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、正确的福字布局 学习CSS3,使用双旋转实现福到了的迎春喜庆特效(css3知识总结)

所以我后来想到,将内部的福字布局和外部的红色纸张布局进行拆分,也就是使用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的简单使用,从而实现一个福到了的效果。

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/300433.html 转载请保留说明!

上一篇:深度学习参数初始化(二)Kaiming初始化 含代码

下一篇:Node.js安装与配置(node.js的安装和配置)

  • 出口退免税是什么意思
  • 个人所得税年度汇算清缴怎么操作
  • 减免的企业所得税计入什么科目
  • 公司收到生育津贴不发给员工 分录
  • 小区业委会是否可以进行经营活动?
  • 损益类结转本年利润摘要
  • 给客户多开了发票,下月少开可以吗?
  • 公司名称变更发票还能认证吗
  • 有营业执照有什么好处吗?
  • 保安公司怎样上保险
  • 小微企业2018年所得税税率
  • 季度报没有报怎么办
  • 增值税扣税凭证包括增值税专用发票
  • 公益性捐赠专用会计科目
  • 公司缴纳社保部分从个人扣除 犯法吗
  • 事业单位固定资产管理办法
  • 社保和医保是分开到账吗
  • 无形资产减值损失后能不能转回
  • 增值税专用发票怎么开
  • linux查看du
  • 电子税务局清算备案能撤销吗
  • mac 如何u盘启动
  • 短期借款和短期贷款
  • 破产资产拍卖
  • 库存现金意思
  • html img位置
  • 原始凭证可以没有名称吗
  • 在沙滩上的语句
  • 没签订采购合同怎么办
  • 企业股股票
  • 小规模企业需要交几个点
  • 南美貘叫什么
  • 德国楚格峰一日游攻略
  • css中文字垂直排列
  • ssh远程登录执行命令
  • 报废机器设备如何缴纳增值税
  • phpcms如何配置404
  • 物业费少交点,有什么理由
  • 收据能抵成本吗
  • 实发工资总额怎么算
  • 施工项目的费用包括
  • python深拷贝与浅拷贝区别
  • sqlserver存储过程if语句
  • sql server2012使用方法
  • 利润表利息费用怎么填
  • 交强险必须要买嘛
  • 外聘专家机票能抵扣增值税吗
  • 发票作废该如何操作
  • 上期计提的费用怎么入账
  • 公司内部食堂招待费账务处理
  • 原材料贷方余额怎么转成本
  • 国税代开专票缴纳城建税分录?
  • 小规模企业自开收购牛发票增值税怎样申报
  • 招标代理专家库合法吗
  • 待摊费用年底能够有余额么
  • 一般纳税人的进项税率是多少
  • 基于sql server的大数据审计分析应用
  • sql函数使用
  • mysql 大数据处理
  • win10安全系统
  • windows7怎么画画
  • winxp共享文件
  • 桌面美化助手
  • 已停止工作win7
  • win8系统怎么设置开机密码
  • perl语言基本命令
  • js遮罩效果
  • 批处理修改文件后缀名
  • unity3d4个脚本
  • js水平垂直居中怎么设置
  • 使用jquery实现的项目
  • python中的stringvar
  • 动态表单的设计与实现
  • 嵌入式安卓开发入门
  • 公司地址变更后社保要改吗
  • 加工销售如何做账
  • 增值税专用发票电子版
  • 佛山电动摩托车能上牌吗
  • 民族贸易产生的原因
  • 关于返回
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设