这篇文章上次修改于 2223 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
祝大家新年快乐!近期团队的 @Eric 想出了一个防止自己红包被机器人抢的妙招:利用自己的博客跳转到红包页面,现已被多人效仿。有 @陆陆侠 的 JavaScript 版,@惶心、@XTL 的 PHP 版等... 我作为一个认真的前端学习者,所以也来凑个热闹了。在此送上一个简易的 CSS 红包制作教程,顺带留下一个带 PHP 处理的红包(需要回答我的问题才有机会获得)
效果预览
制作流程
其实整个流程特别小 Case 啦,我们把这个红包看成简要的两部分就行,它们分别是:
- 红包封口(内有头像)
- 红包内容区(内有留言、赠送人和开红包按钮)
编写结构
首先我们先用 HTML 编写出大致的红包结构:
<div class="red-packet">
<header>
<img src="avatar.jpg"/>
</header>
<main>
<h1>祝你新年快乐</h1>
<p class="author">奇趣保罗敬上</p>
<button class="open">开</button>
</main>
</div>
编写样式
先来个简单的网页样式重置:
/* 改变间距计算方式 */
*{
box-sizing: border-box;
}
/* 设置间距和字体 */
body{
margin: .5em;
font: lighter 16px "微软雅黑";
}
/* 标题变细 */
h1, h2, h3{
font-weight: lighter;
}
/* 图片响应式 */
img{
height: auto;
max-width: 100%;
}
接下来给红包主体添加 position: relative
属性,就可以给上面的封口进行重新定位了。为了防止内容溢出,我们加上一句 overflow: hidden
属性即可。最后设置字体、背景颜色、宽高和圆角就差不多完工了。
.red-packet{
color: #fff;
padding: 1em;
height: 35em;
margin: auto;
max-width: 25em;
overflow: hidden;
position: relative;
border-radius: 1em;
background: #c40b00;
}
给封口设置相对定位,给 100% 的圆角,并且设置背景、高度。
.red-packet header{
top: -14.5em;
left: 0;
right: 0;
height: 25em;
position: absolute;
border-radius: 100%;
background: #b00b00;
}
编写头像也是用相对定位解决,再给 img
元素加上圆角和边框就完成了。
.red-packet img{
left: 0;
right: 0;
bottom: -2em;
margin: auto;
max-width: 5em;
position: absolute;
border-radius: 100%;
border: .25em solid #fff;
}
随后就是内容区了,只需要加一个 margin
即可填充上方的间距。
.red-packet main{
margin-top: 15em;
text-align: center;
}
最后设置一下开红包的按钮,整体基本就完成咯!
.red-packet .author{
opacity: .7;
}
.red-packet .open{
outline: 0;
width: 3em;
height: 3em;
color: #fff;
border: none;
display: block;
font-size: 2em;
cursor: pointer;
margin: 1em auto;
background: #ffb03a;
border-radius: 100%;
transition: background .3s, transform .3s;
}
.red-packet .open:hover{
transform: scale(1.1);
}
.red-packet .open:active{
background: #eba534;
}
添加动画
为了增加逼格,我们还可以给这个红包增加一个动画。
@keyframes red-packet{
from{
opacity: 0;
transform: scale(0);
}
to{
opacity: 1;
transform: scale(1);
}
}
并给红包主体添加一个属性即可完成~:
animation: red-packet .75s both cubic-bezier(0.68, -0.55, 0.27, 1.55);
Enjoy it!
增强版预览
增强版的红包采用了 PHP 后端处理,原理就是使用正则匹配表单内容。红包地址已经过期了 2333,但你们依旧可以尝试一下。链接是这个(https://static.保paugram.罗com/spring-festival),为了防止机器人,请手动输入,谢谢~
已有 7 条评论
哇...这个太强了,要是能集成TP插件就好了。
@Tabby 做成插件有啥用呀... 修改问题判断对新手来讲比较麻烦
这个红包很皮~ 过完年又胖了不少吧
@小轲 我属于那种永远吃不胖的类型
这个好,赶紧模仿一下!
讲道理,那天在你 QQ 群看到这种红包,第一眼以为是骗人网站。。
@tcdw 我们学生党哪有这么厉害给人家推广啊... 骗人就更不可能了,背着良心干坏事