html+css写一个新春礼盒，专属你的礼物快来打开看看吧前两天写了一个烟花登录页，偶然的机会上推荐页了，我直接好家伙！
上期回顾
前两天写了一个烟花登录页，偶然的机会上推荐页了，我直接好家伙！因为没写如何制作详细过程，结果直接被喷。。。还被多人举报，直接把我文章从推荐页拉下来了，吓的我这小心脏，第一次目睹网络暴力是啥样的，本次更新可的吧代码写清楚了，可别再喷弟弟了
正片
忽如一夜春风来，千树万树梨花开。
这一年又要过去了，这不马上过年了嘛，寻思给大家准备点礼物，程序员的礼物当然要有程序员的特征，下面我为大家写了个礼盒，但是我不展示礼盒里面是什么东西，注意看礼盒里面还有东西在动哦~哈哈，需要同学们自己动手写完之后才能知道我送的是什么礼物
页面结构
这里不用我多说了吧？html还让我解释我直接吐血了都。
<div class="present" ontouchstart="ontouchstart"> <div class="santa"> <div class="santa__hat"></div> <div class="santa__eyes"></div> <div class="santa__beard"> <div class="santa__beard--cover"></div> </div> <div class="santa__smile"></div> </div> <div class="present__box"> <div class="present__ribbon--vertical"></div> <div class="present__ribbon--horizontal"></div> </div> <div class="present__top"> <div class="present__ribbon--vertical"></div> <div class="present__bow"></div> </div> </div>
页面样式
初始化：
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; background-color: #1e2f27; }
整体位置和大小：
.present { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; margin-top: 10vw; width: 30vw; height: 25vw; }
下面我们写红色的盒子，以及圆角
.present__box { background-color: #FE4365; background-image: -webkit-repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); background-image: repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); position: absolute; width: 100%; height: 100%; border-radius: 0 0 0.5vw 0.5vw; box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1); }
这是横竖的封条
.present__ribbon--horizontal, .present__ribbon--vetical { content: ""; position: absolute; margin: auto; background-color: #F9CDAD; } .present__ribbon--vertical { content: ""; position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 5vw; height: 100%; background-color: #F9CDAD; background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent); background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent); box-shadow: inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.1); } .present__ribbon--horizontal { top: 0; bottom: 0; left: 0; width: 100%; height: 5vw; background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent); background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent); box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1); }
这是礼盒盖子
.present__top { background-color: #FE4365; background-image: -webkit-repeating-linear-gradient(135deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); background-image: repeating-linear-gradient(-45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); position: absolute; top: 0; left: -1%; width: 102%; height: 20%; border-radius: 0.5vw 0.5vw 0 0; box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1); } .present__bow { position: absolute; right: 0; bottom: 100%; left: 0; margin: auto; width: 30%; height: 40%; background-color: #83AF9B; border-radius: 2px 2px 0 0; box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1); }
这是盖子上的蝴蝶结
.present__bow:before, .present__bow:after { content: ""; position: absolute; bottom: 100%; width: 70%; height: 150%; background-color: inherit; border-radius: 2px; z-index: -1; } .present__bow:before { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1); } .present__bow:after { right: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1); }
开始画礼盒里面的礼物
.santa { position: absolute; right: 0; bottom: 90%; left: 0; margin: auto; width: 60%; background-color: #E1B899; border-radius: 100%; } .santa:after { content: ""; display: block; padding-bottom: 100%; } .santa__eyes { position: absolute; top: 35%; width: 100%; height: 100%; } .santa__eyes:before, .santa__eyes:after { content: ""; position: absolute; width: 1.4vw; height: 1.4vw; background-color: #111111; border-radius: 100%; } .santa__eyes:before { left: 30%; } .santa__eyes:after { right: 30%; } .santa__beard { position: absolute; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 50%; background-color: white; border-radius: 0 0 4vw 4vw; } .santa__beard:before, .santa__beard:after { content: ""; position: absolute; bottom: 100%; width: 15%; height: 25%; background-color: inherit; } .santa__beard:before { left: 0; border-radius: 0 4vw 0 0; } .santa__beard:after { right: 0; border-radius: 4vw 0 0 0; } .santa__beard--cover { position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 70%; height: 50%; background-color: #E1B899; border-radius: 0 0 2vw 2vw; } .santa__beard--cover:before { content: ""; position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 50%; height: 100%; background-color: white; border-radius: 1vw 1vw 0 0; } .santa__smile { position: absolute; right: 0; bottom: 30%; left: 0; margin: auto; width: 15%; height: 20%; background-color: #111111; border-radius: 4vw; } .santa__smile:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: white; }
最后添加动画就ok
.present { -webkit-animation: shake 5s ease-in-out infinite; animation: shake 5s ease-in-out infinite; } .present__top { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.2s ease-in; transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in; transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; } .santa { -webkit-transform: translateY(17vw); transform: translateY(17vw); -webkit-transition: -webkit-transform 0.2s ease-in; transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in; transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; } .present:hover { -webkit-animation: none; animation: none; } .present:hover .santa { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.1s ease-out; transition: -webkit-transform 0.1s ease-out; transition: transform 0.1s ease-out; transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out; } .present:hover .present__top { -webkit-transform: translateY(-17vw); transform: translateY(-17vw); -webkit-animation: pop-the-top 0.4s ease-in; animation: pop-the-top 0.4s ease-in; } @-webkit-keyframes pop-the-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-24vw); transform: translateY(-24vw); } 60% { -webkit-transform: translateY(-16vw); transform: translateY(-16vw); } 75% { -webkit-transform: translateY(-18vw); transform: translateY(-18vw); } 90%, 100% { -webkit-transform: translateY(-17vw); transform: translateY(-17vw); } } @keyframes pop-the-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-24vw); transform: translateY(-24vw); } 60% { -webkit-transform: translateY(-16vw); transform: translateY(-16vw); } 75% { -webkit-transform: translateY(-18vw); transform: translateY(-18vw); } 90%, 100% { -webkit-transform: translateY(-17vw); transform: translateY(-17vw); } } @-webkit-keyframes shake { 52% { -webkit-transform: translateX(-0.2vw); transform: translateX(-0.2vw); } 54% { -webkit-transform: translateX(0.2vw); transform: translateX(0.2vw); } 56% { -webkit-transform: translateX(-0.5vw); transform: translateX(-0.5vw); } 58% { -webkit-transform: translateX(0.5vw); transform: translateX(0.5vw); } 60% { -webkit-transform: translateX(-0.2vw); transform: translateX(-0.2vw); } 62% { -webkit-transform: translateX(0.2vw); transform: translateX(0.2vw); } 64% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes shake { 52% { -webkit-transform: translateX(-0.2vw); transform: translateX(-0.2vw); } 54% { -webkit-transform: translateX(0.2vw); transform: translateX(0.2vw); } 56% { -webkit-transform: translateX(-0.5vw); transform: translateX(-0.5vw); } 58% { -webkit-transform: translateX(0.5vw); transform: translateX(0.5vw); } 60% { -webkit-transform: translateX(-0.2vw); transform: translateX(-0.2vw); } 62% { -webkit-transform: translateX(0.2vw); transform: translateX(0.2vw); } 64% { -webkit-transform: translateX(0); transform: translateX(0); } }
我这样写你明白了么？总的来说内容不是太难，总共也没几个html标签，主要是css样式，有些样式不理解的话可以查一下，我写的这些元素还算是比较常用的。
再有就是：如果写不出来的话就复制到你代码里瞅瞅我给你的什么礼物吧~
礼物我就先送为敬了，/收藏/关注就交给你喽。 有不懂的可以主页联系
寄语
注意了，先看看你的左边，再看看你的右边。请小心一个刚溜出来的精神病，他的特征是：拿着手机东张西望。祝你新年快乐哦~
相关知识
花十二个月建立一个成功的网站
再聊移动端页面的适配
你知道如何给植物花卉进行浇水与施肥吗？快来看看吧
单身狗请闭眼，直接看最后一个。
搜索引擎营销着陆页攻略
七夕表白最浪漫的十大礼物推荐 七夕告白送这10种礼物抱得美人归
手摸手，带你用vue撸后台 系列二(登录权限篇)进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，
Google AdWords 终极指南｜如何设置广告的着陆页？
教你打造一个最浪漫的表白场景
3个技巧教你如何搭建B2B企业的落地页（B2B落地页都有什么形式）
网址: html+css写一个新春礼盒，专属你的礼物快来打开看看吧前两天写了一个烟花登录页，偶然的机会上推荐页了，我直接好家伙！ https://m.huajiangbk.com/newsview1174110.html
| 上一篇: 3种“富贵花”适合养家里，大气有 |
下一篇: 【元旦礼品】元旦送什么礼物好 元 |
