web前端案例-老司机用css带你制作直升机飞行
2018-02-26 14:15
751 查看
这个效果是花了点心思的，没有一点javascript代码，这是对基础只是的一些考验，对于运用css以及html5的一些理解。当然企业里用不到这些效果，都不会去写几百行css代码去写一个特效，一般都是用javascript或者插件，框架去解决。不过对于顽固基础作为练习题的话，还是非常合适的，因为用javascript能实现的效果你用css去写未必能写的出来。
html代码： <body>
<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>
<head> <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" /> </head>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>最后小编推荐一下我的前端学习群：575308719，视频、源码、经验等大量干货分享，不管你是小白还是大牛，小编都欢迎，欢迎初学和进阶中的小伙伴。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端案例-纯css代码制作吃豆豆加载效果
- web前端小案例-css制作电脑平板手机变幻小动画
- web前端小案例-纯css制作水滴效果
- web前端小案例-纯css制作微笑小表情
- web前端小案例-超级css制作七彩圆环旋转幻影
- web前端案例-css制作花束小动画
- web前端小案例-纯css书架装载机
- 前端案例：170行css制作Apple手机开机动画
- Html+css+div+ul+li制作Web前端导航菜单。
- web前端小案例-边框线条制作
- 前端基础小案例：纯css制作旋转披萨
- CSS世界：web前端开发，CSS3+HTML5网页制作
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- web前端，html+css+jquery实现水平菜单
- 3. web前端开发分享-css,js提高篇
- web前端基础案例：图片随机切换特效
- Web 前端开发者必知的9 个CSS属性
- 小白学Java Web 2 Web前端之CSS基本知识1
- VisualStudio环境下的Web前端开发经验总结（css,javascript）
- web前端开发的点点滴滴---3.CSS介绍