我如何制作一个纯 CSS 南瓜。-css教程-PHP中文网

首页

web前端

css教程

我如何制作一个纯 CSS 南瓜。

Barbara Streisand

Dec 29, 2024 am 11:48 AM

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

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

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

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

所以我从 HTML 开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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;
}