have fun with css3

1 边框

　　 1 border-radius:圆角 ie9+ chrome firefox opera

　　 2 box-shadow :边框阴影 ie9+ chrome firefox opera

　　 3 border-image : 边框图片 chrome firefox

　　1 border-radius:5px;(圆角半径)

　　　-webkit-border-radius:5px;//chrome safari

　　　-ms-border-radius:5px;//ie

　　 -o-border-radius:5px;//opera

　　 -mos-border-radius;5px;//老版firefox

　　2 border-shadow:5px 5px 5px #fff;(x阴影长度，y阴影长度，模糊度，颜色)

　　3 border-image:url(border.png) 30 30 round;默认都是stretch拉伸的

　　举例子说基本的特性

　　w3cschool上的例子

仔细看使用的图片和没有stretch（使用round）的效果图，你会发现4个角上（中间也不会被拉伸）的红色的四方形没有被拉伸，而中间的就会被重复覆盖

其他参数可以参考 http://msdn.microsoft.com/zh-cn/library/windows/apps/dn308261.aspx

2 背景

　　 1 background-size :背景大小 ie9+ firefox chrome safari

　　 2 backgroind-origin :背景定位区域（border-box/padding-box/content-box）ie9+ firefox chrome safari

　　 3 background-clip :规定背景绘制的区域（和background-origin不同的是它不是应用在图片背景上，而是底色）ie9+ firefox chrome safari

　　 1 background-size:width height;

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

　　2 background-origin:border-box|padding-box|content-box

(图来自W3C)

3 background-clip:border-box|padding-box|content-box;

div
{
background-color:yellow;
background-clip:content-box;
}

3 文本效果

　　 1 text-shadow :文本阴影主流浏览器都主持

　　 2 word-wrap 主流浏览器都主持

　　 3 word-break 在恰当的断子点进行换行

　　1 text-shadow:x y 模糊度颜色；

　　2 word-wrap:break-word|normal;允许对长的单词进行换行|正常不换行

　　3 word-break:normal|break-all|keep-all;浏览器默认|允许单词内换行|只能在半角空格或字符处换行

4 字体

5 2D转换

tranform ie10+ firefox chrome(-webkit-) opera(-webkit-) ie9(-ms-)

　　1 translate(x,y); translate(50px,100px);元素向left移动50px,再增加top 100px;

举个例子说明，需要注意的事项是，在元素使用translate时，并不需要指定position:absolute;

看一个三个div并排的例子

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black; float:left;
}
div#div2
{
transform:translate(50px,0px);
-ms-transform:translate(50px,0px); /* IE 9 */
-moz-transform:translate(50px,0px); /* Firefox */
-webkit-transform:translate(50px,0px); /* Safari and Chrome */
-o-transform:translate(50px,0px); /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>
<div></div>
</body>
</html>

可见使用transform：translate(x,y);的dom并不会影响布局.

　　2 rotate(xxdeg);元素顺时针旋转给定的角度。负值时，逆时针转动。旋转的中心点为元素的中心

　　3 scale(x,y);放大或减少的倍数.同样值得注意的是scale方法，也是以元素的中心的放大缩小点，同样不需要声明为绝对占位。check the code

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;float:left;
}
div#div2
{
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 */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

　　 4 skew(xdeg,ydeg);以元素的中心为旋转点，向着x轴转动x度，沿着Y轴转动

-webkit-transform:skew(30deg,0deg); /* Safari and Chrome */
-webkit-transform:skew(0deg,30deg); /* Safari and Chrome */

的区别在：

ps:补充一个旋转中心的属性transform-origin:20% 40%;

6 3D转换

　　rotateX(xdeg), rotateY(ydeg),rotate(zdeg);围绕X,Y,Z进行旋转

　　transform-style:使其子元素定义是否具有3D位置flat|preserve-3d;不保留|保留

　　perspective:规定3D元素的透视效果（元素被查看的位置视图）

　　perspective-origin:规定3D元素底部的位置

　　backface-visibility:定义元素在不面对屏幕时是否可见

　　translateX translateY translateZ移动

　　scaleX scaleY scaleZ扩大

举个例子（可以做一个图片轮换的功能）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style> 
.child
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
position:absolute;
top:0px;left:0px;
}
div#div1
{
-webkit-transform:translateX(-90px) translateZ(-120px) rotateY(45deg);
}
div#div2
{
-webkit-transform:translateX(0px) translateZ(0px) rotateY(0deg);
}
div#div3
{
-webkit-transform:translateX(90px) translateZ(-120px) rotateY(-45deg);
}
#wrap{-webkit-transform-style:preserve-3d;-webkit-perspective:1000px;width:100px;height:75px;margin-left:200px;position:relative;}
</style>
</head>
<body>
<div id="wrap">
<div id="div1" class="child">你好。这是一个 div 元素。</div>
<div id="div2" class="child">你好。这是一个 div 元素。</div>
<div id="div3" class="child">你好。这是一个 div 元素。</div></div>
<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

