问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

叮咚,您有一封520信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接...

发布网友 发布时间:2024-10-08 11:06

我来回答

1个回答

热心网友 时间:2024-10-08 12:09

马上就要5月20号啦,准备好如何向心仪的她/他表白了嘛!特此出一篇告白小信件,效果图如下。纯html+css绘制,包含详细教程注释,干货满满哦。

一、叮咚!查收您的信件!

信件页面主要由信封,卡片,以及卡片上的皮卡丘组成。接下来也将分三部分进行讲解。我们先创建envelope.html及envelope.css。

1.envelope1.1 绘制信封主体

envelope.html

首先,绘制我们的信封,创建类名为container的元素及类名为envelope的元素。我们将信封,卡片,以及卡片上的皮卡丘放在一个container中,方便我们调适三者统一的位置。

代码如下:

envelope.css

在最开始导入我们后面将会用到的字体样式。接着,重置浏览器样式,设置背景颜色,及信封颜色和大小。其中,container和envelope均设置为相对定位。

绝对定位和相对定位,总结一下就是不希望影响到其他元素的就设置为绝对定位,反之,需要在页面中占有位置的就设置为相对定位。具体实例见此文对Absolute(绝对定位)与Relative(相对定位)的解析。

代码如下:

运行效果:

1.2 绘制信封细节

信封主要由上下左右四个颜色不同的三角形组成。我们加入一个新的元素命名为cover,在原先的信封上覆盖上该元素。并通过设置该元素前后伪元素的样式形成四个三角。

加入该元素后的html代码如下:

envelop.html

envelop.css

可以看到,信封有四个三角形组成。

1.2.1 CSS绘制三角形—border法

那么如何绘制出三角形呢?

(会的看官可以直接往下)

这里我们使用 CSS 盒模型中的 border(边框)即可实现。

原理:

首先来看在为元素添加 border 时,border 的样子。假设有如下代码(与本文所写项目无关):

效果图:

这是我们平常使用 border 最普遍的情况——往往只给 border 一个较小的宽度(通常为 1 ~ 2px);然而这样的日常用法就会容易让大家对 border 的形成方式产生误解,即认为元素的 border 是由四个矩形边框拼接而成。

然而事实并不是这样。实际上,元素的 border 是由三角形组合而成,为了说明这个问题,我们可以增大 border 的宽度,并为各 border 边设置不同的颜色:

效果图

既然如此,那么更进一步,把元素的内容尺寸设置为 0 会发生什么情况呢?

效果图

我们将发现,此时元素由上下左右 4 个三角形“拼接”而成;那么,为了实现最终的效果,即保留最下方的三角形,还应该怎么做?很简单,我们只需要把其它border边的颜色设置为白色或透明色:

效果图

不过,被“隐藏”的上border仍然占据着空间,要想使得绘制出的三角形尺寸最小化,还需要将上border的宽度设置为0(其它情况同理)。

1.2.2 绘制信封

绘制我们的信件 相信看了上面的讲解,大家一定了解了如何绘制三角形了。接下来我们将cover即其前后伪元素绘制成如下三个三角形。完成我们信封的制作。 (不了解伪元素的可以看下这篇::before选择器和::after选择器)

由于cover元素不应该影响envelope元素在页面中的位置,所以设置为绝对定位。但我们又需要该元素显示在envelope之上,我们通过修改元素的堆叠顺序,来实现该效果,即设置z-index: 3;代码如下:

envelope.css

最终效果如下:

1.3 信封开合动画

接着绘制信封开合的动画。信封的开合同样是一个三角形,绕信封顶部边缘旋转180°实现的。我们先加入该三角形的元素命名为lib加入到envelope.html中。接着创建信件开合的动画,分别为open和open-rev。

我们使用transform属性,该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置参数rotate(angle) 定义 2D 旋转,在参数中规定角度。在这里我们将angle分别设置为180deg和-180deg,从而实现三角形的旋转,呈现效果为信封的开合。

动画定义代码如下:

envelope.css

接着,我们将该元素绘制为三角形,并通过transform-origin属性,设置旋转元素的基点位置。通过animation属性为该元素设置定义好的动画,及动画执行时间。当鼠标hover于信封时,信封打开,反之信封合上。

代码如下: envelope.css

至此,我们的信封就大功告成啦!运行效果如下:

1.4 加入阴影

这一步较为,简单,也可以省略该元素,加入显得稍有立体感。首先,在envelope.html中加入类名为shadow的元素。随后设置该元素的样式,为一个较窄的横向的椭圆。至此,我们的信封部分就完成了!运行效果如下:

1.5 envelope全部代码

envelope.html

envelope.css

二、加入卡片元素并设置其样式

接着,就是绘制卡片部分了,也较为简单,是一个长方形的白色卡片,设置其样式,并为其添加滑动的动画。首先,我们在container内添加元素并命名为card。为方便我们观察,先将关于信封的元素注释掉。代码如下:

envelope.html

接着,设置样式为白色背景的长方形。

