码迷,mamicode.com
首页 > Web开发 > 详细

CSS3基础知识

时间:2019-01-28 23:10:24      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:打开   ora   pad   lock   doc   pos   ado   示例   style   

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

 

技术分享图片

 

CSS3基础知识

标签:打开   ora   pad   lock   doc   pos   ado   示例   style   

原文地址:https://www.cnblogs.com/anzhilanxiao/p/CSS3.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!