超级css：大牛用css写直升机绕桩飞行

作者: 烟雨丿丶蓝 | 来源:发表于2018-03-02 15:57 被阅读31次

超级css：大牛用css写直升机绕桩飞行
前端换肤
高效学习 react 笔记七：react 里的 css 方案
CSS3仿IOS滑动开关按钮
CSS知识点（一）
前端学习必备，推荐几本学习html+css值得看什么书籍
2018-03-23 icon的全解
直升机飞行开展不可忽略的问题
css引入的方式？页面导入样式时，使用link和@import有
章节七、CSS样式基本知识

web前端群，189394454，有视频、源码、学习方法等大量干货分享

👇html代码：

        <div id="totalbase">
            <div id="animbase">
        <div id="base">
            <div id="baseshadow"></div>
            <div class="helitop">
                <div class="wingbase">
                    <div class="col1"></div>
                    <div class="col2"></div>
                    <div class="col3"></div>
                    <div class="col4"></div>
                    <div class="wing1"></div>
                    <div class="wing2"></div>
                </div>
            </div>
            <div class="helifront">
                <div class="tailbase">
                    <div class="tail1">
                        <div class="tail21"></div>
                        <div class="tail22"></div>
                        <div class="tail23"></div>
                        <div class="tail24">
                            <div class="tailwingbase">
                                <div class="tail221"></div>
                                <div class="tail222"></div>
                                <div class="tail223"></div>
                                <div class="tail224"></div>
                                <div class="tailwing1"></div>
                                <div class="tailwing2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tail25"></div>
                    <div class="tail26"></div>
                </div>
            </div>
            <div class="heliback">
                <div class="front1"></div>
                <div class="front2"></div>
                <div class="front3"></div>
                <div class="front4"></div>
                <div class="front5"></div>
            </div>
            <div class="helileft"></div>
            <div class="heliright"></div>
            <div class="helibottom"></div>
        </div>
        </div>
        <div id="towerbase">
            <div id="talkbubble" align="center">谁最帅<br> 那当然是<br>小编最帅</div>
            <div class="tower1left"></div>
            <div class="tower1right"></div>
            <div class="tower2right">
                <div class="tower1window"></div>
            </div>
            <div class="tower1top">
                
                <div class="front1"><div class="col1"></div>
                <div class="col2"></div>
                <div class="col3"></div>
                <div class="col4"></div></div>
                <div class="front2"></div>
                <div class="front3"></div>
                
            </div>
            <div class="tower2top"></div>
            <div class="tower2left">
                <div class="tower2window"></div>
            </div>
        </div>
        </div>

         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="js.js"></script>
        <link href="css.css" rel="stylesheet" type="text/css" />

css代码：

  <style>
#totalbase{
    position: absolute;
    height: 10px;
    width:10px;
    top:50%;
    left:50%;
background-color:blue;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective:5000px;
    -webkit-transform-origin: 0 0 ;
    -webkit-transform: rotateX(60deg) rotateZ(45deg) translate(-50%,-50%);

    
}


#talkbubble {
   width: 120px;
   height: 90px;
   background: #D3D3D3;
   position: absolute;
   font-family: 'Courgette', cursive;
  font-size:18px;
   border-radius:10px;
   top:50%;left:50%;
   -webkit-transform:translate(-50%,-50%) rotateX(-90deg) rotateY(45deg) translateY(-370px);
}
#talkbubble:before {
   content:"";
   position: absolute;
   left:47px;
   bottom: -26px;
   width: 0;
   height: 0;
   border-right: 13px solid transparent;
   border-top: 26px solid #D3D3D3;
   border-left: 13px solid transparent;
}

#animbase{
    -webkit-transform-style: preserve-3d;
    position: absolute;
    height: 700px;
    width:10px;
    top:50%;
    left:50%;

-webkit-animation: anima 8s infinite linear;

    -webkit-transform-origin: 0 0% ;
}
#base {
    position: absolute;
    height: 10px;
    width:10px;
    top:0;
    left:50%;
background-color:blue;
    -webkit-transform-style: preserve-3d;
    
    -webkit-transform-origin: 0 0 ;
    -webkit-transform: translate(-50%,-50%) rotateZ(90deg);

    
}
#baseshadow {
    position: absolute;
    height: 10px;
    width:25px;
    top:50%;
    left:50%;
background-color:#D3D3D3;
    -webkit-transform-style: preserve-3d;
    box-shadow:0 0 140px 27px gray;
    -webkit-transform-origin: 0 0 ;
    -webkit-transform:  rotateZ(90deg) translateZ(-150px);

    
}

@-webkit-keyframes anima {
    0%{-webkit-transform: rotateZ(0deg) translate(-50%,-50%)  ;}
    100%{-webkit-transform:  rotateZ(360deg) translate(-50%,-50%) ;}
}

.helitop{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(0deg) translateZ(20px);
}

.helifront{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) translateZ(-20px);
}



