Logo

菜单

发布于 2026-01-06 9 阅读
0

使用 CSS 创建精美图像，提升您的作品集

使用 CSS 创建精美图像，提升您的作品集

如今，如果没有一份令人印象深刻的作品集，很难找到第一份工作。虽然人人都在开发天气应用，但每个人的作品集中都有基于 CSS 的自定义图片吗？让我们一起创作独一无二的图片，提升你的作品集吧！

我们可以用 CSS 创建多种形状，那么为什么不创建自定义 CSS 图片而不是使用图库照片呢？这样可以减少不必要的请求，加快网站速度；此外，它们还能让你的网站更加生动。

我不想在这里创建整个应用程序，只想提供一些可以用来构建应用程序的图片。你或许会觉得你花了很多精力来调整应用程序，但实际上并没有。

练习 1. 首个 CSS 云

我们先从一个简单的云朵开始。这个云朵由一个矩形和两个圆形组成。你可以使用三个 div 元素，但我更喜欢尽可能地简化 HTML 代码。所以我用一个 div 元素来表示矩形，用两个伪元素来创建圆形。

这很简单。

 <div class="cloud_1_init"></div>
Enter fullscreen mode Exit fullscreen mode 
.cloud_1_init{
  top: 20px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
  height: 80px;
  position: relative;
  width: 200px;
}
.cloud_1_init:after,
.cloud_1_init:before {
  content: '';
  position: absolute;
  border-radius: 100px;
  }
.cloud_1_init:after {
  top: 0px;
  left: 30px;
  height: 60px;
  width: 60px;
  background: green;
}
.cloud_1_init:before {
  top: 0px;
  right: 30px;
  width: 100px;
  height: 100px;
  color: orange;
}
Enter fullscreen mode Exit fullscreen mode

云朵分解成若干部分

现在我们需要改变圆圈的背景，并将它们移近矩形。

 <div class="cloud_1"></div>
Enter fullscreen mode Exit fullscreen mode 
.cloud_1 {
    top: 20px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0,0,0, 0.1);
    height: 80px;
    position: relative;
    width: 200px;
  }

  .cloud_1:after,
  .cloud_1:before {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 100px;
  }
  .cloud_1:after {
    top: -30px;
    left: 30px;
    height: 60px;
    width: 60px;
  }
  .cloud_1:before {
    top: -56px;
    right: 30px;
    width: 100px;
    height: 100px;
  }
Enter fullscreen mode Exit fullscreen mode

我们的第一个基础云

瞧！第一朵云形成了！

练习2. 神奇的云

这个云朵很特别。它由一个矩形和三个正方形组成：一个div元素、两个伪元素和一个span元素。

<div class="FU_cloud">
  <span></span>
</div>
Enter fullscreen mode Exit fullscreen mode 
.FU_cloud{
  top: 60px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  background: green;
  left: -110px;
}
.FU_cloud:after {
  background: orange;
  right: -110px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  background: purple;
  top: -155px;
  margin: 0 auto;
  display: block;
  z-index: 1;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

矩形云

我们遇到的情况与第一个云朵相同。我们需要将各个元素滑动到一起，并将背景更改为白色。

<div class="FU_cloud">
  <span></span>
</div>
Enter fullscreen mode Exit fullscreen mode 
.FU_cloud{
  top: 30px;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
  height: 80px;
  width: 200px;
  position: relative;
}

.FU_cloud:after,
.FU_cloud:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top:-17px;
}
.FU_cloud:before {
  left: -40px;
}
.FU_cloud:after {
  right: -40px;
}
.FU_cloud span {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  top: -64px;
  margin: 0 auto;
  display: block;
  background: #fff;
  z-index: 1;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

完整的方形/矩形云

练习 3. 天气图像

让我们动手实践一下。我们将创建两幅图像：一幅普通的晴空云和一幅阴沉的暴风云。不过别担心，这很简单。

所有图片均基于本文。

首先，我们需要创建几个组件：

  • 云
  • 太阳
  • 闪电

我们的基础颜色组件的创建方式与第一个组件类似。

<div class="cloudBase">
  <div></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}
Enter fullscreen mode Exit fullscreen mode

基础云

云影

为了创建阴影，我们需要复制云朵并添加模糊效果，将其着色为蓝色，然后缩小其尺寸。

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}
Enter fullscreen mode Exit fullscreen mode

基云带阴影

步步：

  • 复制一朵蓝色的云。
  • 添加模糊效果。
  • 缩小 - transform: scale(0.8)。
  • 添加伪元素——两个白色圆圈来遮盖阴影。

太阳图像

这很简单：一个带阴影的圆圈和一个伪元素背景来提亮我们的太阳。

