css布局实现一个小鸟钉在电线上效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现一个小鸟钉在电线上效果代码

代码标签: 一个 小鸟 钉在 线上 效果

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html body {
  margin: 0px;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 4, 255, 0.18);
}

.container {
  padding-top: 60px;
  width: 100%;
  height: 100%;
  position: relative;
}

.bird-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: auto;
}

.bird {
  position: absolute;
  width: 500px;
  height: 500px;
}

.chest {
  position: absolute;
  width: 130px;
  height: 200px;
  background-color: #fff700;
  border-radius: 50%;
  border-top: solid #0475d1 25px;
  border-right: solid #809fff 30px;
  top: 200px;
  left: 150px;
  transform: rotate(30de.........完整代码请登录后点击上方下载按钮下载查看

网友评论0