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

·  阅读 8753
吕布的回城特效有了,貂蝉的也要有,用css3制作一款貂蝉的简易回城特效

我正在参加 码上掘金体验活动,详情:show出你的创意代码块

我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛

在线预览地址: ihope_top.gitee.io/my-demo/dem…
gitee地址: gitee.com/ihope_top/m…
吕布回城文章: juejin.cn/post/708812…

前言

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

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

【GIF版】

5.gif

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

【代码块版】

back.jpeg

由于代码块的显示区域太小,这里对body进行了缩放

代码实现

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

<!-- 回城底部圆形波 -->
<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%);
}
复制代码

image.png

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

<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%;
}
复制代码

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

image.png

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

    <!-- 回城底部圆形波 -->
    <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);
  }
}
复制代码

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

2.gif

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

    <!-- 旋转光圈 -->
    <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);
  }
}
复制代码

3.gif

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

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

image.png

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

4.gif

是不是有那么点感觉了,当然立体的花瓣我是画不出来的啊,所以看上去上一个纸片一样,不过不注意看的话倒也看的过去,之后我们就来用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()
复制代码

下面我们再来看一看成品

5.gif

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改