rx实现三维立体图片悬浮效果代码-html代码-BFW代码库

rx实现三维立体图片悬浮效果代码

代码语言：html

所属分类：其他

代码描述：rx实现三维立体图片悬浮效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
#heading {
  margin: 0;
}

a {
  color: #888;
}

#card {
  height: 50vmin;
  width: 90vmin;
  background-color: white;
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5f9e2579b3e1f.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
}
#card:before, #card:after {
  content: "";
  position: absolute;
  display: block;
  height: 2px;
  width: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(1px);
}
#card:before {
  transform: translateZ(1rem);
  box-shadow: 25vmin 8vmin 0 white, 87vmin 5vmin 0 white, 26vmin 41vmin 0 white, 70vmin 11vmin 0 white, 29vmin 9vmin 0 white, 56vmin 39vmin 0 white, 61vmin 38vmin 0 white, 80vmin 34vmin 0 white, 81vmin 39vmin 0 white, 41vmin 48vmin 0 white, 48vmin 46vmin 0 white, 75vmin 15vmin 0 white, 10vmin 36vmin 0 white, 21vmin 12vmin 0 white, 43vmin 27vmin 0 white, 33vmin 9vmin 0 white, 34vmin 1vmin 0 white, 15vmin 36vmin 0 white, 37vmin 41vmin 0 white, 15vmin 33vmin 0 white, 83vmin 25vmin 0 white, 21vmin 5vmin 0 white, 25vmin 48vmin 0 white, 32vmin 46vmin 0 white, 20vmin 13vmin 0 white, 65vmin 27vmin 0 white, 83vmin 49vmin 0 white, 61vmin 25vmin 0 white, 25vmin 20vmin 0 white, 49vmin 32vmin 0 white, 11vmin 29vmin 0 white, 59vmin 15vmin 0 white, 29vmin 47vmin 0 white, 21vmin 24vmin 0 white, 67vmin 17vmin 0 white, 66vmin 23vmin 0 white, 9vmin 29vmin 0 white, 13vmin 20vmin 0 white, 90vmin 13vmin 0 white, 57vmin 4vmin 0 white, 22vmin 41vmin 0 white, 25vmin 36vmin 0 white, 84vmin 50vmin 0 white, 36vmin 42vmin 0 white, 54vmin 17vmin 0 white, 8vmin 6vmin 0 white, 29vmin 39vmin 0 white, 47vmin 19vmin 0 white, 35vmin 32vmin 0 white, 2vmin 39vmin 0 white;
}
#card:after {
  height: 3px;
  width: 3px;
  transform: translateZ(2rem);
  box-shadow: 80vmin 15vmin 0 white, 56vmin 50vmin 0 white, 35vmin 2vmin 0 white, 51vmin 38vmin 0 white, 1vmin 50vmin 0 white, 20vmin 6vmin 0 white, 25vmin 27vmin 0 white, 60vmin 37vmin 0 white, 9vmin 15vmin 0 white, 83vmin 13vmin 0 white, 34vmin 50vmin 0 white, 32vmin 26vmin 0 white, 72vmin 28vmin 0 white, 2vmin 33vmin 0 white, 71vmin 19vmin 0 white, 60vmin 35vmin 0 white, 12vmin 4vmin 0 white, 30vmin 7vmin 0 white, 38vmin 20vmin 0 white, 37vmin 49vmin 0 white, 1vmin 33vmin 0 white, 30vmin 36vmin 0 white, 23vmin 14vmin 0 white, 67vmin 13vmin 0 white,.........完整代码请登录后点击上方下载按钮下载查看