.heliback{-webkit-transform-style:preserve-3d;
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) translateZ(20px);
}
.front1{-webkit-transform-style:preserve-3d;
    position: absolute;
    height: 19px;
    width: 39px;
    left:50%;top:50%;
    background-color:#f0f0f0;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%)  translateZ(18px);
}
.front2{
    position: absolute;
    height: 19px;
    width: 39px;
    left:50%;top:50%;
    background-color:#f0f0f0;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(60deg) translateZ(18px);
}
.front3{
    position: absolute;
    height: 19px;
    width: 39px;
    left:50%;top:50%;
    background-color:#f0f0f0;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(-60deg) translateZ(18px);
}
.front4{

    border-top: 18px solid #f0f0f0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    height: 0;
    width: 20px;
    
    left:50%;top:50%;
        -webkit-transform:translate(-50%,-50%) rotateY(90deg) rotateZ(90deg) translateZ(0px) translateX(19px) translateY(50%);
}
.front5{

    border-top: 18px solid#f0f0f0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    height: 0;
    width: 20px;
    
    left:50%;top:50%;
        -webkit-transform:translate(-50%,-50%) rotateY(90deg) rotateZ(90deg) translateZ(39px) translateX(1px) translateY(50%);
}

.helileft{
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateY(90deg) translateZ(-20px);
}

.heliright{
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateY(90deg) translateZ(20px);
}
.helibottom{
    position: absolute;
    height: 39px;
    width: 39px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%)  translateZ(-20px);
}

.wingbase {
        -webkit-transform-style:preserve-3d;
    position: absolute;
    height:10px;
    width:10px;
    bottom:00%; left:50%;
    background:white;
    -webkit-transform-origin:0 0;
    -webkit-transform: translate(-50%,-50%);
    -webkit-animation: anim 0.5s infinite linear;
}

@-webkit-keyframes anim {
    0%{-webkit-transform: rotateZ(0deg) translate(-50%,-50%)   ;}
    100%{-webkit-transform:  rotateZ(360deg) translate(-50%,-50%)  ;}
}
.wing1{z-index:10;
    position: absolute;
    height: 4px;
    width:100px;
    left:50%;top:50%;
    background-color:#000000;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) translateX(50%) translateZ(25px) rotateX(10deg);

}
.wing2{z-index:10;
    position: absolute;
    height: 4px;
    width:100px;
    left:50%;top:50%;
    background-color:black;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) translateX(-50%) translateZ(25px) rotateX(-10deg);

}
.col1{
    position: absolute;
    height: 25px;
    width: 4px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(3px) ;
}
    
.col2{
    position: absolute;
    height: 25px;
    width: 4px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg)  translateY(50%) translateZ(-3px) ;
}

.col3{
    position: absolute;
    height: 25px;
    width: 4px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) rotateY(90deg) translateY(50%) translateZ(-3px) ;
}
.col4{
    position: absolute;
    height: 25px;
    width: 4px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) rotateY(90deg) translateY(50%) translateZ(3px) ;
}

.tailbase{
    -webkit-transform-style:preserve-3d;
    position:absolute;
    height:10px;
    width: 10px;
    
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    
}

.tail1{-webkit-transform-style:preserve-3d;
        position:absolute;
    height:8px;
    width: 8px;
    border:1px solid black;
    background-color:white;
    top:0;
    left:50%;
    -webkit-transform:translate(-50%,100%) translateZ(-100px);
}
.tail21{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 100px;
    width:8px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(5px);
}

.tail22{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 100px;
    width:8px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(-5px);
}

.tail23{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 100px;
    width:8px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateZ(90deg) rotateX(90deg) translateY(50%) translateZ(5px);
}

.tail24{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 100px;
    width:8px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateZ(90deg) rotateX(90deg) translateY(50%) translateZ(-5px);
}

.tail25{-webkit-transform-style:preserve-3d;
    position: absolute;
    height:14px;
    width: 14px;
    top: 50%;
    left:50%;
    
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid black;
    border-bottom:10px solid transparent;
    -webkit-transform: translate(-50%,-11px) rotateY(90deg) rotateZ(45deg) translateZ(-5px);
}

.tail26{-webkit-transform-style:preserve-3d;
    position: absolute;
    height:14px;
    width: 14px;
    top: 50%;
    left:50%;
    
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid black;
    border-bottom:10px solid transparent;
    -webkit-transform: translate(-50%,-11px) rotateY(90deg) rotateZ(45deg) translateZ(5px);
}

.tailwingbase{-webkit-transform-style:preserve-3d;
    position: absolute;
    height: 10px;
    width: 10px;
    left:50%;
    top:0%;
    -webkit-animation:animb 0.3s infinite linear;
    -webkit-transform:translate(-50%,0) rotateX(180deg);
}

