CSS3基础知识

CSS3相对CSS来说增加了许多新的属性,还未系统学习js,所以尚未能和js结合,基础如下:

1.边框属性
  1.border-radius;
    例如:width:100px;
       height:100px;
  border-radius:10px 20px 30px 40px;
  可以利用它画圆,半圆(必须用长方形)和各种奇怪形状

  半圆:

    width:200px;
    height:100px;
    border-radius:100px 100px 0% 0%;

  2.box-shadow;阴影
    box-shadow:10px 10px 10px orange inset;
    -moz- -webkit- -obox-都是为了兼容旧版浏览器
2.背景图片属性
  background-origin :设置背景图片开始显示的位置
    content-box
    padding-box 默认
    border-box
  background-clip: 设置背景图片平铺的位置
    content-box
    padding-box
    border-box 默认
  background-size:修改图片的尺寸100% 100%
3.2D转换
  transform:translate(x,y);平移
  transform:scale(x,y);缩放
  transform:rotate(30deg);旋转
  transform:skew(30deg,30deg);斜旋转;

4.过渡 transition(示例鼠标浮动效果)
  .a1{
    width:200px;
    height:200px;
    background:#ff00ff;
    transition:width 10s,background 20s;
  } 
  .a1:hover{
    width:400px;
    background:#ffff00;
  }//当鼠标浮动上去时,方块变大,变颜色
5.动画 animation(用于打开后的动画效果)
  @keyframes myfirst{
  from{
    width:1px;
    height:1px;
    background:#ffffff;
    }
  to{//可用百分比代替
    width:100px;
    height:100px;
    background:#ff0000;
    }
  }

  .ear{
    animation:myfirst 10s;
    width:100px;
    height:100px;
    background:green;
    animation-direction:alternate;逆向
    animation-iteration-count:10;播放次数
  }
6.多列属性(一段文字)
  .ear{
    column-count:3;/*分割的列数*/
    column-gap:50px;/*分割的列间距*/
   }

  column-count 规定元素应该被分隔的列数。 
  column-fill 规定如何填充列。  
  column-gap 规定列之间的间隔。 
  column-rule 设置所有 column-rule-* 属性的简写属性。 
  column-rule-color 规定列之间规则的颜色。 
  column-rule-style 规定列之间规则的样式。 
  column-rule-width 规定列之间规则的宽度。 
  column-span 规定元素应该横跨的列数。 
  column-width 规定列的宽度。 
  columns 规定设置 column-width 和 column-count 的简写属性。 

作业展示:


 1 <!DOCTYPE html> 2  3 <html> 4  5 <head> 6  7 <meta charset="utf-8"/> 8 <meta name="keywords" content="html,aowin"/> 9 <title>homework_Android</title> 10 <style> 11  .robot{ 12  width:900px; 13  14  text-align:center; 15  animation:step 2s; 16  animation-direction:alternate; 17  animation-iteration-count:6; 18 } 19  @keyframes step{ 20  from{ 21  position:relative; 22  left:1px; 23  24 } 25  to{ 26  position:relative; 27  left:900px; 28  29 } 30  } 31  32  33  .ear1{ 34  background:#A4CA39; 35  width:5px; 36  height:70px; 37  border-radius:100px 100px 10% 10%; 38  position:relative; 39  top:68px; 40  left:98px; 41  transform:rotate(-30deg); 42  transition:width 1s,height:1s; 43  44 } 45  .ear1:hover{ 46  width:7px; 47  height:72px; 48 } 49  .ear2{ 50  background:#A4CA39; 51  width:5px; 52  height:72px; 53  border-radius:100px 100px 10% 10%; 54  position:relative; 55  top:60px; 56  left:99px; 57  transform:rotate(60deg); 58  transition:width 1s,height:1s; 59 } 60  .ear2:hover{ 61  width:7px; 62  height:72px; 63 } 64  65  .head{ 66  background:#A4CA39; 67  width:200px; 68  height:100px; 69  border-radius:100px 100px 0% 0%; 70  margin:5px; 71  position:relative; 72  top:50px; 73  left:50px; 74 } 75  .eye1{ 76  background:white; 77  width:20px; 78  height:20px; 79  border-radius:50%; 80  position:relative; 81  top:45px; 82  left:55px; 83  margin:5px; 84  transition:transform 1s; 85 } 86  .eye1:hover{ 87  transform:scale(1.1,1.1); 88 } 89  .eye2{ 90  background:white; 91  width:20px; 92  height:20px; 93  border-radius:50%; 94  position:relative; 95  left:52px; 96  margin:5px; 97  transition:transform 1s; 98 } 99  .eye2:hover{100  transform:scale(1.1,1.1);101 }102  .arm1{103  background:#A4CA39;104  width:40px;105  height:200px;106  border-radius:100px 100px 100px 100px;107  position:relative;108  top:58px;109 110 }111 112  .duzi{113  background:#A4CA39;114  width:200px;115  height:200px;116  border-radius:0px 0px 20px 20px;117  position:relative;118  left:55px;119 120 }121  .arm2{122  background:#A4CA39;123  width:40px;124  height:200px;125  border-radius:100px 100px 100px 100px;126  position:relative;127  left:216px;128  transition:transform 1s; 129 }130  .arm2:hover{131  transform:rotate(40deg);132 }133  .leg1{134  background:#A4CA39;135  width:42px;136  height:60px;137 138  position:relative;139  top:58px;140  left:98px;141 142 }143  .leg2{144  background:#A4CA39;145  width:42px;146  height:60px;147  position:relative;148  left:77px;149 150 }151  hr{152  position:relative;153  top:50px;154 }155 156 157 158 159 160 161 </style>162 163 </head> 164 <body >165 <div class="robot">166 <div class="ear1">167 <div class="ear2"></div> 168 </div>169 <div class="head">170 <div class="eye1"> 171 <div class="eye2"></div> 172 </div>173 </div>174 <div class="body1">175 <div class="arm1"> 176 <div class="duzi">177 <div class="arm2"> 178 </div>179 </div>180 </div>181 </div>182 <div class="leg1">183 <div class="leg2"></div> 184 </div>185 </div>186 187 <hr/> 188 <p style="margin:60px; text-align:center;font-size:36px; color:#A4CA39;">机器人爱滑冰</p>189 </body>190 191 192 193 </html>

View Code

 

 

相关文章