太酷了，纯 CSS 实现微软、谷歌和苹果的官方 Logo！

前端开发博客

于 2024-07-05 08:30:59 发布

阅读量660

点赞数 20

本文链接：https://blog.csdn.net/lgno2/article/details/140224213

版权

最近，我看到很多前端开发者用纯 CSS 重现各种经典 Logo，这简直是太酷了！这些作品不仅展示了 CSS 的强大功能，更体现了前端开发者的创意和技巧。

微软Logo

Microsoft Logo 非常简单，非常适合刚开始学习 CSS 的新手。

image.png

<body translate="no">
  <div class="logo">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</div>
<div class="logo-text">
  <p>Microsoft</p>
</div>
</body>

$text-color: #757575;
$background: #FFF;
$red: #F65314;
$green: #7CBB00;
$blue: #00A1F1;
$yellow: #FFBB00;

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: $background;
  font-family: Helvetica;
}

.logo {
  height: 90px;
  width: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  padding: 0px;
}

.box {
  height: 42.5px;
  width: 42.5px;
}

.box1 {
  background: $red;
}

.box2 {
  background: $green;
}

.box3 {
  background: $blue;
}

.box4 {
  background: $yellow;
}

.logo-text {
  font-size: 90px;
  margin-left: 20px;
  color: $text-color;
}

演示：https://codepen.io/omar110894/pen/LmMrmP

谷歌Logo

这个 Google Logo 只用了一个 div 就完成了，使用了 conic-gradient() CSS 函数，非常厉害！

html

<div class="google"></div>
<div class="google" style="--size: 20vw;"></div>
<div class="google" style="--size: 10vw;"></div>
<div class="google" style="--size: 5vw;"></div>

CSS

html,
body {
  --bg: #000000;
 min-height: 100vh;
 display: flex;
 align-content: center;
 justify-content: center;
 align-items: center;
  gap: 10px;
 background-color: var(--bg);
}

.google {
 --blue: #4285f4;
 --red: #ea4335;
 --green: #34a853;
 --yellow: #fbb605;
 --size: 30vw;
 position: relative;
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
  background: conic-gradient(from 0deg at 32% 50%, var(--red) 20%, var(--blue) 20%, var(--blue) 37.5%, var(--green) 37.5%, var(--green) 62.5%, var(--yellow) 62.5%, var(--yellow) 87.5%, var(--red) 87.5%);
  clip-path: polygon(0% 0%, 100% 0%, 55% 44%, 100% 44%, 100% 100%, 0% 100%);
}

.google::before {
 content: "";
  position: absolute;
 display: block;
  background-color: var(--bg);
  width: calc(var(--size) * 0.6);
  height: calc(var(--size) * 0.6);
  border-radius: 50%;
  top: calc((var(--size) * 0.4)  / 2);
  left: calc((var(--size) * 0.4)  / 2);
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 50% 40%, 50% 70%, 100% 70%, 100% 100%, 0% 100%);
}

演示：https://codepen.io/gwannon/pen/KKBEQqg

苹果Logo

image.png

Apple Logo 看起来不太容易用 CSS 实现一些巧妙的效果，你只能一点一点地构建它。

<div class="apple">
    <div class="top"><span></span></div>
    <div class="middle"><span></span></div>
    <div class="footer"></div>
</div>

.apple, .butt:before, .top span:after, .middle:after, .top:before, .top:after, .middle:before, .butt:after {
    background: #FFF; /* foreground color */
}
body, .footer, .middle span, .middle, .top, .top span {
 background: #CCC; /* background color */
}
.apple {
    width: 230px;
    height: 200px;
    border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%;   
    position: relative;
    margin: 80px auto 0;
}
.footer {
    position: absolute;
    width: 60%;
    height: 62%;
    right: -40%;
    top: 8%;
    border-radius: 60%;
}
.middle span {
    display: block;
    position: absolute;
    border-radius: 100% 100% 0% 0%;
    width: 24.5%;
    height: 400%;
    bottom: -239%;
    left: 38%;
}
.middle {
    position: absolute;
    width: 100%;
    height: 4%;
    bottom: -1%;
}
.middle:before {
    content: '';
    position: absolute;
    width: 24%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    left: 21%;
    bottom: 38%;
}
.middle:after {
    content: '';
    position: absolute;
    width: 23.4%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    right: 21%;
    bottom: 38%;
}


.top span {
    display: block;
    position: absolute;
    border-radius: 0 0 44% 44% / 0 0 100% 100%;
    width: 63%;
    height: 259%;
    top: -92%;
    left: 18.6%;
    z-index: 3;
}
.top span:after {
    border-radius: 100% 0 100% 0;
    content: "";
    height: 242%;
    left: 41%;
    position: absolute;
    top: -193%;
    width: 90%;
}
.top {
    position: absolute;
    width: 42%;
    height: 4%;
    top: 0px;
    left: 29%;
}
.top:before {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%;
    left: -27%;
    top: 1%;
}
.top:after {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%;
    right: -27%;
    top: 1%;
}