吕布的回城特效有了，貂蝉的也要有，用css3制作一款貂蝉的简易回城特效

十里青山

发布于 2022-08-22 09:54:25

5270

发布于 2022-08-22 09:54:25

文章被收录于专栏：我的前端之路

在线预览地址： https://ihope_top.gitee.io/bamboo-pole/ gitee地址： https://gitee.com/ihope_top/my-demo 吕布回城文章： https://cloud.tencent.com/developer/article/2078692

前言

前两天用css3写了一个吕布的回城特效，感觉还行，不过吕布有了，作为吕布对象的貂蝉怎么能没有呢？今天就来用css3再给貂蝉也来一套，写的不好不要喷我哦

首先还是先来看效果图，确实有点简单哈

【GIF版】

人形立绘为文章发布后加上的，对代码结构进行了细微跳转，可能与文章内部分代码不同，但基本没有大的影响，可以直接点击文章头部链接查看源代码

【代码块版】

由于代码块的显示区域太小，这里对body进行了缩放 https://code.juejin.cn/pen/7089100660683046920

代码实现

这次的地盘部分我们没有采用较为复杂的图形，主要也写不出来，这里就参考了游戏默认的回城效果，两个嵌套的圆环，外加一点内阴影，这样就搞定了。

<!-- 回城底部圆形波 -->
<div id="bottom-wrap">
  <div class="bottom-item">
  </div>
</div>

