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.........完整代码请登录后点击上方下载按钮下载查看