携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言

上次分享的纯CSS实现电风扇的特效还是获得不少掘友的浏览和三连的，在这里再次感谢大家的捧场🙏，这为我继续分享CSS特效提供了不小动力和激情。如果新来捧场的掘友不知道发生了啥，可以直接点击夏日里，分享一个清新凉爽的纯CSS3电风扇的动画DEMO效果这个链接进去瞅瞅电风扇特效。

今天是七夕节，在这个节日气氛浓重的节气，蹭一波七夕节的热度。这次就给大家分享一个纯CSS3实现大宝剑的特效，让大家在今天能获得大宝剑的力量，不用去大保健就能威武雄壮一整年😅，顺风顺水顺财神，朝朝暮暮有人疼。

背景

网上搜索图片的时候看见一个大宝剑的图片还挺好看，想着能不能来实现一下。如图：

然后就有了今天要分享的主题。下面要来实现上图的效果就是纯CSS实现的，所需的技术就只要求你会基础的HTML和CSS知识就行了。如果你耐心的看完文章，就一定能在闲暇的时间完美复刻效果。届时希望每个掘友都人手一把大宝剑，然后用自己实现的大宝剑能在今后的工作中披荆斩棘，乘风破浪。

实现

下面就来看看，怎么用代码来实现类似背景中所示的大宝剑效果的。主要模块分为剑柄和剑身两块来展开叙说，具体操作请往下看👇

一、准备工作

首先我不知道你们平时得到一张图之后，是怎么去获得图中所有颜色信息的？是自己用吸色工具去一个个挨着吸的呢，还是把图交给UI设计师让他给你吸取的呢？反正我不是那样去做的，而是把图片上传到在线解析网站，让网站解析完成之后告诉我所有色值。我觉得该网站还是挺靠谱的，虽说不是100%完全能解析，至少也能八九不离十。下面就给你们看看上面图片解析之后结果，如下图：

可以看到最后解析出来的结果还算匹配，至于没有解析出来的色值那就可以用微信或者QQ的截图快捷键去吸取色值即可。

接着再给大家介绍一个我经常用的RGB颜色值与十六进制颜色码转换的工具网站，那就是www.sioe.cn/yingyong/ya…， 这个网站搞前端的掘友应该不会陌生，色值转换还是多方便的。

开始编码前就给大家安利上面2个工具网站，希望能帮助到有需要的掘友🙏。

二、剑柄

下面就正式开始我们大宝剑剑柄的编码工作，其实整个大宝剑的实现非常简单，就是一些div盒子堆叠而成，然后用样式控制位置和效果就可以了。如下：

<div class="l-container container">
    <div class="l-sword">
        <div class="l-handle-orb handle-orb"></div>
        <div class="l-handle-block handle-block"></div>
        <div class="l-handle-block-curve handle-block-curve"></div>
        <div class="l-handle handle"></div>
        <div class="l-small-handle-block handle-block"></div>
        <div class="l-large-handle-block-curve handle-block-curve"></div>
    </div>
</div>

感觉没有啥可以说的，就是把div挨着排列，然后用样式去控制每个div的样式而已。还是直接上样式代码，结合效果图来看看就知道上面每个div的意义了。如下：

.l-container {
  width: 50px;
  height: 400px;
  position: absolute;
  right: 50%;
  top: 15%;
}

.l-sword {
  height: 100%;
}

.l-handle-orb {
  width: 15px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 7px;
  z-index: -1;
}
.l-handle-orb:after {
  content: ' ';
  display: block;
  position: relative;
  width: 5px;
  height: 5px;
}

.handle-orb {
  color: #6572b6;
}
.handle-orb:after {
  border-radius: 20px;
  border: 5px solid #6572b6;
  background-color: #6572b6;
}

.l-handle-block {
  width: 100%;
  height: 20px;
  display: block;
  margin: 0 auto;
  background-color: #757576;
}

.l-small-handle-block {
  width: 100%;
  height: 10px;
  display: block;
  margin: 0 auto;
  background-color: #757576;
}

.handle-block {
  color: #757576;
}

