单个div实现一个底部装风扇的笔记本电脑悬空动画效果代码-html代码-BFW代码库

单个div实现一个底部装风扇的笔记本电脑悬空动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现一个底部装风扇的笔记本电脑悬空带阴影的动画效果代码

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

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

<style>
    body {
  min-height: 300px;
  height: 100vh;
  position: relative;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd calc(50% - 6.5em), rgba(255,255,255,0) calc(50% - 6.5em));
  text-align: center;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
}
div:before,
div:after {
  display: block;
  content: '';
  position: absolute;
}
#fan {
  width: 14em;
  height: 15em;
  margin-left: -7em;
  margin-top: -6em;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #ccc 0.3em, #443e48 0.3em), linear-gradient(to bottom, #222 10em, transparent 10em), radial-gradient(ellipse at center, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0) 50%);
  background-size: 93% 8.1em, 100% 100%, 18em 1.5em;
  background-position: 50% 0.6em, 0 0, left 50% bottom 0;
  border-radius: 5px;
  -webkit-animation: floating 1500ms infinite ease-in-out;
          animation: floating 1500ms infinite ease-in-out;
}
#fan:after {
  width: 18em;
  height: 0.7em;
  left: -2em;
  top: 9.3em;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-image: linear-gradient(to top, #888 20%, rgba(0,0,0,0) 40%), linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0) 1%, rgba(0,0,0,0) 1.2%, rgba(0,0,0,0.3) 2.5%, rgba(0,0,0,0) 5%), linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0) 1%, rgba(0,0,0,0) 1.2%, rgba(0,0,0,0.3) 2.5%, rgba(0,0,0,0) 5%), linear-gradient(35deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%), linear-gradient(-35deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%), linear-gradient(to top, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0) 30%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 0.5em 0.3em, 0.5em 0.........完整代码请登录后点击上方下载按钮下载查看