div+css实现全息投影出一把手枪动画效果代码-html代码-BFW代码库

div+css实现全息投影出一把手枪动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现全息投影出一把手枪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    html {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.card {
  position: relative;
  width: 200px;
  height: 170px;
  margin-top: 70px;
  background-image: url(//repo.bfw.wiki/bfwrepo/icon/64dd4a9aac32f.png);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-animation: float 1s infinite alternate;
          animation: float 1s infinite alternate;
}
.card .holo {
  position: absolute;
  bottom: 0;
}

.holo {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 5px;
  margin: -5px auto 0;
  background-color: rgba(0, 252, 252, 0.35);
  border-radius: 100%;
  filter: blur(2.5px);
  transform: perspective(100px) rotateX(-30deg);
  transform-style: preserve-3d;
  -webkit-animation: holographic 1.5s infinite alternate;
          animation: holographic 1.5s infinite alternate;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.holo:after {
  position: absolute;
  left: -10px;
  right: -10px;
  content: "";
  height: 10px;
  background-color: rgba(0, 252, 252, 0.5);
  border-radius: 100%;
  filter: blur(2.5px);
}
.holo + .holo {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  opacity: 0.5;
}

@-webkit-keyframes float {
  from {
    will-change: unset;
    transform: translateY(-10px);
  }
  to {
    will-change: transform;
    transform: translateY(-30px);
  }
}

@keyframes float {
  from {
    will-change: unset;
    transform: translateY(-10px);
  }
  to {
    will-change: transform;
    transform: translateY(-30px);
  }
}
@-webkit-keyframes holographic {
  from {
    will-change: box-shadow;
    box-shadow: 0 -75px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -45px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 10px rgba(0, 252, 252, 0.75), 0 -7px 20px rgba(0, 252, 252, 0.75), 0 -10px 30px rgba(0, 252, 252, 0.75), 0 -15px 40px rgba(0, 252, 252.........完整代码请登录后点击上方下载按钮下载查看