阅读 1145

从中秋之月到宇宙洪荒-纯CSS实现3d星球

“我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”

背景

马上中秋了，画个月亮吧，普通的月亮太不真实，就来个月球吧。光一个月球太简单就来个地月日吧，再加入八大行星，加个宇宙背景，嗯，完美的可以去参加掘金中秋技术征文大赛了！

月球的实现

我们画个圆，然后想让他变成球，这个挺有难度。所以我们换个角度，通过视觉效果来画星球。我们可以利用一个有星球背景图的元素移动，外部元素作为圆形，超出内部区域隐藏，再加个倾斜的角度（transform: rotateZ(25deg);）这样看起来就会像星球在旋转，代码如下：

<div class="ps-center moon-box">
  <div class="moon"></div>
</div>
复制代码
.ps-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.moon-box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: rotateZ(25deg);
}
.moon{
  width: 400px;
  height: 100px;
  background: url(./img/moon.jpg);
  background-size: 100% 100%;
  position: absolute;
  left: -200px;
  animation: moonRole 3s linear infinite;
}
@keyframes moonRole {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(200px);
  }
}
复制代码

注意：背景元素宽度大小是月亮盒子元素宽度的4倍，背景图要俩个相同的月球平面展开图，平铺，因为是上下左右居中的，所以背景元素左移背景宽度的一半，做平移一半背景的动效，就刚好像旋转一周 moonrole.gif 但是，看着不够3d啊，没关系，月球是绕着地球转的，有了这个就更立体了，让我们进入下一步

月球公转

按照月球画个地球，然后让月球绕着地球旋转，嗯，就这么简单。但是由里向外这样旋转怎么实现呢？我们都知道在真实的视觉空间里会有近大远小的情况，我们只需要平移星球，然后根据近大远小的规则放缩星球就会呈现出由外到里绕地球公转的感觉。代码如下：

<div class="ps-center em-box">
  <div class="ps-center earth-box">
    <div class="earth"></div>
  </div>
  <div class="ps-center moon-box">
    <div class="moon"></div>
  </div>
</div>
复制代码
.em-box {
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
  width: 600px;
  height: 600px;
  transform: rotateZ(20deg);
}
.earth-box {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(5, 97, 184, 0.952), -1px -2px 10px rgba(256,256,256,0.5) inset;
}
.earth {
  width: 800px;
  height: 200px;
  background: url(./img/earth.jpeg);
  background-size: 100% 100%;
  position: absolute;
  left: -400px;
  animation: earthRole 3s linear infinite;
}
@keyframes earthRole {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(400px);
  }
}
.moon-box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
  animation: roleEarth 3s linear infinite;
}
@keyframes roleEarth {
  0% {
    transform: translateX(-400px) translateZ(0) scale(1);
  }
  25% {
    transform: translateX(0) translateZ(400px) scale(1.5);
  }
  50% {
    transform: translateX(400px) translateZ(0) scale(1);
  }
  75% {
    transform: translateX(0) translateZ(-400px) scale(0.5);
  }
  100% {
    transform: translateX(-400px) translateZ(0) scale(1);
  }
}
.moon{
  width: 400px;
  height: 100px;
  background: url(./img/moon.jpg);
  background-size: 100% 100%;
  position: absolute;
  left: -200px;
  animation: moonRole 3s linear infinite;
}
@keyframes moonRole {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(200px);
  }
}
复制代码

注意：父元素倾斜，子元素就跟着倾斜了 em.gif

地月日

