这篇文章教你一步一步用纯CSS画一个中国结,给这个中国结增加红包雨动画效果,希望对大家有所帮助!
春节是中国人最重要的节日,春节期间的习俗也很多,东西南北各不相同。 为了增添新年的味道,每个家庭都会购买各种新年商品和装饰品,创造一个繁荣的家,红灯笼、红对联、红祝福字和红色的中国结。
中国结原料是一根简单的红绳,经过古人的巧妙构思,编织成菱形网格。网格上的绳子紧紧地连接在一起,象征着家庭团结、和谐、幸福。
那么如何用CSS来实现一个中国结呢? 先看最终效果。
在线预览Codepen地址:
https://codepen.io/cliea/pen/LYOPbBr
如此 Amazing 效果,你也可以做出来,让我们开始吧!
1、编码前
1. 收集的材料越简单越好
首先,从网上搜索一张中国结的图片。中国结有不止一种风格。我们选择最经典的中国结编织风格。 图片的质量决定了最终成品的质量,下面是一张相对干净、结构清晰的中国结图片。供我们在写CSS时参考。
2. 观察细节,构思实现的可能性
你能用图片开始写代码吗?当然不是。
首先回想一下现在要做的事情:用CSS画一个中国结。
你真的想好了吗?这是一个可以实现的目标吗?想象一下,当你的领导给你一个任务:让手机外壳根据应用程序的主题颜色变色。你会直接开始写代码吗?
你会想两个问题:
作为软件,APP是否有与手机壳互动的接口?
如果手机壳接收到色值,如何变色
这是一个极端的例子,以上两个都无法实现。回到CSS和这张中国结的图片。我们首先要考虑的是,我们应该使用哪些CSS技术来实现这张图片。现在回头仔细看看上面的图片。
经过短暂的观察,我们发现了这样的东西要点:
中国结的绳子由渐变色组成,深红、浅红、深红
中间的主体部分由22根相互交叉的绳子组成,每个交叉点都会交换层次顺序
有一些环结构,颜色渐变的过程与直线相同
整体为红色,黄色点缀
然后就是预想一下实现原理:
直线的颜色渐变,使用直线的颜色渐变
linear-gradient
或者repeating-linear-gradient
环状渐变,使用
radial-gradient
网格的交叉,使用
mask
遮罩达到交叉效果使用四分之三环和底部两根弯曲的绳子
clip-path
来裁剪为了使编码更方便,使用
SCSS
许多地方都可以使用
::before
::after
实现,减少html
代码
3. 结构拆分,化整为零
以上是从技术角度从整体观察,以下是整个图片的拆分,首先确定它 html
结构。
- 中间像棋盘一样的网格结构可以作为棋盘的网格结构
html
标签
- 周围有16个小半圆,用16个标签定位实现
- 两个四分之三的圆,放在一组中,使用相同的风格,第二个基于第一个旋转
180deg
- 两个十字结风格相同,所以也放在一组中
- 顶部有三个小结构,放在一组,外层命名为
header
- 底部左右两部分高度相似,也放在一组中,命名为
footer
所以我们得到了 html
的结构
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你