@-webkit-keyframes animb {
    0%{-webkit-transform:translate(-50%,0) rotateX(180deg) rotateZ(0deg);}
    100%{-webkit-transform:translate(-50%,0) rotateX(180deg) rotateZ(-360deg);}
}


.tail221{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 3px;
    width:3px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(2px);
}

.tail222{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 3px;
    width:3px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(-2px);
}

.tail223{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 3px;
    width:3px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateZ(90deg) rotateX(90deg) translateY(50%) translateZ(2px);
}

.tail224{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height:3px;
    width:3px;
    top:50%;
    left:50%;
    background:white;
    border:1px solid black;
    -webkit-transform: translate(-50%,-50%) rotateZ(90deg) rotateX(90deg) translateY(50%) translateZ(-2px);
}
.tailwing1{
    position: absolute;
    height: 2px;
    width:15px;
    left:50%;top:50%;
    background-color:#000000;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) translateX(50%) translateZ(5px) rotateX(30deg);

}
.tailwing2{
    position: absolute;
    height: 2px;
    width:15px;
    left:50%;top:50%;
    background-color:black;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) translateX(-50%) translateZ(5px) rotateX(-30deg);

}

#towerbase{
    
    position: absolute;
    height: 40px;
    width:40px;
    top:50%;
    left:50%;
background-color:blue;
box-shadow:0 0 60px 5px black;
    -webkit-transform-style: preserve-3d;
    
    -webkit-transform-origin: 0 0 ;
    -webkit-transform:  translate(-50%,-50%) translateZ(-150px);

    
}
.tower1left{
    position: absolute;
    height: 40px;
    width: 200px;
    left:50%;top:50%;
    background-color:white;

    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateY(90deg) translateX(-50%) translateZ(20px);
}
.tower1right{
    position: absolute;
    height: 200px;
    width: 40px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%) rotateX(90deg) translateY(50%) translateZ(-20px);
}
.tower1top{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 80px;
    width: 80px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%)  translateZ(240px) ;
}
.tower2top{
    -webkit-transform-style:preserve-3d;
    position: absolute;
    height: 80px;
    width: 80px;
    left:50%;top:50%;
    background-color:white;
    border: 1px solid black;
    -webkit-transform:translate(-50%,-50%)  translateZ(200px);
}
.tower2left{
    position: absolute;
    height: 78px;
    width: 22px;
    left:50%;top:50%;

    border-top:1px solid white;
    border-bottom: 1px solid white;
    border-left:10px solid white;
    border-right:10px solid white;
        outline:1px solid black;
    -webkit-transform:translate(-10px,-50%) rotateY(90deg)  translateX(-220px)  translateZ(30px);
}
.tower1window{
    position: absolute;
    height: 22px;
    width: 75px;
    left:50%;top:50%;
    background-color:#d3d3d3;
    opacity: 0.8;
    -webkit-transform:translate(-50%,-50%);
}
.tower2window{
    position: absolute;
    height: 75px;
    width: 22px;
    left:50%;top:50%;
    background-color:#d3d3d3;
    opacity: 0.8;
    -webkit-transform:translate(-50%,-50%);
}
.tower2right{
    position: absolute;
    height: 22px;
    width: 78px;
    left:50%;top:50%;
    
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    border-left:1px solid white;
    border-right:1px solid white;
    
    outline:1px solid black;
    -webkit-transform:translate(-50%,-11px) rotateX(90deg) translateY(220px) translateZ(-30px);
}
  </style>

超级css：大牛用css写直升机绕桩飞行
?html代码： css代码：
前端换肤
我的主要方式写两套css，点击替换css 1、纯css方式，写两套 2、用预处理器（也是相当于写多套css）我用...
高效学习 react 笔记七：react 里的 css 方案
传统的css方案 css in html 直接在 html 里面写 css 或者用 link 引入像这个样子 r...
CSS3仿IOS滑动开关按钮
html 飞行模式静音 css .ios { ma...
CSS知识点（一）
css是层叠样式表，它是网页之皮本文主要内容： 1. css语法格式（怎么写？） 2. css引入方式（怎么用？...
前端学习必备，推荐几本学习html+css值得看什么书籍
我们在学习html+css的过程中我们可以看看一些大牛写的书籍，会受益匪浅。下面我将介绍几本关于CSS以及HTML...
2018-03-23 icon的全解
1、用photoshop切割设计稿，然后写html然后加css，实现设计稿 3、接下来是雪碧图css sprite...
直升机飞行开展不可忽略的问题
随着直升机飞行活动的增加，直升机噪声成为民众抵制直升机飞行活动的重要原因。如何对直升机飞行噪声进行有效的控制与管理...
css引入的方式？页面导入样式时，使用link和@import有
css有三种引入方式：在页面上用标签引用文件，页面上在标签里写css样式，在标签的style属性里写样式，对...
章节七、CSS样式基本知识
内联式CSS样式嵌入式CSS样式外部式CSS样式（外联式）外部式css样式(也可称为外联式)就是把css代码写一...