接下来我们继续画太阳吧，然后让地球和月亮整体绕着太阳公转，实现地月日。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>moon</title>
  <style>
    .content-box {
      position: relative;
      width: 1000px;
      height: 600px;
      transform-style: preserve-3d;
      perspective-origin: 50% 50%;
      transform: rotateZ(25deg);
    }
    .ps-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    .sun-box {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(247, 125, 4, 0.961), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .sun {
      width: 400px;
      height: 200px;
      position: absolute;
      left: -200px;
      background: url(./img/sun.jpg);
      background-size: 100% 100%;
      animation: sunRole 5s linear infinite;
    }
    @keyframes sunRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(200px);
      }
    }

    .em-box {
      transform-style: preserve-3d;
      perspective-origin: 50% 50%;
      width: 400px;
      height: 400px;
      animation: roleSun 10s linear infinite;
    }
    .earth-box {
      transform: rotateZ(20deg);
      width: 50px;
      height: 50px;
      overflow: hidden;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(5, 97, 184, 0.952), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .earth {
      width: 200px;
      height: 50px;
      background: url(./img/earth.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -100px;
      animation: earthRole 3s linear infinite;
    }
    @keyframes earthRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(100px);
      }
    }
    .moon{
      width: 120px;
      height: 30px;
      background: url(./img/moon.jpg);
      background-size: 100% 100%;
      position: absolute;
      left: -60px;
      animation: moonRole 1s linear infinite;
    }
    @keyframes moonRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(60px);
      }
    }
    .moon-box {
      width: 30px;
      height: 30px;
      overflow: hidden;
      border-radius: 50%;
      animation: roleEarth 3s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    @keyframes roleEarth {
      0% {
        transform: translateX(-80px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(200px) scale(1.5);
      }
      50% {
        transform: translateX(80px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-200px) scale(0.5);
      }
      100% {
        transform: translateX(-80px) translateZ(0) scale(1);
      }
    }
    @keyframes roleSun {
      0% {
        transform: translateX(-300px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(400px) scale(1.5);
      }
      50% {
        transform: translateX(300px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-400px) scale(0.5);
      }
      100% {
        transform: translateX(-300px) translateZ(0) scale(1);
      }
    }
  </style>
</head>
<body>
  <div class="content-box">
    <div class="ps-center sun-box">
      <div class="sun"></div>
    </div>
    <div class="ps-center em-box">
      <div class="ps-center earth-box">
        <div class="earth"></div>
      </div>
      <div class="ps-center moon-box">
        <div class="moon"></div>
      </div>
    </div>
  </div>
</body>
</html>
复制代码

注意：绕谁转就给谁的父元素设置transform-style: preserve-3d; ems.gif

太阳系

再把八大行星加进来绕太阳公转（模仿地月整体，搬砖苦力活儿）太阳系星体就完成了，最后加个好看的宇宙星图背景，就是宇宙（假的）。全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .bg-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: url(./img/yuzhou.jpeg);
      background-size: 100% 100%;
    }
    .content-box {
      position: relative;
      width: 1000px;
      height: 600px;
      transform-style: preserve-3d;
      perspective-origin: 50% 50%;
      transform: rotateZ(25deg);
    }
    .ps-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    .sun-box {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(247, 125, 4, 0.961), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .sun {
      width: 400px;
      height: 200px;
      position: absolute;
      left: -200px;
      background: url(./img/sun.jpg);
      background-size: 100% 100%;
      animation: sunRole 5s linear infinite;
    }
    @keyframes sunRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(200px);
      }
    }
    .em-box {
      transform-style: preserve-3d;
      perspective-origin: 50% 50%;
      width: 400px;
      height: 400px;
      animation: roleSun 10s linear infinite;
    }
    .earth-box {
      transform: rotateZ(20deg);
      width: 50px;
      height: 50px;
      overflow: hidden;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(5, 97, 184, 0.952), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .earth {
      width: 200px;
      height: 50px;
      background: url(./img/earth.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -100px;
      animation: earthRole 3s linear infinite;
    }
    .moon{
      width: 120px;
      height: 30px;
      background: url(./img/moon.jpg);
      background-size: 100% 100%;
      position: absolute;
      left: -60px;
      animation: moonRole 1s linear infinite;
    }
    .moon-box {
      width: 30px;
      height: 30px;
      overflow: hidden;
      border-radius: 50%;
      animation: roleEarth 3s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .water{
      width: 160px;
      height: 40px;
      background: url(./img/water.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -80px;
      animation: waterRole 2s linear infinite;
    }
    .water-box {
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 50%;
      animation: waterRoleSun 7s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .gold{
      width: 200px;
      height: 50px;
      background: url(./img/gold.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -100px;
      animation: goldRole 2s linear infinite;
    }
    .gold-box {
      width: 50px;
      height: 50px;
      overflow: hidden;
      border-radius: 50%;
      animation: goldRoleSun 2s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .fire{
      width: 180px;
      height: 45px;
      background: url(./img/fire.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -90px;
      animation: fireRole 2s linear infinite;
    }
    .fire-box {
      width: 45px;
      height: 45px;
      overflow: hidden;
      border-radius: 50%;
      animation: fireRoleSun 3s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .mood{
      width: 320px;
      height: 80px;
      background: url(./img/mood.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -160px;
      animation: moodRole 2s linear infinite;
    }
    .mood-box {
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 50%;
      animation: moodRoleSun 6s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    .soil{
      width: 280px;
      height: 70px;
      background: url(./img/soil.jpeg);
      background-size: 100% 100%;
      position: absolute;
      left: -140px;
      animation: soilRole 2s linear infinite;
    }
    .soil-box {
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 50%;
      animation: soilRoleSun 5s linear infinite;
      box-shadow: -4px 0 10px rgba(256,256,256,0.3), -1px -2px 10px rgba(256,256,256,0.5) inset;
    }
    @keyframes earthRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(100px);
      }
    }
    @keyframes moonRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(60px);
      }
    }
    @keyframes waterRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(80px);
      }
    }
    @keyframes goldRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(100px);
      }
    }
    @keyframes fireRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(90px);
      }
    }
    @keyframes moodRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(160px);
      }
    }
    @keyframes soilRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(140px);
      }
    }
    @keyframes skykingRole {
      0% {
        transform: translate(0);
      }
      100% {
        transform: translate(120px);
      }
    }
    @keyframes roleSun {
      0% {
        transform: translateX(-300px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(400px) scale(1.5);
      }
      50% {
        transform: translateX(300px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-400px) scale(0.5);
      }
      100% {
        transform: translateX(-300px) translateZ(0) scale(1);
      }
    }
    @keyframes waterRoleSun {
      0% {
        transform: translateX(-150px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(200px) scale(1.5);
      }
      50% {
        transform: translateX(150px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-200px) scale(0.5);
      }
      100% {
        transform: translateX(-150px) translateZ(0) scale(1);
      }
    }
    @keyframes goldRoleSun {
      0% {
        transform: translateX(-220px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(300px) scale(1.5);
      }
      50% {
        transform: translateX(220px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-300px) scale(0.5);
      }
      100% {
        transform: translateX(-220px) translateZ(0) scale(1);
      }
    }
    @keyframes fireRoleSun {
      0% {
        transform: translateX(-350px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(500px) scale(1.5);
      }
      50% {
        transform: translateX(350px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-500px) scale(0.5);
      }
      100% {
        transform: translateX(-350px) translateZ(0) scale(1);
      }
    }
    @keyframes moodRoleSun {
      0% {
        transform: translateX(-450px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(600px) scale(1.5);
      }
      50% {
        transform: translateX(450px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-600px) scale(0.5);
      }
      100% {
        transform: translateX(-450px) translateZ(0) scale(1);
      }
    }
    @keyframes soilRoleSun {
      0% {
        transform: translateX(-550px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(700px) scale(1.5);
      }
      50% {
        transform: translateX(550px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-700px) scale(0.5);
      }
      100% {
        transform: translateX(-550px) translateZ(0) scale(1);
      }
    }
    @keyframes roleEarth {
      0% {
        transform: translateX(-80px) translateZ(0) scale(1);
      }
      25% {
        transform: translateX(0) translateZ(200px) scale(1.5);
      }
      50% {
        transform: translateX(80px) translateZ(0) scale(1);
      }
      75% {
        transform: translateX(0) translateZ(-200px) scale(0.5);
      }
      100% {
        transform: translateX(-80px) translateZ(0) scale(1);
      }
    }
  </style>
</head>
<body>
  <div class="bg-box">
    <div class="content-box">
      <div class="ps-center sun-box">
        <div class="sun"></div>
      </div>
      <div class="ps-center em-box">
        <div class="ps-center earth-box">
          <div class="earth"></div>
        </div>
        <div class="ps-center moon-box">
          <div class="moon"></div>
        </div>
      </div>
      <div class="ps-center gold-box">
        <div class="gold"></div>
      </div>
      <div class="ps-center mood-box">
        <div class="mood"></div>
      </div>
      <div class="ps-center water-box">
        <div class="water"></div>
      </div>
      <div class="ps-center fire-box">
        <div class="fire"></div>
      </div>
      <div class="ps-center soil-box">
        <div class="soil"></div>
      </div>
    </div>
  </div>
</body>
</html>
复制代码

universe.gif 最后发现星球大小及间距啥的没有调好，窗口放不下了QAQ，只画了金木水火土五颗行星。。。后边的就留给聪明又勤奋好学的大家补充吧。还有土星🪐的环状卫星带，如果大家实现了，欢迎下边评论交流！

最后，祝大家中秋快乐！希望中个奖！！！手动@掘金酱

文章分类
前端
文章标签
掘金技术征文
相关推荐
  • 阿里巴巴TXD
    3月前
    前端 CSS
    CSS 动画实现星球环绕效果
    今天为大家带来一个实用的前端小技巧，用CSS实现行星环绕运动 🪐 的效果，这来源于设计师山田日“奇怪”的想法。
    • 4776
    • 12
    CSS 动画实现星球环绕效果
  • 嘟嘟MD
    4月前
    three.js 前端
    Threejs实现酷炫3D地球技术点汇总
    本次分享的特效案例，基于官方项目r129版本，实现的超酷炫Threejs 3D地球，喜欢的可以点个赞
    • 2970
    • 7
    Threejs实现酷炫3D地球技术点汇总
  • 李振文
    3月前
    JavaScript WebGL 前端
    教你如何用Three.js创造一个三维太阳系
    笔者认为Three.js是一个伟大的框架，为什么这样说，因为它可以让我们轻易创造三维世界，甚至好像笔者写这遍教程，可以创造一个太阳系，在这个三维世界里你就是创世主。
    • 2345
    • 13
    教你如何用Three.js创造一个三维太阳系
  • 起小就些熊
    2月前
    前端 CSS
    前端游戏巨制! CSS居然可以做3D游戏了
    偶然接触到CSS的3D属性, 就萌生了一种做3D游戏的想法. 今天我就来带大家玩一个从未有过的全新3D体验. CSS的3D属性很少,即使只有沙盒, 也有「我的世界」这种神作...
    • 7924
    • 62
    前端游戏巨制! CSS居然可以做3D游戏了
  • 快跑啊小卢_
    1月前
    前端 CSS
    一个"剑气"加载🌪️
    我们在网页加载的时候总会加上一些过渡效果来引导用户，减少白屏时间，而加载的效果可以用svg也可以使用一些我们封装好的组件,今天就...
    • 1.4w
    • 66
    一个"剑气"加载🌪️
  • Rocky1
    2年前
    CSS
    CSS3实现3D魔方效果
    代码：图片路径自调试！
    • 228
    • 评论
  • 大猿猴的前端世界
    3年前
    CSS JavaScript
    CSS3动画实现3D倒计时效果
    先介绍CSS3动画如何使用？两步即可搞定。 每个时间点可以指定多个样式属性attr与对应值value。 重点来了，一个倒计时效果是如何实现的，先看效果。由于是压缩生成的gif，所以看起来会很快。 这里有一个地方需要特别注意，避免以后踩坑。 关于动画样式的解绑与绑定。 动画样式a…
    • 1283
    • 评论
  • java李杨勇
    1月前
    前端 HTML CSS
    HTML+CSS+JS实现 宇宙星球旋转动画特效
    ​  ​HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️ ​ css样式： html : js文件在上面截图可以看到 需要引进来。 ​ ​
    • 2237
    • 2
    HTML+CSS+JS实现 宇宙星球旋转动画特效
  • dufeng
    1月前
    CSS
    (中秋创意投稿)纯css实现3d效果,嫦娥卫星环月动画。
    “我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛” 前言： 至此中秋佳节之际，我们的神州十二号于9月17号也传来了顺利返航的消息。突然就想到了我国的嫦娥卫星探月。古代有嫦娥奔月的神话，现代我国
    • 660
    • 6
    (中秋创意投稿)纯css实现3d效果,嫦娥卫星环月动画。
  • alphardex
    5月前
    three.js WebGL 前端
    用 three.js 画个炫彩液晶球
    大家好，这里是 CSS 魔法使——alphardex。 本文我们将用three.js来画个炫彩液晶球，一起来创作吧！
    • 6818
    • 10
    用 three.js 画个炫彩液晶球
  • 天明夜尽
    11月前
    CSS GitHub
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …
    • 3.6w
    • 37
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
  • 泱泱
    3年前
    CSS SVG 动效
    不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
    CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一…
    • 9525
    • 42
  • 阴明
    6年前
    CSS 动效
    UFO - CSS 实现绕月动画
    用纯 CSS 的动画实现的绕月效果，用了 backface-visibility 这样的奇技淫巧
    • 963
    • 评论
    UFO - CSS 实现绕月动画
  • 人人网FED
    3年前
    CSS JavaScript SVG
    用CSS Houdini画一片星空
    要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。 这3个例子都是用了Houdini里面的CSS Paint API。 第1个例子如果使用传…
    • 9863
    • 13
    用CSS Houdini画一片星空
  • NingBo
    2年前
    前端 three.js
    使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果
    第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…
    • 1.0w
    • 26
  • ssh_晨曦时梦见兮
    9月前
    JavaScript 前端
    Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代
    随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。 在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公…
    • 4.3w
    • 185
    Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代
  • Jimmy
    1年前
    CSS 前端
    CSS八种让人眼前一亮的HOVER效果
    巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs
    • 3.2w
    • 90
  • 前端早早聊
    3月前
    前端 面试
    今天聊：大厂如何用一道编程题考察候选人水平
    - 面试官和候选人的知识结构可能有差异 => 可能会错过优秀的人 - 遇到「面霸」，频繁面试刷题，但是实际能力一般 => 招到不合适的人 - 要在短短半个小时到一个小时内判断一个人，其实很难
    • 7833
    • 26
    今天聊：大厂如何用一道编程题考察候选人水平
  • yitalalww
    3年前
    前端 CSS
    给我三行代码，还你一个海洋-致敬中国第四届CSS大会
    代码很简单，只有几行代码。
    • 2579
    • 24
  • chokcoco
    2年前
    CSS 动效 前端
    不可思议的纯 CSS 实现鼠标跟随效果
    直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CS…
    • 2.2w
    • 105
    不可思议的纯 CSS 实现鼠标跟随效果
    • 关于作者
    获得点赞12
    文章被阅读2,460
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    不忘初心，让你更有成就感的实用CSS3动效
    5
    2
    CSS 动画实现星球环绕效果
    97
    12
    不可思议的纯 CSS 实现鼠标跟随效果
    701
    105
    纯CSS实现简单骨骼动画
    686
    68
    CSS 奇思妙想边框动画
    2280
    250