首页 > 开发 > CSS > 正文

纯CSS3打造属于自己的“小黄人”

2024-07-11 08:33:15
字体：大 中 小
来源：转载
供稿：网友

效果就像这样：

不废话，直接上代码！

hrml代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html>  
  2. <head lang="zh">       <meta charset="UTF-8">  
  3.     <title>纯CSS3画出小黄人并实现动画效果</title>       <Link href="index.css" type="text/css" rel="stylesheet" />  
  4. </head>   <body>  
  5.     <!--容器-->       <div class="wrapper">  
  6.         <!--小黄人-->           <div class="container">  
  7.             <!--头发-->               <div class="hairs">  
  8.                 <div class="hairs_one"></div>                   <div class="hairs_two"></div>  
  9.             </div>               <!--头发-->  
  10.             <!--眼睛-->               <div class="eyes">  
  11.                 <div class="eye_left">                       <div class="black">  
  12.                         <div class="white"></div>                       </div>  
  13.                 </div>                   <div class="eye_right">  
  14.                     <div class="black">                           <div class="white"></div>  
  15.                     </div>                   </div>  
  16.             </div>               <!--眼睛-->  
  17.             <!--嘴巴-->               <div class="mouth">  
  18.                 <div class="mouth_box"></div>               </div>  
  19.             <!--嘴巴-->               <!--手-->  
  20.             <div class="hands">                   <div class="left_hand"></div>  
  21.                 <div class="right_hand"></div>               </div>  
  22.             <!--手-->               <!--身体-->  
  23.             <div class="mybody">                   <!--裤子-->  
  24.                 <div class="trousers">                       <!--裤子突出部分-->  
  25.                     <div class="trousers_top"></div>                       <!--裤子口袋-->  
  26.                     <div class="pocket"></div>                       <!--三角线-->  
  27.                     <div class="line-left"></div>                       <div class="line-right"></div>  
  28.                     <div class="line-bottom"></div>                       <!--吊带-->  
  29.                     <div class="condoleBelt">                           <div class="left"></div>  
  30.                         <div class="right"></div>                       </div>  
  31.                 </div>                   <!--裤子-->  
  32.             </div>               <!--身体-->  
  33.             <!--脚-->               <div class="foot">  
  34.                 <div class="left_foot"></div>                   <div class="right_foot"></div>  
  35.             </div>               <!--脚-->  
  36.             <!--阴影-->               <div class="foot_shadow"></div>  
  37.             <!--阴影-->           </div>  
  38.     </div>   </body>  
  39. </html>    

上一篇：浅谈各种浏览器下的CSS Hack兼容性写法

下一篇：CSS代码编写中视觉格式化模型的学习教程

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

如何查找有故障的配件

如何查找有故障的配件...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分
2024-06-26 22:28:41
650分！高二女生考入北大：遗憾不能上高三
2024-06-26 22:26:16
男生估分600只考了397 妈妈：高考虽重要，但不代表所有
2024-06-26 22:23:01
唐尚珺回应是否会直播带货：有人出100万想和他合作！
2024-06-25 19:29:23
名校抢人名场面：清华、北大太拼了！
2024-06-25 19:22:14
男生高考语文满分！网友：第一次听说
2024-06-25 19:19:15

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有