首页 > 代码库 > css3

css3

css3边框:

border-radius:  属性,添加像素,可以使边框角变圆,50px的边框为半圆形,50%则会变成一个椭圆形。

box-shadow: 属性,添加像素,颜色,例;

<div style="width:100px; height:50px; box-shadow:30px 0px #CCCC33" ></div>

技术分享

出现的形状如图所示,代表距离左30px,距离下0px,颜色则是黄色

<div style="width:100px; height:50px; box-shadow:0px 30px #999999"></div>

技术分享

出现的形状如图所示,代表距离左0px;距离下30px;颜色则是灰色

<div style="width:100px; height:50px; box-shadow:0px 30px 10px #999999"></div>

技术分享

在后面再加一个10px,则阴影部分会虚化,也就是会模糊

<div style="width:100px; height:50px; box-shadow:30px 30px 10px #999999 inset"></div>

技术分享

再在后面加个inset,则阴影部分和蓝色部分进行了颜色交换,并且只显示里面的部分,inset是设置在里面的意思

border-imager属性,可以允许使用图片作为边框,但border-imager属性在IE和QQ浏览器中并不兼容。

Css背景:

background-size属性,可以规定背景图片的尺寸

background-origin属性,规定根据边框定位还是文本定位;

background-origin:border-box;根据边框定位

background-origin:content-box;根据文本定位

 多重背景图片,background-imager

<body style="  background-image:url(1a92b3afb07e757970bfdcac20f9561b.gif), url(57e4b8e9aab1d_1024.jpg); background-repeat:no-repeat">

</body>

技术分享

两张背景图重叠,第一张为优先级

 

如果不加background-repeat,则两个背景图会铺满整个屏幕

给文字加阴影:

text-shadow属性,可以向文本应用阴影效果

四个值,分别代表距离左侧,距离上侧,模糊程度及阴影颜色

<div style="font-size:18px; color:#609; text-shadow:30px 20px 10px #CC0066">文字阴影</div>

技术分享

效果如图所示。

 文本自动换行:word-wrap属性,允许文本强制文本进行换行,这意味着会对单词进行拆分,它的值是break-word允许对单词进行拆分换到下一行

CSS3 转换:

可以对元素进行移动、缩放、移动、拉长或拉伸。

可以使用2D或3D转换来转换我们的元素

2D转换:

transform属性,内置方法

1、rotate()进行旋转,括号内部写旋转角度,默认顺时针旋转,允许负值,元素将进行逆时针旋转。

<div style=" position:relative; top:100px; left:100px;width:100px; height:100px; transform:rotate(45deg)">45度旋转</div>

技术分享

如图所示,里面的文字也会跟着一起旋转,deg是度的意思

2、translate()从当前位置进行移动,括号内为x、y值,允许负值,将反方向移动

<div style=" left:100px;width:100px; height:100px; transform:translate(200px,200px)">位置移动</div>

技术分享

如图所示,移动位置不光可以用定位移动,还可以xy轴移动

3、scale()改变原始尺寸,按照倍数变化,括号内为widch、height的倍数

<div style=" width:100px; height:100px; ">你好</div>
<div style=" width:100px; height:100px; transform:scale(3,2); margin:200px">你好</div>

技术分享

如图所示,改变元素的倍数,里面的文字也随之改变

4、skew()水平、垂直方向进行扭转,括号内是水平扭转角度、垂直扭转角度

<div style=" width:100px; height:100px; transform:skew(0deg,30deg); margin:50px ">纵向扭转30度</div>
<div style="width:100px; height:100px; transform:skew(30deg,0deg); margin:100px">横向扭转30度</div>
<div style="width:100px; height:100px; transform:skew(30deg,30deg); margin:100px">横向纵向都扭转30度</div>

技术分享

如图所示,里面的文字也会随之变化

3D转换:

transform属性,变形、转换,内置方法:

1、rotateX(),沿水平x轴进行垂直的翻转,括号内写转动度数

2、rotateY(),沿垂直Y轴进行水平的翻转,括号内写转动度数

2D转换和3D转换的区别:2D转换仅仅在于平面,文字可以看出并没有反过来

3D转换是相当于镜面效果的,进行了前后空间(涉及到了Z轴)的占用进行的翻转

<div style="width:200px; height:100px; ">元素</div>
<br />
<div style="width:200px; height:100px; transform:rotateY(180deg)">Y翻转180</div>
<div style="width:200px; height:100px; transform:rotateX(120deg)">X翻转120</div>

技术分享

如图所示,3D翻转,像镜面一样,字也是反的

CSS3过渡:transition属性,专门应对颜色、长度、宽度、位置等变化过渡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#a1
{ width:200px; height:100px; background-color:#909; border:1px solid #000}
#a2
{ width:200px; height:100px; background-color:#909;border:1px solid #000; transition:2s}
#a1:hover{ background-color:#969}
#a2:hover{ background-color:#99C}
#bg
{ width:200px; height:200px; border:1px solid #000; position:relative; left:400px}
#tb
{ position:relative; left:0px; top:0px; transition:1s}
#tb:hover{ left:-200px}
#tb:active{ left:-400px}
#c1
{ width:200px; height:200px; background-color:#09F; transition:1s}
#c1:hover{ width:300px; height:400px}
</style>
<body>
    <div id="a1">这是快速变得</div>
    <div id="a2">使用过渡的</div>
<br />
<br />
<div id="bg">
<table id="tb" width="600" height="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
    <td><img src="201291893228996.jpg"  width="200" height="200" /></td>
    <td><img src="1655299809.jpg"  width="200" height="200" /></td>
    <td><img src="20130109080830267.jpg"  width="200" height="200" /></td>

</tr>
</tbody>
</table>
<div>
<br /><br />
<div id="c1" ></div>
</body>
</html>

代码如上,图片如下:

技术分享

CSS3动画:

通过CSS3,我们能够创建动画,这样可以在许多网页中取代动画图片、Flash动画以及JavaScript动画。

想要创建CSS3动画,需要遵循@keyframes规则。

@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

注:IE需要10及以上。

创建好动画之后需要绑定到某个选择器,否则不会产生任何动画效果。

使用animation进行动画捆绑。两个值:动画名称、时长。

时间长度必须规定,否则默认为0。也就是表示没有动画效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
from{ background-color:#C0C}
to{ background-color:#C9F}

}
</style>
<body>

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

 

 

动画是使元素从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式以及任意多的次数。

我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...,效果等同于0%~100%。

0%是动画的开始,100%是动画的完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
0%{ background:#F00}
15%{ background:#F90}
25%{ background:#FF0}
35%{ background:#3F6}
55%{ background:#6FF}
65%{ background:#63F}
100%{ background:#C00}
}
</style>
<body>

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

多项改变时只需要在每个百分号后的花括号内写上就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变,所以增加了position属性*/
    animation:myfirst 5s infinite alternate;/*动画捆绑,两个值,动画名称、时长,加上一个无限执行,交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中,更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值,那么本动画将无限执行下去。<br />
在无限执行的基础之上增加了一个alternate值,那么本动画会进行正反交替执行。
<div></div>
</body>
</html>

 

css3