• CSS3.0青蛙(1)


    一个简化版。完全木有使用渐变和阴影,也没使用keyframes。

    只用到了圆角border-radius和变换transform。

    哈哈。。好玩儿。

    浏览器效果如下。


    将以下代码另存为htm即可:

     1 <style type="text/css">
     2 div{
     3 border:2px #000000 solid;
     4 }
     5 #froggy{
     6 margin:80px;
     7 border:none;
     8 }
     9 div.head{
    10 position:relative;
    11 width:140px;
    12 height:80px;
    13  color: #000000;">:60px; 
    14 -moz-border-radius: 60px;
    15 background:#66CC00;
    16 }
    17 div.eye{
    18 position:relative;
    19 width:60px;
    20 height:60px;
    21 left:5px;
    22 top:-30px;
    23  color: #000000;">:60px; 
    24 -moz-border-radius: 60px;
    25 float:left;
    26 background:#ffffff;
    27 }
    28 div.apple{
    29 position:relative;
    30 top:30px;
    31 width:20px;
    32 height:20px;
    33 border:none;
    34 background:#000000;
    35  color: #000000;">:10px; 
    36 -moz-border-radius: 10px;
    37 }
    38 div.left-apple{
    39 left:30px;
    40 }
    41 div.right-apple{
    42 left:10px;
    43 }
    44 div.face{
    45 position:relative;
    46 top:-30px;
    47 width:26px;
    48 height:26px;
    49 border:none;
    50 background:#FFCCFF;
    51  color: #000000;">:15px; 
    52 -moz-border-radius: 15px;
    53 float:left;
    54 }
    55 div.left-face{
    56 left:10px;
    57 }
    58 div.right-face{
    59 left:78px;
    60 }
    61 div.mouse{
    62 position:relative;
    63 float:left;
    64 width:34px;
    65 height:34px;
    66 top:-30px;
    67 border:#000000 2px solid;
    68 border-left:none;
    69 border-top:none;
    70  color: #000000;">: rotate(45deg);
    71 -moz-transform: rotate(45deg);
    72  color: #000000;">:15px; 
    73 -moz-border-radius-bottomright: 15px;
    74 }
    75 </style>
    76 <div id="froggy">
    77     <div class="head">    
    78 <div class ="eye ">
    79     <div class="apple left-apple">
    80         </div>
    81     </div>
    82 <div class ="eye ">    
    83     <div class="apple right-apple">
    84         </div>
    85     </div>
    86     <div class="face left-face">
    87     </div>
    88     <div class="face right-face">
    89     </div>
    90     <div class="mouse">
    91     </div>
    92     </div>
    93 </div>


  • 相关阅读:
    HTML转换成word文档
    泛型的导入导出的公用方法
    封装的分页jq
    用泛型做的分页类
    EntityFramework小知识
    泛型连接数据库
    在博客园看的一些小技巧
    渗透之路基础 -- SQL注入
    第一篇博客就这么开始了?!稍微介绍一下。
    正则基础用法
  • 原文地址:https://www.cnblogs.com/mumuliang/p/1873548.html
Copyright © 2020-2023  润新知