envelope.css

运行效果:

然后,我们加入鼠标hover于信封时,卡片执行划出动画。至此,我们的卡片就完成了。

运行效果:

三、绘制卡片上的内容

由文本及可爱的皮卡丘组成。为了方便观察,我们还是注释掉信封元素。首先,我们从简单的开始,在card元素间,加入我们的文本元素,命名为message,大家可以写自己想说的话。加入文本后的代码:

envelope.html

然后,设置文本向上移。 envelope.css

运行效果:

接着,我们要开始绘制卡片上的皮卡丘了。首先,我们绘制躯干,耳朵,尾巴,手臂,嘴巴,以及捧着的小心心。我们一步步来,先绘制躯干。

首先,在card元素内,加入命名为pikachu的div元素。接着,我们通过设置该元素及其前后伪元素的样式,来绘制躯干,眼睛,脸颊以及小脚丫。我们一步步来,先绘制躯干。代码如下:

envelope.css

运行效果:

接下来,我们绘制皮卡丘的头部,眼睛,脸颊以及脚。代码如下:

envelope.css

运行效果:

接着,我们绘制皮卡丘的耳朵及尾巴。代码如下:

envelope.css

运行效果:

至此,皮卡丘的绘制就完成一大半啦!我们再绘制皮卡丘的心爱心以及手臂。代码如下:

envelope.css

运行效果:

接着,我们绘制皮卡丘的嘴巴。代码如下:

envelope.css

运行效果:

至此,我们的小爱心,也绘制完成了。至此,我们的信件部分就完成了。解开注释看看具体效果吧。全部代码如下:

envelope.html

envelope.css

三、打开您的信件

第二个页面,就是信件内容啦。其中元素与card上的元素基本相同。博主在这个页面重新绘制了一只皮卡丘,增加了些光影的细节及动画。当然,用之前那只也是可以的。新的这只长酱紫:

pikachu.html

pikachu.css

三、联结两个页面

我们在信件页面,使用JS添加点击事件即可实现。

总结

预祝大家520快乐,愿你们今后每一个平凡的小普通,都是小牛马求而不得的心动QAQ。

链接:pan.baidu.com/s/1VOcJvm...

提取码:LDL6
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
刘德华《忘情水》歌词 忘情水专辑 忘情水 求 忘情水-刘德华 无损音质 华东理工大学长江学院怎么样 东华理工大学长江学院机械工程系考研情况 南昌教育学院跟东华理工大学的长江学院比哪个好? 东华理工大学和东华理工大学长江学院是同一所吗 东华理工大学长江学院考研难吗 CKC证书是啥意思? ckc康复是什么意思? 到底是为什么,现在沦落到相亲的地步 相亲的人是不是很可怜 因为没人爱所以沦落到相亲的地步? 你第一次去相亲时内心是什么感受? AMD 影驰 七彩虹 的显卡哪个好? 哪个品牌的显卡最好?比如七彩虹和影驰之类的 仓鼠脖子起了一个大疙瘩怎么办? 大专生考公务员都有什么职位可以考的 为什么迪兰,精影只有A卡,影驰,华硕只有N卡? 为什么我的仓鼠的脖子上长了一个大包啊? ...为什么有些显卡名字上还要加一个什么七彩虹,影驰之 tfboys的是多少QQ号码? 经济统计学国考省考时可以报经济类职位吗 tfboys的qq帐号是多少 ...谁背后一直操纵吴邪进十一仓?他真实的目的是什么? 鲁迅在日本先到东京什么地方看到长头发,白眼多黑眼少的 罐头食品的特点有哪些 我想买N73不知道好不好 N73普通版跟N73音乐版有什么区别 N73是不是开机的时候都会震一下的`我朋友另外一部不会的。请问是什么... 诺基亚n73 怎样才能把手机闹钟调为震机 学信网电子注册备案表在哪查 查询学历证书电子备案表步骤介绍 祖龙之虐的成语解释 越玩越聪明·逻辑牛:幼儿阶梯游戏图书信息 越玩越聪明·逻辑牛:幼儿阶梯游戏媒体评论 越玩越聪明·逻辑牛:幼儿阶梯游戏目录 越玩越聪明·逻辑狗:幼儿阶梯游戏图书信息 越玩越聪明·逻辑猪:幼儿阶梯游戏图书信息 越玩越聪明·逻辑狗:幼儿阶梯游戏目录 越玩越聪明·逻辑猪:幼儿阶梯游戏媒体评论 为什么说找环氧乙烷灭菌厂家金派医疗更值得信赖? ...屏幕一直提示find device closed unexpectedly怎么办 米6find device closed unexpectedly SQLServer怎么打开bak格式的备份文件 360账号怎么改昵称? 女子相扑背景 两晋南北朝体育相扑的变化 女子相扑亮相武博会 怎么穿衣服有女人味 怎么打扮有女人味 馥蕾诗润唇膏保质期多久 过期了还能用吗 产妇一顿吃几个汤圆好