<div class="sun"></div>
Enter fullscreen mode Exit fullscreen mode 
.sun {
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  position: relative;
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

太阳

云和阳光

现在我们需要把太阳、云层和一些额外的阳光闪光结合起来。

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>

  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="sun"></div>
  <div class="flash"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #69C1F8;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #69C1F8;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}

.sun {
  position: absolute;
  top: -50px;
  right: -20px;
  z-index: -1;
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(30deg, #ffb347, #fbeb36);
  box-shadow: 0px -6px 36px 0px #fbeb36, 0px 0px 6px 0px #ffb347;
}
.sun:after {
  content: '';
  position: absolute;
  top:-3px;
  bottom:-3px;
  left:-3px;
  right:-3px;
  border-radius: 50%;
  filter: blur(10px);
  background: linear-gradient(30deg,rgb(251 235 54 / 30%) 20%,rgb(255 255 255 / 49%));
  z-index: 1;
}

.flash {
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  z-index: 2;
}
.flash:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  box-shadow: 0px 0px 6px 3px rgba(255,255,255,0.4);
  border-radius: 50%;
  filter: blur(0px);
  position: absolute;
  top: 60px;
  left: -10px;
}
Enter fullscreen mode Exit fullscreen mode

太阳下​​的云的完整图像

就是这样！你可以在 CodePen 上
玩转这朵阳光灿烂的云。

如你所见，创建这张图片只用了我们几分钟的时间。而且，基于这张图片创建另一张图片会更快。那么，让我们开始吧！

闪电

首先，我们通过合并两个三角形来创建一个闪电形状。现在，使用这两个三角形，并通过 CSS 为该形状添加动画效果。

<div class="lightningBolt"></div>
Enter fullscreen mode Exit fullscreen mode 
@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}
Enter fullscreen mode Exit fullscreen mode

闪电

暴雨云

好了！让我们把基本的云朵（灰色背景）、闪电以及一些 CSS 效果（例如风和水滴）结合起来，完成我们的云朵。

<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="wind"></div>
  <div class="lightningBolt"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.cloudWrap {
  position: relative;
  z-index: 1;
}
.cloudBase {
  top: 30px;
  background: #fff;         
  filter: drop-shadow(0px 5px 10px rgba(175, 215, 243, 0.6));
  height: 120px;
  width: 230px;
  position: relative;
  border-radius: 100px;
}

.cloudBase div {
  background: #fff;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow {
  position: absolute;
  top: 65px;
  left:0;
  right:0;
  background: #5B7186;
  height: 120px;
  width: 230px;
  border-radius: 100px;
  filter: blur(15px);
  transform: scale(0.8);
  opacity: 0.4;
  z-index: 2;
}

.cloudBaseShadow div {
  background: #5B7186;
  height: 120px;
  width: 120px;
  position: relative;
  top: -60px;
  margin: 0 auto;
  border-radius: 100%;
}

.cloudBaseShadow div:after,
.cloudBaseShadow div:before {
  content: '';
  position: absolute;
  background: #fff;
  height: 100px;
  width: 100px;
  filter: blur(16px);
  border-radius: 100%;
}
.cloudBaseShadow div:after {
  right: -12px;
  top: -20px;
}
.cloudBaseShadow div:before {
  right: -92px;
  top: 33px;
}


@keyframes flash{
  0%, to { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: .6; }
  8% { opacity: .2; }
  10% { opacity: .9; }
}

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


.lightningBolt {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -40px;
  animation: flash 3s infinite, float 3s ease-in-out infinite;
}

.lightningBolt:before,
.lightningBolt:after {
  content: '';
  position: absolute;
}
.lightningBolt:before {
  width: 0;
  height: 0;
  left: -4px;
  top: 5px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg);
}
.lightningBolt:after {
  width: 0;
  height: 0;
  left: 4px;
  top: -40px;
  border-style: solid;
  border-width: 0px 13px 24px 70px;
  border-color: transparent transparent #fbeb36 transparent;
  transform: rotate(-60deg) scaleY(-1) scaleX(-1);
}

.wind {
  position: absolute;
  top: 20px;
  left: -10px;
  width: 90px;
  height: 20px;
  background: linear-gradient(-90deg,rgb(91 113 134 / 0.4),transparent);
  z-index: -1;
}
.wind:before {
  content: '';
  width: 60px;
  height: 20px;
  background: linear-gradient(90deg,transparent,rgb(91 113 134 / 0.4));
  position: absolute;
  top: 60px;
  right: -190px;
}
.wind:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  z-index: 1;
  filter: blur(2px);
  z-index: 1;
  box-shadow: 
  50px -30px 2px rgb(91 113 134 / 0.4),
  -20px 90px 0px rgb(91 113 134 / 0.4),
  240px 10px 2px rgb(91 113 134 / 0.4);
  animation: float 3s ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

完全的风暴云

你可以在 CodePen 上体验一下风暴云的效果。

家庭作业

现在你知道如何制作超棒的天气图片了，那就动手创作你自己的作品吧！雪？暴风雪？还是雾？在 Twitter 上分享你的 Codepen 作品，并加上 #frontendunicorns 标签！
感谢阅读！

你可以在社交媒体上关注我，或者订阅我的电子报！
🐦 Twitter
👨🏻‍💻博客
📰 Medium
💌电子报
🦄 Frontend Unicorn 书籍

文章来源：https://dev.to/albertwalicki/create-beautiful-images-in-css-to-buff-up-your-portfolio-113i
利用 bolha dev ao s...
给初级开发者的 10 个技巧 - ...