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

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

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;
}
登录后复制
登录后复制

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

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

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热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

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

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1276
29
C# 教程
1256
24
静态表单提供商的比较 静态表单提供商的比较 Apr 16, 2025 am 11:20 AM

让我们尝试在这里造成一个术语:“静态表单提供商”。你带上html

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom 每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom Apr 17, 2025 am 10:55 AM

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

带有HTML对话框元素的一些动手 带有HTML对话框元素的一些动手 Apr 16, 2025 am 11:33 AM

这是我第一次查看HTML元素。我已经意识到了一段时间,但是尚未将其旋转。它很酷,

纸张形式 纸张形式 Apr 16, 2025 am 11:24 AM

购买或建造是技术的经典辩论。自己构建东西可能会感觉更便宜,因为您的信用卡账单上没有订单项,但是

'订阅播客”链接应在哪里? '订阅播客”链接应在哪里? Apr 16, 2025 pm 12:04 PM

有一段时间,iTunes是播客中的大狗,因此,如果您将“订阅播客”链接到喜欢:

托管您自己的非JavaScript分析的选项 托管您自己的非JavaScript分析的选项 Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)

See all articles