纯css实现纸鸟效果-html代码-BFW代码库

纯css实现纸鸟效果

代码语言：html

所属分类：动画

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


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

<title>SketchBird OnlyCSS</title>
<style>
    /****Inspired by https://dribbble.com/shots/3174839-Awsome-iOS-Logo-Concept *****/
body {
  min-height: 100% !important;
  height: 100%;
  background: linear-gradient(to top right, #2A1A59, #662781) no-repeat;
}

.container {
  margin: 5% auto 20%;
  width: 500px;
  height: 500px;
  border-radius: 20%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: radial-gradient(transparent 28%, rgba(225, 232, 236, 0.5) 28%, transparent 28.5%, transparent 40%, rgba(225, 232, 236, 0.5) 40%, transparent 40.5%, transparent 62%, rgba(225, 232, 236, 0.5) 62%, transparent 62.5%), linear-gradient(transparent 30%, rgba(225, 232, 236, 0.5) 30.5%, transparent 31%) no-repeat 0 0/100% 20%, linear-gradient(90deg, transparent 30%, rgba(225, 232, 236, 0.5) 30.5%, transparent 31%) no-repeat 0 0/20% 100%, linear-gradient(transparent 93.9%, rgba(225, 232, 236, 0.5) 94%, transparent 94.2%) no-repeat 80% 80%/100% 100%, linear-gradient(90deg, transparent 93.9%, rgba(225, 232, 236, 0.5) 94%, transparent 94.2%) no-repeat 80% 80%/100% 100%, linear-gradient(transparent 29.7%, rgba(225, 232, 236, 0.5) 30%, transparent 30.2%) no-repeat 0 0/100% 100%, linear-gradient(90deg, transparent 29.7%, rgba(225, 232, 236, 0.5) 30%, transparent 30.2%) no-repeat 0 0/100% 100%, linear-gradient(transparent 70%, rgba(225, 232, 236, 0.5) 70.2%, transparent 70.4%) no-repeat 0 0/100% 100%, linear-gradient(90deg, transparent 70%, rgba(225, 232, 236, 0.5) 70.2%, transparent 70.4%) no-repeat 0 0/100% 100%, linear-gradient(transparent 0%, rgba(225, 232, 236, 0.5) 0.5%, transparent 1.5%) no-repeat 65% 54%/100% 8%, linear-gradient(90deg, transparent 0%, rgba(225, 232, 236, 0.5) 0.5%, transparent 1.5%) no-repeat 54% 65%/8% 100%, linear-gradient(to top right, transparent 49.7%, rgba(225, 232, 236, 0.5) 49.99%, transparent 50%) no-repeat 0 0/100% 100%, linear-gradient(to top left, transparent 49.7%, rgba(225, 232, 236, 0.5) 49.99%, transparent 50%) no-repeat 0 0/100% 100%, linear-gradient(to top right, #FA823C, #FCC03B 80%);
}

.box {
  position: relative;
  top: 10%;
  left: 11%;
  width: 400px;
  height: 400px;
}

.head {
  position: absolute;
  top: 33%;
  left: 78.5%;
  width: 15%;
  height: 8%;
  background:.........完整代码请登录后点击上方下载按钮下载查看