.l-handle-block-curve {
  position: absolute;
  width: 75px;
  left: -13px;
  z-index: 1;
  height: 3px;
  display: block;
  margin: 0 auto;
}

.l-large-handle-block-curve {
  position: absolute;
  width: 85px;
  left: -18px;
  z-index: 1;
  height: 3px;
  display: block;
  margin: 0 auto;
}
.l-large-handle-block-curve:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -3px;
  left: -3px;
  width: 10px;
  height: 10px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #757576;
}
.l-large-handle-block-curve:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #757576;
}

.handle-block-curve {
  background-color: #757576;
}

.l-handle {
  width: 60%;
  height: 70px;
  display: block;
  margin: 0 auto;
}
.l-handle:after {
  content: ' ';
  display: block;
  position: relative;
  margin: 0 auto;
}

.handle {
  background-image: repeating-linear-gradient(180deg, #a2a8ca 2px, #757576 8px);
}

效果图如下：

从样式代码可以看到，语法都是简单的语法。div的样式都是配合定位进行实现的，至于剑柄中有一些圆形的装饰效果则是使用CSS的:before和:after选择器实现的。

三、剑身

好，剑柄已经实现，下面就来实现大宝剑的剑身。代码也很简单，直接上代码，如下：

<div class="l-container container">
  <div class="l-sword">
    <div class="l-handle-orb handle-orb"></div>
    <div class="l-handle-block handle-block"></div>
    <div class="l-handle-block-curve handle-block-curve"></div>
    <div class="l-handle handle"></div>
    <div class="l-small-handle-block handle-block"></div>
    <div class="l-large-handle-block-curve handle-block-curve"></div>
    <!--剑身↓-->
    <div class="l-blade">
      <div class="l-blade-top blade-top"></div>
      <div class="l-blade-left blade-left"></div>
      <div class="l-blade-right blade-right"></div>
      <div class="l-blade-bottom blade-bottom"></div>
    </div>
  </div>
</div>

这个代码也没有啥解释的，还是要根据样式代码和实现的效果结合来理解。如下：

.l-blade {
  height: 200px;
  position: relative;
}

.l-blade-top {
  width: 0;
  height: 0;
  position: absolute;
  left: 10%;
}

.blade-top {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #70D0BF;
}

.l-blade-left {
  position: absolute;
  top: 0;
  left: 15%;
  width: 35%;
  height: 125%;
  z-index: -1;
}

.l-blade-right {
  position: absolute;
  top: 0;
  right: 15%;
  width: 35%;
  height: 125%;
  z-index: -1;
}

.blade-left {
  background-color: #A3E8DA;
}

.blade-right {
  background-color: #41AD9B;
}

.l-blade-bottom {
  left: 14%;
  top: 215px;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-bottom-color: #CFFBF6;
  position: relative;
}
.l-blade-bottom:after {
  content: '';
  position: absolute;
  left: -18px;
  top: 18px;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-top-color: #CFFBF6;
}

效果图如下所示：

看到剑身效果是不是就感觉这事要成？没错，就是成了。一不留神，整个大宝剑的雏形已经形成，至于代码真的没有啥难以理解的点，就是在考验咱们自己的CSS基本功。

最后让我们来看看将剑柄和剑身合起来之后蠢萌中不乏剑气逼人的大宝剑效果。如下图所示：

四、码上掘金

后面，CSS效果相关的完整代码都会分享到码上掘金，避免我演示的代码你拿去之后不能运行或者效果不一致。所以今后分享的特效都会在码上掘金展现，感兴趣的掘友可以去码上掘金运行看效果，也可以自行拷贝到本地运行看效果。

总结

到这里，纯CSS3实现大宝剑的特效就聊完了。总结感觉没啥可以总结的，就是CSS的基础操作，代码也没有太困难的代码，唯一难的就是大宝剑这个想法，CSS特效真的是只要敢想就真的可以做出来的。在CSS面前，真的就是Everything is possible！

最后，感谢看文至此的掘友们。七夕节也没有啥送给大家的，在此就送大家一把大宝剑🔪，希望今天这个情人节掘友们都都能过得开心，玩得高兴，感情顺利，一切顺心💖。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。