css3简介
来源：互联网 发布：php 删除cookie 编辑：程序博客网 时间：2024/05/21 14:55
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS 3</title>
<style type="text/css">
#roundedCorners {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
/*
-moz-border-radius:25px;
-webkit-border-radius:25px;
-o-border-radius:25px;
*/
}
#roundedCornersDetail {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height: 100px;
/* border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]? */
/*x radius, y radius*/
border-top-left-radius:25px 10px;
border-top-right-radius:25px 10px;
border-bottom-left-radius:25px 10px;
border-bottom-right-radius:25px 10px;
/*
-moz-border-radius:25px;
-webkit-border-radius:25px;
-o-border-radius:25px;
*/
}
#boxShadow{
width:300px;
height:100px;
background-color:yellow;
/*horizontal offset, vertical offset, blur distance(blur raduis), optional spread distance, color, 'inset' keyword*/
box-shadow: 5px 5px 10px 5px#888888;
/*
-moz-box-shadow: 10px 10px 5px #888888;
-wibkit-box-shadow: 10px 10px 5px #888888;
-o-box-shadow: 10px 10px 5px #888888;
*/
}
#boxShadowInset{
width:300px;
height:100px;
background-color:yellow;
/*horizontal offset, vertical offset, blur distance, optional spread distance, color, 'inset' keyword*/
box-shadow: inset 10px 10px 5px #888888;
/*
-moz-box-shadow: 10px 10px 5px #888888;
-wibkit-box-shadow: 10px 10px 5px #888888;
-o-box-shadow: 10px 10px 5px #888888;
*/
}
#borderImage-round{
border-width:15px;
width:250px;
padding:10px 20px;
/*
-moz-border-image:url(image/border.png) 30 30 round;
-webkit-border-image:url(image/border.png) 30 30 round;
-o-border-image:url(image/border.png) 30 30 round;
*/
border-image:url(image/border.png) 30 30 round;
}
#borderImage-stretch{
border-width:15px;
width:250px;
padding:10px 20px;
/*
-moz-border-image:url(image/border.png) 30 30 stretch;
-webkit-border-image:url(image/border.png) 30 30 stretch;
-o-border-image:url(image/border.png) 30 30 stretch;
*/
border-image:url(image/border.png) 30 30 stretch;
}
#backgroundSize{
background:url(image/img_flwr.gif);
background-repeat:no-repeat;
padding-top:40px;
/*
[ <length> | <percentage> | auto ]{1,2} | cover | contain
cover 撑满背景框 有可能展示不全背景图片
contain 在背景框里展示全图, 可能撑不满背景框
*/
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
}
#backgroundSize-full{
background:url(image/img_flwr.gif);
background-repeat:no-repeat;
padding-top:40px;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
}
#backgroundOrigin1{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
#backgroundOrigin2{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:padding-box;
}
#backgroundOrigin3{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
#multipleBackgroundImages {
width: 230px;
height: 355px;
background-repeat:no-repeat;
background-image: url(image/img_flwr.gif),url(image/img_tree.gif);
background-position:left bottom;
}
#textShadow {
text-shadow: 5px 5px 5px #FF0000;
/* the horizontal shadow, the vertical shadow, the blur distance, the color of the shadow */
}
#transformRotate {
margin: 50px 0 50px 0;
width:200px;
height:100px;
background-color: #e4eecc;
border-radius: 10px;
/* Rotate div */
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 */
}
#transformTranslate {
width:200px;
height:100px;
background-color: red;
/* left (X-axis) and the top (Y-axis)*/
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 */
}
#transformScale{
width: 50px;
height: 50px;
background: blue;
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 */
}
[id|=transformSkew]
{
margin: 15px;
width: 50px;
height: 50px;
background: green;
}
#transformSkew-c{
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 */
}
#transformSkew-a{
transform:skewX(30deg);
-ms-transform:skewX(30deg); /* IE 9 */
-moz-transform:skewX(30deg); /* Firefox */
-webkit-transform:skewX(30deg); /* Safari and Chrome */
-o-transform:skewX(30deg); /* Opera */
}
#transformSkew-b{
transform:skewY(20deg);
-ms-transform:skewY(20deg); /* IE 9 */
-moz-transform:skewY(20deg); /* Firefox */
-webkit-transform:skewY(20deg); /* Safari and Chrome */
-o-transform:skewY(20deg); /* Opera */
}
#transformMatrix {
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
#transform3dRotateX
{
width:200px;
height:200px;
background:#f2ffe1;
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
#transform3dRotateY
{
width:200px;
height:200px;
background:#f2ffe1;
transform: rotateY(120deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
-moz-transform: rotateY(120deg); /* Firefox */
}
#transitions
{
width:200px;
height:200px;
background:red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
#transitions2 {
width:200px;
height:200px;
background:blue;
/*transition: width 1s linear 2s;*/
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
#transitions2:hover {
width: 1000px;
}
/* ------------------------------------------------ */
@keyframes myfirst
{
from {background: red;}
to {background: yellow; transform:rotate(30deg);}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;box-shadow: 5px 5px 10px 5px#888888;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
#animation1{
width: 400px;
height:200px;
position: relative ;
border-radius: 18px;
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="roundedCorners">The border-radius property allows you to add rounded corners to elements.</div>
<br />
<div id="roundedCornersDetail"></div>
<br />
<pre>
New options for borders in CSS3 :
In firefox http://www.css3.info/preview/colored-border/
</pre>
<hr /><br /><!-- -------------------------------------------------------------------- -->
阴影
<div id="boxShadow"></div>
<br />
<div id="boxShadowInset"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
边框背景图
<div id="borderImage-round">Here, the image is tiled (repeated) to fill the area.</div>
<br /><!-- -------------------------------------------------------------------- -->
<div id="borderImage-stretch">Here, the image is stretched to fill the area.</div>
<br />
<pre>
还能细分为:
<b>border-image:</b>
border-top-image
border-right-image
border-bottom-image
border-left-image
<b>border-corner-image:</b>
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
</pre>
<hr /><br /><!-- -------------------------------------------------------------------- -->
背景图大小
<br />
<img src="image/img_flwr.gif" alt="Flowers" width="224" height="162" />
<p>below is small pic</p>
<div id="backgroundSize"></div>
<br /><!-- -------------------------------------------------------------------- -->
<div id="backgroundSize-full"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
背景起始点
<div id="backgroundOrigin1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<div id="backgroundOrigin2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<div id="backgroundOrigin3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
多个背景图
<div id="multipleBackgroundImages"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
字体阴影
<h1 id="textShadow">Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer does not support the text-shadow property.</p>
<hr /><br /><!-- -------------------------------------------------------------------- -->
2D Transform - 2D 变换
<div id="transformRotate"></div>
<div style="border: 1px dotted black; width:200px; height:100px;">
<div id="transformTranslate"></div>
</div>
<div>asdfasfsdfasdfsadfsfsdfasdfasfasfsafasdfsadf</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="transformScale"></div>
<br />
<br />
<br />
<br />
<br />
倾斜
<div id="transformSkew-a"></div>
<div id="transformSkew-b"></div>
<div id="transformSkew-c"></div>
<br/>
<br/>
<br/>
<div id="transformMatrix"></div>
<br />
<a href="2dtransfrom.html" target="_blank">所有情况
</a>
<hr /><br /><!-- -------------------------------------------------------------------- -->
3D Transform - 3D 变换
<pre>
正面
|
|
|
|
朝上
</pre>
<pre id="transform3dRotateX"
>
正面
|
|
|
|
朝上
</pre>
<pre id="transform3dRotateY">
正面
|
|
|
|
朝上
</pre>
还有很多和2D类似的就不一一列举了.
<hr /><br /><!-- -------------------------------------------------------------------- -->
<pre>
Transitions - 过度
当一个元素的style发生改变的时候, 没有transitions的时候是立即显示效果的, 有了之后是有一个过度效果的
</pre>
<div id="transitions"></div>
<input type="button"
onclick="doIt()"/>
<script>
function doIt(){
document.getElementById("transitions").style.width = "50px";
}
</script>
<br />
<div id="transitions2"
></div> >
<hr /><br /><!-- -------------------------------------------------------------------- -->
Animation - 动画
<div id="animation1"></div>
<pre>
没有提到
<b>Color
</b>
HSL colors
HSLA colors
opacity
RGBA colors
</pre>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS 3</title>
<style type="text/css">
#roundedCorners {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
/*
-moz-border-radius:25px;
-webkit-border-radius:25px;
-o-border-radius:25px;
*/
}
#roundedCornersDetail {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height: 100px;
/* border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]? */
/*x radius, y radius*/
border-top-left-radius:25px 10px;
border-top-right-radius:25px 10px;
border-bottom-left-radius:25px 10px;
border-bottom-right-radius:25px 10px;
/*
-moz-border-radius:25px;
-webkit-border-radius:25px;
-o-border-radius:25px;
*/
}
#boxShadow{
width:300px;
height:100px;
background-color:yellow;
/*horizontal offset, vertical offset, blur distance(blur raduis), optional spread distance, color, 'inset' keyword*/
box-shadow: 5px 5px 10px 5px#888888;
/*
-moz-box-shadow: 10px 10px 5px #888888;
-wibkit-box-shadow: 10px 10px 5px #888888;
-o-box-shadow: 10px 10px 5px #888888;
*/
}
#boxShadowInset{
width:300px;
height:100px;
background-color:yellow;
/*horizontal offset, vertical offset, blur distance, optional spread distance, color, 'inset' keyword*/
box-shadow: inset 10px 10px 5px #888888;
/*
-moz-box-shadow: 10px 10px 5px #888888;
-wibkit-box-shadow: 10px 10px 5px #888888;
-o-box-shadow: 10px 10px 5px #888888;
*/
}
#borderImage-round{
border-width:15px;
width:250px;
padding:10px 20px;
/*
-moz-border-image:url(image/border.png) 30 30 round;
-webkit-border-image:url(image/border.png) 30 30 round;
-o-border-image:url(image/border.png) 30 30 round;
*/
border-image:url(image/border.png) 30 30 round;
}
#borderImage-stretch{
border-width:15px;
width:250px;
padding:10px 20px;
/*
-moz-border-image:url(image/border.png) 30 30 stretch;
-webkit-border-image:url(image/border.png) 30 30 stretch;
-o-border-image:url(image/border.png) 30 30 stretch;
*/
border-image:url(image/border.png) 30 30 stretch;
}
#backgroundSize{
background:url(image/img_flwr.gif);
background-repeat:no-repeat;
padding-top:40px;
/*
[ <length> | <percentage> | auto ]{1,2} | cover | contain
cover 撑满背景框 有可能展示不全背景图片
contain 在背景框里展示全图, 可能撑不满背景框
*/
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
}
#backgroundSize-full{
background:url(image/img_flwr.gif);
background-repeat:no-repeat;
padding-top:40px;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
}
#backgroundOrigin1{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
#backgroundOrigin2{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:padding-box;
}
#backgroundOrigin3{
border:1px solid black;
padding:35px;
width: 300px;
background-image:url('image/smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
#multipleBackgroundImages {
width: 230px;
height: 355px;
background-repeat:no-repeat;
background-image: url(image/img_flwr.gif),url(image/img_tree.gif);
background-position:left bottom;
}
#textShadow {
text-shadow: 5px 5px 5px #FF0000;
/* the horizontal shadow, the vertical shadow, the blur distance, the color of the shadow */
}
#transformRotate {
margin: 50px 0 50px 0;
width:200px;
height:100px;
background-color: #e4eecc;
border-radius: 10px;
/* Rotate div */
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 */
}
#transformTranslate {
width:200px;
height:100px;
background-color: red;
/* left (X-axis) and the top (Y-axis)*/
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 */
}
#transformScale{
width: 50px;
height: 50px;
background: blue;
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 */
}
[id|=transformSkew]
{
margin: 15px;
width: 50px;
height: 50px;
background: green;
}
#transformSkew-c{
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 */
}
#transformSkew-a{
transform:skewX(30deg);
-ms-transform:skewX(30deg); /* IE 9 */
-moz-transform:skewX(30deg); /* Firefox */
-webkit-transform:skewX(30deg); /* Safari and Chrome */
-o-transform:skewX(30deg); /* Opera */
}
#transformSkew-b{
transform:skewY(20deg);
-ms-transform:skewY(20deg); /* IE 9 */
-moz-transform:skewY(20deg); /* Firefox */
-webkit-transform:skewY(20deg); /* Safari and Chrome */
-o-transform:skewY(20deg); /* Opera */
}
#transformMatrix {
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
#transform3dRotateX
{
width:200px;
height:200px;
background:#f2ffe1;
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
#transform3dRotateY
{
width:200px;
height:200px;
background:#f2ffe1;
transform: rotateY(120deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
-moz-transform: rotateY(120deg); /* Firefox */
}
#transitions
{
width:200px;
height:200px;
background:red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
#transitions2 {
width:200px;
height:200px;
background:blue;
/*transition: width 1s linear 2s;*/
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
#transitions2:hover {
width: 1000px;
}
/* ------------------------------------------------ */
@keyframes myfirst
{
from {background: red;}
to {background: yellow; transform:rotate(30deg);}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;box-shadow: 5px 5px 10px 5px#888888;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
#animation1{
width: 400px;
height:200px;
position: relative ;
border-radius: 18px;
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="roundedCorners">The border-radius property allows you to add rounded corners to elements.</div>
<br />
<div id="roundedCornersDetail"></div>
<br />
<pre>
New options for borders in CSS3 :
In firefox http://www.css3.info/preview/colored-border/
</pre>
<hr /><br /><!-- -------------------------------------------------------------------- -->
阴影
<div id="boxShadow"></div>
<br />
<div id="boxShadowInset"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
边框背景图
<div id="borderImage-round">Here, the image is tiled (repeated) to fill the area.</div>
<br /><!-- -------------------------------------------------------------------- -->
<div id="borderImage-stretch">Here, the image is stretched to fill the area.</div>
<br />
<pre>
还能细分为:
<b>border-image:</b>
border-top-image
border-right-image
border-bottom-image
border-left-image
<b>border-corner-image:</b>
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
</pre>
<hr /><br /><!-- -------------------------------------------------------------------- -->
背景图大小
<br />
<img src="image/img_flwr.gif" alt="Flowers" width="224" height="162" />
<p>below is small pic</p>
<div id="backgroundSize"></div>
<br /><!-- -------------------------------------------------------------------- -->
<div id="backgroundSize-full"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
背景起始点
<div id="backgroundOrigin1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<div id="backgroundOrigin2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<div id="backgroundOrigin3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
多个背景图
<div id="multipleBackgroundImages"></div>
<hr /><br /><!-- -------------------------------------------------------------------- -->
字体阴影
<h1 id="textShadow">Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer does not support the text-shadow property.</p>
<hr /><br /><!-- -------------------------------------------------------------------- -->
2D Transform - 2D 变换
<div id="transformRotate"></div>
<div style="border: 1px dotted black; width:200px; height:100px;">
<div id="transformTranslate"></div>
</div>
<div>asdfasfsdfasdfsadfsfsdfasdfasfasfsafasdfsadf</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="transformScale"></div>
<br />
<br />
<br />
<br />
<br />
倾斜
<div id="transformSkew-a"></div>
<div id="transformSkew-b"></div>
<div id="transformSkew-c"></div>
<br/>
<br/>
<br/>
<div id="transformMatrix"></div>
<br />
<a href="2dtransfrom.html" target="_blank">所有情况
</a>
<hr /><br /><!-- -------------------------------------------------------------------- -->
3D Transform - 3D 变换
<pre>
正面
|
|
|
|
朝上
</pre>
<pre id="transform3dRotateX"
>
正面
|
|
|
|
朝上
</pre>
<pre id="transform3dRotateY">
正面
|
|
|
|
朝上
</pre>
还有很多和2D类似的就不一一列举了.
<hr /><br /><!-- -------------------------------------------------------------------- -->
<pre>
Transitions - 过度
当一个元素的style发生改变的时候, 没有transitions的时候是立即显示效果的, 有了之后是有一个过度效果的
</pre>
<div id="transitions"></div>
<input type="button"
onclick="doIt()"/>
<script>
function doIt(){
document.getElementById("transitions").style.width = "50px";
}
</script>
<br />
<div id="transitions2"
></div> >
<hr /><br /><!-- -------------------------------------------------------------------- -->
Animation - 动画
<div id="animation1"></div>
<pre>
没有提到
<b>Color
</b>
HSL colors
HSLA colors
opacity
RGBA colors
</pre>
</body>
</html>
- css3简介
- css3简介
- CSS3简介及CSS3边框
- CSS3 (一) 简介
- CSS3 Media Queries 简介
- CSS3新特性简介
- CSS3 Media Queries 简介
- （一）CSS3简介
- css3选择器简介大全
- CSS3基础简介
- 1.CSS3简介
- CSS3 简介 （一）
- CSS3 简介 （二）
- CSS3 简介 （三）
- CSS3媒体查询 Media Queries 简介
- CSS3的关键帧动画(KeyframeAnimations)简介
- CSS3滚动条-webkit-scrollbar简介
- CSS3 Transitions, Transforms和Animation使用简介
- div css 浏览器兼容问题的一点解决办法
- Android 中的ImageSwitcher 和Gallery结合使用
- 第一次创业的一些经验的总结 - 用户体验
- 近日开始学习SEO，发现很多以往忽略的致命错误
- Internet Explorer无法打开网页
- css3简介
- SQL删除重复数据的一种方法（亲测）
- php输出XML页面头部代码
- 交换排序之冒泡排序
- Linux下Oracle的安装
- 解决ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
- android 使用XmlResourceParser 解析XML
- TinyOS Storage debug record
- Vector Clock
