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

CSS3基础学习笔记

时间:2015-11-20 19:59:26      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

1.圆角矩形

.border_radius_test{
border-radius:25px;
-moz-border-radius:25px;
}

数值越大越圆

 

2.容器阴影

.box_shadow_test{
box-shadow:1px 1px 20px #888888; 
-moz-box-shadow: 1px 1px 20px #888888; 
}

前两个数值是阴影距离容器的偏移量,第三个数值是阴影的模糊程度,最后一个颜色数值是阴影的颜色

 

3.背景图片

.bg_test{ 
background-size:50px 50px; 
-moz-background-size:50px 50px; 
background-origin:content-box; 
}

size属性可以调整背景图片大小,缩放图片蛮好用的,origin属性可以自动摆放背景图片位置,有content-box|padding-box|border-box三种选项,就是盒子模型的那三层。

 

4.文字

.text_test{ 
text-shadow:2px 2px 7px #000000; 
word-wrap:break-word; 
}

shadow属性的参数设定和容器阴影一样,word-wrap是用来把超出容器范围的文字强制换行。

 

5.移动/翻转/旋转(2D/3D)

无论是2D还是3D都要用到transform这个属性,而且是-ms-/-moz-/-webkit-/-o-都要有,分别对应IE/老版本的FireFox/Safari&Chrome/Opera...Orz!

 

水平移动 translate(x,y) 横向移动x,纵向移动y

.translate_test{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}

 

旋转 rotate(n) 顺时针旋转n个deg单位

.rotate_test{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

 

放大/缩小 scale(x,y) 横向放大/缩小x倍,纵向放大/缩小y倍

.scale_test{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}

 

翻转 skew(x,y) 绕x轴翻转x个deg单位,绕y轴翻转y个deg单位。

 

.skew_test{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}

 

5.过渡

 

.transition_test{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.transition_test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

 

5.动画

 

.animation_test{
width:100px;
height:100px;
background:red;
position:relative;
animation:myAnimation 5s;
-moz-animation:myAnimation 5s; /* Firefox */
-webkit-animation:myAnimation 5s; /* Safari and Chrome */
-o-animation:myAnimation 5s; /* Opera */
}

@keyframes myAnimation{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Firefox */
@-moz-keyframes myAnimation {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Safari and Chrome */
@-webkit-keyframes myAnimation {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Opera */
@-o-keyframes myAnimation {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

 

CSS3基础学习笔记

标签:

原文地址:http://www.cnblogs.com/zcynine/p/4981745.html

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