位置: 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的安装和配置)

  • 荣耀30pro耳机接口在哪(荣耀30pro耳机插上去没反应)

    荣耀30pro耳机接口在哪(荣耀30pro耳机插上去没反应)

  • oppoa9有充电指示灯吗(oppoa9充电显示)

    oppoa9有充电指示灯吗(oppoa9充电显示)

  • ppt左边的窗口关闭了怎么打开(ppt怎么把左侧窗口调出来)

    ppt左边的窗口关闭了怎么打开(ppt怎么把左侧窗口调出来)

  • 八芯网线是几类网线(八芯网线是什么意思)

    八芯网线是几类网线(八芯网线是什么意思)

  • 影响电脑运行速度的因素(影响电脑运行速度的是内存还是硬盘)

    影响电脑运行速度的因素(影响电脑运行速度的是内存还是硬盘)

  • 为什么手机用por(为什么手机用久了像素越来越差)

    为什么手机用por(为什么手机用久了像素越来越差)

  • p30录制屏幕怎么没有声音(屏幕录制华为p30怎么设置)

    p30录制屏幕怎么没有声音(屏幕录制华为p30怎么设置)

  • 苹果xr如何显示电池百分比(苹果xr如何显示电量)

    苹果xr如何显示电池百分比(苹果xr如何显示电量)

  • 美团刷好评处罚规则

    美团刷好评处罚规则

  • 华为荣耀30pro支持无线充电吗(华为荣耀30Pro支持无线充电功能吗)

    华为荣耀30pro支持无线充电吗(华为荣耀30Pro支持无线充电功能吗)

  • iphone录屏网易云没声音怎么解决(苹果录屏怎么把网易云音乐录进去)

    iphone录屏网易云没声音怎么解决(苹果录屏怎么把网易云音乐录进去)

  • 屏幕乱跳是内屏坏了吗(屏幕乱跳是内屏坏了吗苹果)

    屏幕乱跳是内屏坏了吗(屏幕乱跳是内屏坏了吗苹果)

  • 任天堂续航版和普通版区别(任天堂续航版和非续航版的区别)

    任天堂续航版和普通版区别(任天堂续航版和非续航版的区别)

  • pcle固态和ssd什么区别(ssd pcle区别)

    pcle固态和ssd什么区别(ssd pcle区别)

  • 小米cc9支持27瓦快充吗(小米cc9支持33w快充吗)

    小米cc9支持27瓦快充吗(小米cc9支持33w快充吗)

  • 计算机病毒是怎么来的(计算机病毒是怎么造成的)

    计算机病毒是怎么来的(计算机病毒是怎么造成的)

  • airpods支持快充吗(airpods用快充)

    airpods支持快充吗(airpods用快充)

  • 闲鱼扣分12怎么处理(闲鱼扣分怎么查)

    闲鱼扣分12怎么处理(闲鱼扣分怎么查)

  • 通常说的主机是(通常所说的主机指)

    通常说的主机是(通常所说的主机指)

  • 苹果11怎么打开个人热点(苹果11怎么打开nfc功能)

    苹果11怎么打开个人热点(苹果11怎么打开nfc功能)

  • 云闪付与支付宝的区别(云闪付与支付宝互通吗)

    云闪付与支付宝的区别(云闪付与支付宝互通吗)

  • iphone11pro max是高通还是英特尔(11pro max是高刷屏吗)

    iphone11pro max是高通还是英特尔(11pro max是高刷屏吗)

  • 拼多多省钱月卡怎么取消自动续费(拼多多省钱月卡会自动续费吗)

    拼多多省钱月卡怎么取消自动续费(拼多多省钱月卡会自动续费吗)

  • 荣耀coral10什么型号(荣耀十col-al10)

    荣耀coral10什么型号(荣耀十col-al10)

  • qq音乐文件在哪里查找(qq音乐文件在哪个文件夹)

    qq音乐文件在哪里查找(qq音乐文件在哪个文件夹)

  • 怎么解除qq防沉迷

    怎么解除qq防沉迷

  • qq大会员激活(qq会员激活码在哪里激活)

    qq大会员激活(qq会员激活码在哪里激活)

  • 百度网盘如何分享给别人(百度网盘如何分享链接和提取码)

    百度网盘如何分享给别人(百度网盘如何分享链接和提取码)

  • 京豆如何抵用(京豆抵现划算吗)

    京豆如何抵用(京豆抵现划算吗)

  • 手把手带你调参Yolo v5(二)(调参技巧)

    手把手带你调参Yolo v5(二)(调参技巧)

  • 【计算机视觉】图像增强——图像的形态学操作(计算机视觉的未来发展方向有哪些)

    【计算机视觉】图像增强——图像的形态学操作(计算机视觉的未来发展方向有哪些)

  • 如何查企业是一级企业
  • 避税岛是什么
  • 财政补助资金是什么意思
  • 建筑简易征收需要成本发票吗
  • 资金结存科目余额对应
  • 收到的其他与筹资活动有关的现金包括
  • 企业合并有几种
  • 出口收入没有及时申报怎么处罚
  • 聘用劳务人员派遣合法吗
  • 研发样机是什么
  • 修理厂普通发票
  • 应征增值税不含税销售额(3%征收率)怎么算
  • 大中小型企业标准划分表
  • 小微企业季度所得税怎么计算
  • 专项应付款现在叫什么
  • 建筑行业一般纳税人税率是多少
  • 差额征收增值税如何申报
  • 防暑降温用品进什么科目
  • 做金融服务要什么资格
  • 修理厂年收入
  • 会计分录是怎么样的
  • rrpcsb.exe - rrpcsb是什么进程 有什么用
  • 累积带薪缺勤的原因分析
  • opera software
  • 企业所得税若干问题
  • windows不能打开exe文件
  • php修改sql语句
  • 委托境外机构研发费加计扣除80%
  • 前端埋点sdk
  • 出借和出租包装物的区别
  • 今日清明是清明开始还是结束
  • dl.php怎么打开
  • vue2 mixin
  • 与http缓存有关的header
  • 如何更改telnet端口
  • python怎么导出数据到excel
  • 甲供材料总额法和差额法
  • 打车费属于差旅费吗
  • 增值税专票三联都丢了写情况说明可以吗
  • 年金现值系数公式记忆
  • python模块的搜索路径
  • 劳务派遣公司必须有劳务派遣证吗
  • 购买的固定资产退回账务处理
  • 无形资产减值准备是什么科目
  • 货物运输费含税吗
  • 土地增值税的扣除项目金额有哪些
  • 免税收入是否可抵扣
  • 暂估入库的商品作暂估冲红会计分录
  • 查补以前年度税款账务处理
  • 合并报表六大抵消分录CPA
  • 法人存入公户的钱摘要
  • 待处理财产损益会计分录
  • 国税一证通
  • 企业外购的固定资产应该怎样进行会计核算
  • 史上最简单的不读书法成甲
  • win7无法识别usb设备如何解决
  • 关于要不要关闭Vista中的IPv6功能的问题
  • tcpsyncookies
  • window8系统安装步骤
  • auepuf.exe是什么进程
  • spysweeper.exe - spysweeper是什么进程
  • win10系统宽带连接错误解决方法
  • win8怎么设置用户头像
  • bootstrap下拉框设置默认值
  • alt+r没用
  • 查找最近文件操作记录
  • 调用m1方法
  • python 遍历字符串修改
  • js的定时器函数
  • js限制输入字符长度
  • 在javascript中什么方法可以对数组元素进行排序
  • javascript基础题目
  • javascript编程技术
  • android开发环境搭建实验报告总结
  • javascript面向对象编程指南第三版
  • 山东省国家税务局总局官网
  • 税务跨区变更需要什么资料
  • 税务怎么在外网申报
  • 怎么算税额和单位税额
  • 济宁高新区税务局办税大厅电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设