AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

🍻我用CSS做出了JUEJIN牌口罩

2024-01-05 71
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 🍻我用CSS做出了JUEJIN牌口罩


虽然我前端菜的抠jio，但是对图片、设计、颜色、插图这类的东西很喜欢，然后掘金又常常有这样的创意更文活动和一些前端比较好参加的活动，让我常常羡慕大伙~

然后这次就尝试了一下，就有了下面的东东。

一、效果图

1704465649205.jpg

1704465652540.jpg

1704465655107.jpg

说起来也奇怪，我一开始完全没想过写这个东西~~，原本打算也是写其他的小玩意的（我==菜鸡）

那天在看大会直播的时候，就去逛了掘金小商铺，看到这个口罩，一下就被 get 到了~😯

心里就冒出了这个想法，这也是因为平时掘金的推荐，导致我也看了不少前端文章，让我觉得我能复刻出来。

还有一张这样的~

1704465670558.jpg

其实理想状态应该把这一个做出那种咱们戴起来的那种样子的，emmm，周一到周五被迫多干了些活，回来也不想整~，最后就止步于此，稍微水了一点点，我有错

此处@法医，创意是医医给我升级的~，有那么亿丢丢浪费，😊，下次我一定好好做，

法医，一只治疗系前端码猿🐒，读书圈 圈主，热爱阅读，聊天十分愉快！

其实很多细节，我没有复刻，能力不足（😭），另外就是我代码中的写法可能有那么一点点傻，大佬们轻喷~

1704465678950.jpg

（图片说明：稀土掘金大会口罩宣传图）

背景没能复刻出来，这个背景问了一些前端小伙伴，如果用 css 画，能画，但是就是真的在拿 css 画画的画，然后我就放弃了~ 有更好的方法的话，大佬们给一点建议，非常感谢~

码上掘金

二、关于代码

1、html方面

布局方面就是使用简单的 flex 布局，很简单的，一下就能上手啦，还不会的小伙伴可以看一下 阮一峰 大佬的博客，也有很多其他质量颇高的文章。

1704465688166.jpg

这里我也木有什么思路，就是堆div堆出来的，拿着图片简单画了一下就上手了~

<div class="body-container">
     <div class="main-container">
       <div class="parent-container">
         <div class="circle-container left-container">
           <div class="circle"></div>
         </div>
         <div class="center-container">
           <div class="inside-container">
             <div class="up-container">
               <div class="up-code">
                 <span>if(引力++)</span>
                 <br>
                 <span class="up-code-span">
                   2022 XITU
                   <br>
                  <span class="up-code-span-2"> DEVELOPERS</span>
                   <br>
                  <span class="up-code-span-3">  CONFERENCE</span>
                   <br>
                   2022
                 </span>
               </div>
               <div class="stars">
                 <div class="dot dot1"></div>
                 <div class="dot dot2"></div>
                 <div class="dot dot3"></div>
                 <img src="./image/block_32768.png" style="width:45px;height: 45px;
                 position: absolute;
                 top: 180px;
                 right: -25px;"></img>
               </div>
             </div>
             <div class="down-container">
               <div class="line-up">
                 <div class="line-box"></div>
                 <div class="line-box"></div>
                 <div class="line-box"></div>
                 <div class="line-box"></div>
               </div>
               <div class="line-down">
                 <div class="code">
                   <span>
                   if(开发者++){</span>
                  <span class="down-code-span"> abundance++;
                   <br>
                   }</span>
                 </div>
                 <div class="left-line">
                   <div class="ruler">
                     <div class="cm">
                       <div class="mm"></div>
                       <div class="mm"></div>
                       <div class="mm"></div>
                       <div class="mm"></div>
                     </div>
                     <div class="cm">
                       <div class="mm"></div>
                       <div class="mm"></div>
                       <div class="mm"></div>
                       <div class="mm"></div>
                     </div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                     <div class="cm"></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div class="circle-container right-container">
           <div class="circle"></div>
         </div>
       </div>
     </div>
   </div>

2、css 方面

使用到的属性都非常常见，我会的就只有这么多😭 代码中含有注释。