/* 圆形底纹 */
#bottom-wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  left: 50%;
  margin-left: -300px;
  bottom: -300px;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
  transform: rotateX(90deg);
  border: 5px solid #ffb9ff;
  box-shadow: 0 0 50px 2px rgb(255 155 238 / 80%) inset;
}
.bottom-item {
  border: 5px solid #ffb9ff;
  box-shadow: 0 0 50px 2px rgb(255 155 238 / 80%) inset;
  width: 75%;
  height: 75%;
  box-sizing: border-box;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

下面我们再来加一个回城的光束，不让画面显得那么单调，这个我们直接加到底盘中，利用定位把它立起来就好了，再加一个渐变，透明度之类的就好了。

<div id="bottom-wrap">
  <div class="bottom-item">
      <div class="bottom-content">
      </div>
  </div>
</div>

.bottom-content {
  position: absolute;
  width: 100%;
  height: 4500px;
  opacity: .7;
  background-image: linear-gradient(to right, transparent, rgb(255 151 247 / 60%) ,rgb(253 192 255), rgb(255 151 247 / 60%) 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent -10%,#fff 20%, #fff 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent -10%,#fff 20%, #fff 80%, transparent);
  bottom: 50%;
}

现在画面就变成了这个样子

然后我们再来加一点动态的效果，给一个向上运动的圆环，我们可以直接把里面的那个圆复制一个，然后给一个不断向上运动的动画

    <!-- 回城底部圆形波 -->
    <div id="bottom-wrap">
      <div class="bottom-item">
        <div class="bottom-content">
        </div>
      </div>
      <div class="bottom-item copy"></div>
    </div>

.bottom-item.copy {
  animation: moveTop .5s linear infinite;
}

@keyframes moveTop {
  from{
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(0);
  } to{
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(1200px);
  }
}

这样子就有点像那么回事了

我们在上一篇中用到的旋转的光束效果挺不错的，这里也可以拿过来，改改颜色，再变换个角度，直接就能用，具体咋实现的可以参考上篇文章，文章头部也有上一篇的链接。

    <!-- 旋转光圈 -->
    <div class="light-wrap one">
      <div class="light-item one"></div>
    </div>
    <div class="light-wrap two">
      <div class="light-item two"></div>
    </div>

.light-wrap {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 50%;
  bottom: -400px;
  margin-left: -400px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateZ(30deg);
  margin-bottom: 375px;
}
.light-wrap.one {
  transform: rotateX(0deg) rotateZ(150deg);
}
.light-item {
  width: 800px;
  height: 800px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #ffb9ff;
  /* box-shadow: 0 0 3px 1px rgb(255 246 82) inset; */
  mask-image: linear-gradient(to top, transparent 25%, #000 75%);
  -webkit-mask-image: linear-gradient(to top, transparent 25%, #000 75%);
  clip-path:polygon(0% 25%, 50% 50%, 0% 75%);
  -webkit-clip-path:polygon(0% 25%, 50% 50%, 0% 75%);
}
.light-item.one {
  animation: rotate-light 3s linear infinite;
}
.light-item.two {
  /* margin-bottom: 450px; */
  animation: rotate-light 3s linear infinite;
}
@keyframes rotate-light {
  from{
    transform: rotateY(360deg) rotateX(90deg);
  } to{
    transform: rotateY(0deg) rotateX(90deg);
  }
}

基础回城部分到这里就已经完成了，但是这样未免太简单了点，所以我们再来给他加一点花瓣飘落的效果，如果有看过我写的关于下雪的那篇文章的话，应该会发现，花瓣飘落和下雪的样子差不多，所以那里的代码我们可以直接复用，当然，这里也会再讲解一遍。

首先就是来画一个花瓣，这里我们利用圆角画出花瓣的形状，再利用渐变和阴影给花瓣加上颜色和发光效果

因为这里我们需要让花瓣斜着飘下来，营造出有风的感觉，所以肯定不能直上直下的，所以再给它来一点倾斜的角度transform: rotateZ(30deg)，飘着的时候肯定不只是水平方向会倾斜，它的自身也有会有旋转，这里我们再来给他一个旋转的动画，注意，管理3d视角的我们都需要加上transform-style: preserve-3d;，然后效果如下

是不是有那么点感觉了，当然立体的花瓣我是画不出来的啊，所以看上去上一个纸片一样，不过不注意看的话倒也看的过去，之后我们就来用js生成花瓣，关于生成花瓣的细节我全都写在了下面的js代码中并做了详细的注释

.flower-item {
  position: absolute;
  width: 15px;
  height: 20px;
  background-image: radial-gradient(#fdedff 40%, #ffb9ff);
  box-shadow: 0 5px 10px 2px rgba(255, 255, 255, .8);
  border-radius: 80% 80% 100% 100%;
  transform-style: preserve-3d;
  transform: rotateZ(30deg);
  animation: rotate-flower 5s linear infinite;
}
@keyframes rotate-flower {
  from{
    transform: rotateZ(30deg) rotateY(0deg);
  } to{
    transform: rotateZ(30deg) rotateY(360deg);
  }
}

/*
 * @Author: 贺永胜
 * @Date: 2022-04-14 22:55:03
 * @公众号: 百里青山
 * @LastEditors: 贺永胜
 * @LastEditTime: 2022-04-23 00:45:42
 * @Descripttion: 
 */
// 花朵飘落

let lastflowerTime = 0, // 上次生成花瓣的时间
flowerFrequency = 1, // 生成花瓣的频率
screenWidth = document.documentElement.clientWidth, // 屏幕宽度
screenHeight = document.documentElement.clientHeight, // 屏幕高度
flowerAngle = 60, // 花瓣偏移角度
flowerSpeed = 3, // 花瓣移动速度
createflowerInterval = null // 花瓣生成的定时器
function flowerStart () {
  console.log(444);
  // 花瓣生成的频率
  let now = new Date().getTime()
  if (now - lastflowerTime > (1000 / flowerFrequency)) {
    // 创建花瓣
    let flowerItem = document.createElement('div')
    flowerItem.className = 'flower-item'
    flowerItem.style.top = -flowerItem.offsetWidth + 'px'
    // 在给花瓣随机分配横向坐标时，范围应该把花瓣的偏移量也算进去，否则屏幕右下角会出现空白
    let _left = (screenWidth + Math.tan(flowerAngle * Math.PI / 180) * screenHeight) * Math.random()
    flowerItem.style.left = _left + 'px'
    // 增加随机透明度
    // flowerItem.style.opacity = Math.random()
    document.body.appendChild(flowerItem)

    // 给花瓣一个随机的放大系数，之后运动速度要和这个系数相乘
    flowerItem.flowerScale = Math.random() * 0.5 + 0.5
    flowerItem.style.width = flowerItem.offsetWidth * flowerItem.flowerScale + 'px'
    flowerItem.style.height = flowerItem.offsetHeight * flowerItem.flowerScale + 'px'

    // 花瓣移动
    let flowerMove = () => {
      // 此处的花瓣移动速度要和当前花瓣的移动系数相乘
      let moveY = flowerSpeed * flowerItem.flowerScale
      flowerItem.style.top = flowerItem.offsetTop + moveY + 'px'

      // 根据设置的花瓣偏移角度和纵向移动距离计算花瓣的横向移动距离
      let moveX = Math.tan(flowerAngle * Math.PI / 180) * moveY
      flowerItem.style.left = flowerItem.offsetLeft - moveX + 'px'

      // 如果花瓣偏移角度大于0，则判断花瓣是否超出左侧屏幕
      if (flowerAngle > 0) {
        if (flowerItem.offsetLeft < (-flowerItem.offsetWidth)) {
          document.body.removeChild(flowerItem)
          return
        }
      }

      // 如果花瓣距离屏幕顶部距离大于等于屏幕高度，则移除此花瓣
      if (flowerItem.offsetTop > screenHeight) {
        document.body.removeChild(flowerItem)
      } else {
        requestAnimationFrame(flowerMove)
      }
    }

    flowerMove()
    lastflowerTime = now
  }
  createflowerInterval = requestAnimationFrame(flowerStart)
}
flowerStart()

下面我们再来看一看成品