搜索
首页web前端css教程我如何制作一个纯 CSS 南瓜。

万圣节快乐,我最近做了这个 100% CSS 南瓜,以融入幽灵般的季节精神,有些人想知道它是如何制作的。

看笔
100% CSS 南瓜,作者:micfun123 (@micfun123)
在 CodePen 上。

那么让我解释一下它是如何工作的。对于那些只想要代码而不想查看流程的人,这里是 CodePen 。

我以前从未做过这样的事情,所以我的第一个目标是 3 个橙色椭圆形。

所以我从 HTML 开始。



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

这会并排输出 3 个完美的橙色椭圆形。 这是怎么回事? 首先,我们使用 body 标签将南瓜 div 置于页面中央。我们用前 3 行来做到这一点。接下来,我们使用高度:100vh;告诉代码 body 标签占据了 100% 的屏幕。如果没有这个,正文标签将仅与内容一样大,这意味着椭圆形将在页面顶部居中。 这就是它的样子。

How I made a Pure CSS Pumpkin.
接下来,我们希望圆圈重叠,这可以通过给左右椭圆形负边距来相当容易地完成。

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

所以在这里我们将右侧椭圆形向左移动 45 像素,左侧椭圆形向右移动 45 像素。 (我不会添加这个阶段的照片,因为我还没有办法处理存储照片)

现在是更困难的部分(有些,好吧,使用了很多谷歌)

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

因此宽度、高度、边框半径和背景颜色非常不言自明。 所以我要跳过它。 从位置开始:绝对; 其作用是从网站流程中删除 div。相反,它基于最近的锚点。 位置:绝对; 可以放置在任何元素上。接下来,为了使茎水平居中,我们使用 left: 50% 和transform: translateX(-50%);当您考虑它时,这是有道理的,但您必须考虑从左开始:50% 将茎的左边缘置于南瓜 div 内的中心。我希望茎的中心位于南瓜的中心。变换:translateX(-50%);将阀杆向左侧移动阀杆尺寸的一半。顶部:-47px;几乎符合您的预期。它将顶部边缘向上移动 47 像素。 z-index是我最近发现的一个东西,基本上就是元素的高度。我希望 z 索引位于南瓜后面,所以我给它一个 z 索引:-1,而南瓜的默认索引为 0。这就是它的样子。

How I made a Pure CSS Pumpkin.

最后是眼睛、嘴巴和背景。先从眼睛开始吧



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

所以这看起来比 border-width: 0 50px 41px 30px 更可怕;所以这里我们设置正方形每条边的长度。它从顶部开始并按顺时针方向运行。所以正方形的顶部长度为 0。这是因为三角形有 3 条边,这个技巧让我们可以删除形成三角形的一条边。那么右侧长50px,底部长50px,左侧长30px。对于右眼,我们翻转左右值,使其指向另一个方向。 边框颜色:透明 透明 #000000 透明; 所以你可能想知道为什么有这么多透明的。好吧,你看到这里实际上有 3 个三角形(其中一个由于宽度为 0 而不存在)我们只想为底部三角形着色,因此我们将其他 3 个三角形设置为透明。 边框样式:实心;我们希望三角形有实心填充,所以我们必须将样式设置为实心。我们并没有真正填充三角形,而是有一个很大的边框,所以看起来我们已经填充了。经历了这一切之后,我们现在有了眼睛。

How I made a Pure CSS Pumpkin.

最后一步是微笑。

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

左上边框半径:110px;右上边框半径:110px;定义顶角的圆度。这是形成半圆的部分,但这也会将曲线放在顶部。为了解决这个问题,我添加了变换:旋转(190deg)将其旋转为微笑并使用 left: 25%;使其稍微偏离中心。 这是最终结果。

看笔
100% CSS 南瓜,作者:micfun123 (@micfun123)
在 CodePen 上。

我承认这不是最漂亮的解决方案或最有效的解决方案,但是,这是我第一次尝试在 CSS 中绘制一些东西,我对此感到非常满意。一如既往,请随时在 Discord 或 reddit 上给我留下反馈。

以上是我如何制作一个纯 CSS 南瓜。的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
模拟鼠标运动模拟鼠标运动Apr 22, 2025 am 11:45 AM

如果您曾经在现场演讲或课程中必须显示一个互动动画,那么您可能知道它并不总是那么容易与您的幻灯片进行互动

通过Astro Action和Fuse.js为搜索提供动力通过Astro Action和Fuse.js为搜索提供动力Apr 22, 2025 am 11:41 AM

对于Astro,我们可以在构建过程中生成大部分网站,但是有一小部分服务器端代码可以使用Fuse.js之类的搜索功能来处理搜索功能。在此演示中,我们将使用保险丝搜索一组个人“书签”

未定义:第三个布尔值未定义:第三个布尔值Apr 22, 2025 am 11:38 AM

我想在我的一个项目中实现一条通知消息,类似于您在保存文档时在Google文档中看到的信息。换句话说,一个

捍卫三元声明捍卫三元声明Apr 22, 2025 am 11:25 AM

几个月前,我正在使用黑客新闻(就像一个人一样),并且遇到了一篇(现已删除的)文章,内容涉及不使用if语句。如果您是这个想法的新手(就像我

使用网络语音API进行多语言翻译使用网络语音API进行多语言翻译Apr 22, 2025 am 11:23 AM

自科幻小说以来,我们就幻想着与我们交谈的机器。今天这很普遍。即便如此,制造的技术

JetPack Gutenberg块JetPack Gutenberg块Apr 22, 2025 am 11:20 AM

我记得当古腾堡被释放到核心时,因为那天我在WordCamp我们。现在已经过去了几个月,所以我想我们越来越多的人

在VUE中创建可重复使用的分页组件在VUE中创建可重复使用的分页组件Apr 22, 2025 am 11:17 AM

大多数Web应用程序背后的想法是从数据库中获取数据,并以最佳方式将其呈现给用户。当我们处理数据时

使用'盒子阴影”和剪辑路径一起使用'盒子阴影”和剪辑路径一起Apr 22, 2025 am 11:13 AM

让我们对您可以做一些有意义的事情做一些逐步的情况,但是您仍然可以用CSS欺骗来完成它。在这个

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。