html,
 body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #f0f0f0;
 }
 .body-container {
   width: 800px;
   height: 100%;
   /* 居中 */
   margin: 0 auto;
   background-color: #000000;
   /* 实现子元素垂直居中布局 */
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .main-container {
   width: 800px;
   height: 370px;
   min-height: 370px;
   background-color: #000000;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .parent-container {
   height: 80%;
   width: 100%;
   display: flex;
 }
 .left-container {
   width: 20%;
   height: 100%;
   background-color: #000;
 }
 .circle-container{
   display: flex;
   justify-content: center;
   flex-direction: column;
 }
 .left-container .circle {
   width: 150%;
   height: 85%;
   margin-left: 20%;
   border-bottom-left-radius: 100%;
   border-top-left-radius: 100%;
   border: 5px solid #f0f0f0;
 }
 .center-container {
   width: 80%;
   height: 296px;
   min-height: 296px;
   background-color: #f0f0f0;
   display: flex;
   justify-content: center;
   align-items: center;
     /*这里是设置口罩外边的边框斑点，我这里的做法是将外层容器的背景直接做成斑点
     然后内层容器还重新加个背景，感觉不是最优做法，感觉应该拿边框也可以做出来吧。
     */
   background-image: radial-gradient(#d2d9df 9%, transparent 0),
     radial-gradient(#d2d9df 9%, transparent 0);
   background-size: 11px 11px;
   background-position: 0 0, 30px 30px;
   z-index: 10;
 }
 /* 此处样式为设置大背景的样式*/
 .inside{
   background-image: url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/332aad251fbc4eda9219bc3fcff28d0f~tplv-k3u1fbpfcp-watermark.image?);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }
 .inside-container {
   height: 80%;
   width: 90%;
 }
 .up-container {
   width: 100%;
   height: 30%;
   display: flex;
 }
 .up-code {
   width: 40%;
   height: 100%;
   color: #37b8fb;
   font-weight: bold;
 }
 .up-code-span {
   font-size: 12px;
   transform: scale(0.5); /*将文字缩小到浏览器所允许的12px 以下*/
   display: inline-block;
   margin-left:30px;
   margin-top: -15px;
 }
 .up-code-span-2 {
   margin-left:10px;
 }
 .up-code-span-3 {
   margin-left:10px;
 }
 .stars {
   width: 60%;
   height: 100%;
   position: relative;
 }
 .dot {
   position: absolute;
   width: 4px;
   height: 4px;
   border-radius: 100%;
   background-color: #8eafc4;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); /*设置阴影*/
 }
 .dot1 {
   top: 20%;
   left: 80%;
 }
 .dot2 {
   top: 20%;
   left: 60%;
 }
 .dot3 {
   top: 20%;
   left: 53%;
 }
 .down-container {
   width: 100%;
   height: 70%;
 }
 /* start 口罩的横线 这里的做法就算设置div的宽高加一个背景 嘿嘿，加上flex 布局就做完了
 但是距离理想状态，仍然有段距离
 理想状态它应该是画成折痕的状态的，或者是画成手绘的那种风格~
 */
 .line-up {
   height: 60%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
 }
 .line-box {
   height: 2px;
   width: 100%;
   background-color: #e4dbd9;
 }
 /* end 口罩的横线 */
 .line-down {
   height: 40%;
   width: 100%;
   display: flex;
 }
 .code {
   height: 100%;
   width: 30%;
   background-color: #c9ddeb;
   font-weight: bold;
   font-size: 12px;
   color: #37b8fb;
 }
 .down-code-span {
   font-size: 12px;
   /* 设置字体大小 小于浏览器的12px */
   transform: scale(0.8); 
   display: inline-block;
 }
 /* 右边圆环 这里就是用border做的，难度不大，border可玩性也很高，大家感兴趣的可以去多了解了解 */
 .right-container {
   width: 20%;
   height: 100%;
 }
 .right-container .circle {
   margin-left: -80%;
   width: 150%;
   height: 85%;
   border-bottom-right-radius: 100%;
   border-top-right-radius: 100%;
   border: 5px solid #f0f0f0;
   z-index: 1;
 }
 /* 刻度尺 */
 .left-line {
   height: 100%;
   width: 70%;
 }
 .ruler {
   position: relative;
   width: 90%;
   margin: 40px auto;
   height: 14px;
 }
 .ruler .cm,
 .ruler .mm {
   position: absolute;
   border-left: 1px solid #37b8fb;
   height: 4px;
   width: 10%;
 }
 .cm {
   border-bottom: 1px solid #37b8fb;
 }
 .mm {
   position: absolute;
   top: 8px;
 }
 .ruler .cm:after {
   position: absolute;
   font: 11px/1 sans-serif;
 }
 .ruler .mm {
   height: 3px;
 }
 .ruler .mm:nth-of-type(5) {
   height: 10px;
 }
 .ruler .cm:nth-of-type(1) {
   left: 0%;
 }
 .ruler .cm:nth-of-type(2) {
   left: 10%;
 }
 .ruler .cm:nth-of-type(3) {
   left: 20%;
 }
 .ruler .cm:nth-of-type(4) {
   left: 30%;
 }
 .ruler .cm:nth-of-type(5) {
   left: 40%;
 }
 .ruler .cm:nth-of-type(6) {
   left: 50%;
 }
 .ruler .cm:nth-of-type(7) {
   left: 60%;
 }
 .ruler .cm:nth-of-type(8) {
   left: 70%;
   height: 0;
   top: 4px;
 }
 .ruler .cm:nth-of-type(9) {
   left: 80%;
   height: 0;
   top: 4px;
 }
 .ruler .cm:nth-of-type(10) {
   left: 90%;
   height: 0;
   top: 4px;
 }
 .ruler .cm:nth-of-type(11) {
   left: 100%;
   width: 0;
 }
 .ruler .mm:nth-of-type(1) {
   left: 20%;
 }
 .ruler .mm:nth-of-type(2) {
   left: 40%;
 }
 .ruler .mm:nth-of-type(3) {
   left: 60%;
 }
 .ruler .mm:nth-of-type(4) {
   left: 80%;
 }

3、遇到的问题

后记

开始尝试用CSS去画出一些东西，你会惊奇的发现，一切都是皆有可能的，可以看一看 codepen 上面的创意，很多小项目真的让人耳目一新，代码都是熟悉的，但是做出来的效果却非常的好。

偶尔尝试一些新的东西，蛮有趣的，写文周六周日的生活变得更加的充实啦。

近期一直在参与读书圈里的沸点活动，每天坚持写一篇旧书的读后感，好像在那里也找到了一种写文和分享的快乐😀


文章标签：
前端开发
宁在春
目录
相关文章
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
105 1
游客fz577umxdejsg
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
92 2
游客fz577umxdejsg
|
4月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
92 2
东方睿赢
|
28天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
56 7
土木林森
|
28天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
35 6
龙大吉
|
28天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
41 5
土木林森
|
28天前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
33 5
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
320 65
疯狂的猿
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
115 6
游客moiomvrp3vyac2
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代，拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识，一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解，这篇文章都将是你的理想指南。我们将探索基本概念，实现页面布局，并点缀以个性化样式，最终将静态页面转变为动态交互式网站。准备好了吗？让我们开始吧！
游客moiomvrp3vyac2
164 4