css实现无人机飞行倒计时动画效果代码-html代码-BFW代码库

css实现无人机飞行倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现无人机飞行倒计时动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
    --prussian-blue: #003049;
    --orange: #F77F00; 
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: Ultima;
  src: url(//repo.bfw.wiki/bfwrepo/font/mbf_ultima.woff);
}

.a {
  transform: rotate(350deg);
}

.b {
  transform: rotate(10deg);
}

.c {
  transform: rotate(10deg);
}

.d {
  transform: rotate(350deg);
}

.animation {
  -webkit-animation-name: fly;
  animation-name: fly;
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: relative;
  display: flex;
  align-items: center; 
  justify-content: center;
  width: 50vw;
  height: 50vh;
  margin: auto;
}

.circle {
  width: 80px; 
  height: 80px; 
  border: 4px solid var(--prussian-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.count {
  width: 60px; 
  height: 60px; 
  border-radius: 25px;
  background-color: var(--orange);
  font-size: 2.5rem;
  font-family: Ultima;
  padding: 5px;
  text-align: center;
  color: white;
}

.counter {
  width: 80px;
  height: 80px;
  background-color: var(--prussian-blue);  
  display: flex;
  align-items: center; 
  justify-content: center;
  border-radius: 3px;
}

.container {
  width: 100vw; 
  height: 100vh; 
  border: none;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background: url(//repo.bfw.wiki/bfwrepo/image/61923f261c983.png);
  animation-name: fade;
  background-size: cover;
}

.drone-body {
  width: 120px;
  height: 195px;
  position: relative;
  border-radius: 30px;
  border: 5px solid var(--prussian-blue);
  color: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
}

.line {
  height: 80px; 
  width: 5px; 
  border: 2px solid var(--prussian-blue); 
  background-color: var(--orange);
}

.spin-animation {
  animation-name: spin;
  animation-duration: 14s;
  animation-timing-function: linear;
}

.straight {
  height: 5px; 
  width: 80px; 
  border: 2px solid var(--prussian-blue); 
  position: absolute; 
  z-index: 10;
  border-radius: 5px;
  background-color: var(--orange);
}

.top-right {
  position: absolute;
  z-index: 10;
  transform: translate(56px , -80px)
}

.top-left {
  position: absolute;
  z-index: 10;
  transform: translate(-56px, -80px)
}

.bottom-left {
  position: absolute;
  z-index: 10;
  transform: translate(-56px, 80px)
}

.bottom-right {
  position: absolute;
  z-index: 10;
  transform: translate(56px, 80px)
}

.page-loading {
  font-family: Ultima; 
  font-size: 4rem;
  color: rgba(255,255,255, 0.3);
  height: 200px; 
  width: 50%;
  margin: 0;
  position: absolute; 
  animation: scroll;
  animation-duration: 16s;
  z-index: 15;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.page-loading2 {
  font-family: Ultima; 
  font-size: 4rem;
  color: rgba(255,255,255, 0.3);
  height: 200px; 
  width: 50%;
  margin: 0;
  position: absolute; 
  animation: scroll2;
  animation-duration: 19.5s;
  z-index: 15;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(7200deg);
  .........完整代码请登录后点击上方下载按钮下载查看