</body>
</html>

7 过渡

　　 transition： ie10+ chromefirefox opera safafi

　　 transition-property 属性

　　 transition-duration 过渡需要的时间

　　transition-timing-function:规定速度效果的速度曲线

　　　　　　linear:相同的速度，从开始到结束

　　　　　　ease :慢速开始，然后变快，然后慢速

　　　　　　ease-in :慢速开始

　　　　　　ease-out:慢速结束

　　　　　　ease-in-out:慢速开始和结束的过渡效果

　　transition-delay:定义过渡效果何时开始

　　过渡是元素从一种样式逐渐改变成另一种效果

　　简单的过渡。

　　效果图

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:100px; background:yellow;margin-right:10px;float:left;
 transition:width 2s;
 -webkit-transition:width 2s;
 -ms-transition:width 2s;
 -moz-transition:width 2s;
}
div:hover{width:200px;}
</style>
</head>

<body>
<div class=""></div>
<div class=""></div>
</body>
</html>

如果没有附加transition效果，元素会直接变化为200px，没有过渡的效果出现

在修改下，加强认识：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:100px; background:yellow;margin-right:10px;float:left;
 transition:width 2s, transform 2s;
 -webkit-transition:width 2s,-webkit-transform 2s;
 -ms-transition:width 2s;
 -moz-transition:width 2s;
}
div:hover{width:200px; transform:rotate(180deg);
       -webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);
}
</style>
</head>

<body>
<div class=""></div>
<div class=""></div>
</body>
</html>

8 动画

　　@keyframes ie10+ chrome firefox opera safari

　　animation ie10+ chrome firefox opera safari

　　@keyframes 规定动画

　　animation 简写动画属性

　　animation-name 动画名称

　　animation-duration 动画完成的时间

　　animation-delay 延迟执行时间

　　animation-iteration-count 播放次数

　　animation-direction 是否在下个周期你想播放，默认为normal | alternate

　　animation-play-state 规定动画是否正在运行或暂停，默认running|paused

　　animation-fill-mode 规定对象动画时间之外的状态

1 例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; animation:myfirst 5s;-webkit-animation:myfirst 5s;
}
@keyframes myfirst{
    from {backgrond:red;}
    to{ background:black;}
    }
@-webkit-keyframes myfirst{
    from {backgrond:red;}
    to{ background:black;}
    }
@-moz-keyframes myfirst{
    from {backgrond:red;}
    to{ background:black;}
    }
</style>
</head>

<body>
<div class=""></div>
<div class=""></div>
</body>

2 例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; animation:myfirst 5s;-webkit-animation:myfirst 5s;
}
@keyframes myfirst{
    0% {backgrond:red;}
    25%{ background:black;}
    50%{ background:blue;}
    100%{ background:yellow;}
    }
@-webkit-keyframes myfirst{
    0% {backgrond:red;}
    25%{ background:black;}
    50%{ background:blue;}
    100%{ background:yellow;}
    }
@-moz-keyframes myfirst{
    0% {backgrond:red;}
    25%{ background:black;}
    50%{ background:blue;}
    100%{ background:yellow;}
    }
</style>
</head>

<body>
<div class=""></div>
<div class=""></div>
</body>
</html>

组合animation和transform的效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ani{width:100px; height:100px; background:yellow; animation:ani 5s 1; position:relative;-webkit-animation:ani 5s 1; }
@keyframes ani{
    0%{  transform:rotate(0deg); left:0px;}
    25%{ transform:rotate(20deg);left:0px;}
    100%{ transform:rotate(0deg);}
    }
@-webkit-keyframes ani{
    0%{  -webkit-transform:rotate(0deg); left:0px;}
    25%{ -webkit-transform:rotate(45deg);left:30px;}
    75%{ -webkit-transform:rotate(0deg);left:400px}
    100%{ -webkit-transform:rotate(-360deg);left:0px;}
    }
</style>
</head>

<body>
<div id="ani"></div>
</body>
</html>

需要注意的点是：

position:relative;还有@-webkit-keyframes 里面的transform也要写成-webkit-transform

posted @ 2014-04-06 11:18 菠萝君阅读(335) 评论(0) 编辑收藏举报

刷新页面返回顶部