純css3繪制卡通風(fēng)格的程序員編程寫代碼,面對著電腦的程序員,正在工作的程序員人物動畫特效。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css">
2、body引入部分
<div class="container">
<div class="window">
<div class="cloud" id="first-cloud"></div>
<div class="cloud" id="second-cloud"></div>
</div>
<div class="small-monitor">
<div class="bar">
<div class="button" id="red"></div>
<div class="button" id="yellow"></div>
<div class="button" id="green"></div>
</div>
<div class="screen">
<ul class="code">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="inline-code" id="line-1"></li>
<li class="inline-code" id="line-2"></li>
<li class="inline-code" id="line-3"></li>
<li class="inline-code" id="line-4"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="main-monitor">
<div class="bar">
<div class="button" id="red"></div>
<div class="button" id="yellow"></div>
<div class="button" id="green"></div>
</div>
<div class="screen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="avatar">
<div class="avatar-neck"></div>
<div class="avatar-collar"></div>
<div class="avatar-body"></div>
<div class="avatar-head"></div>
<div class="avatar-hairband"></div>
<div class="avatar-hair"></div>
</div>
</div>