css3应用实例

1 ：把按钮或者div的边框设置成圆角边框：
css为：
    text-align:center;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:350px;
    border-radius:25px;
    -moz-border-radius:25px; 老的 Firefox
实例：
设置网页中所有div的边框为圆角边框：
div{
   text-align:center;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:350px;
    border-radius:25px;
    -moz-border-radius:25px; 老的 Firefox
}
 
图例：
 
2：使用 css给div边框添加阴影
css为：
div{
width: 300px;
height: 100px;
background-color: #ff9900;
-moz-box-shadow:10px 10px 5px #888888;老版Firefox
box-shadow: 10px 10px 5px #888888;
 
}
图例：
 
3：文字阴影部分效果
 
css为：
h1
{
text-shadow: 5px 5px 5px #ffffff;
}
 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
 
div
{
font-family:myFirstFont;
font-weight:bold;
}
图例：
 
 
5：css3 div 拉伸：
 css 为：
#divset{
margin:30px;
width:200px;
height:100px;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
 
#divset:hover{
width:300px;
}
 
图例：
 
6：css3实现图形上下翻转
 
css为：
#divshow{
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 */
}
#divshow: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 */
}
 
图例：
 
7：css实现动画特效
css为：
#newsetdiv{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
 
@keyframes myfirst
{
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;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
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;}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
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;}
}
 
@-o-keyframes myfirst /* Opera */
{
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;}
}
 
图例：
 
8：网页背景图片随页面的页面的延伸而伸长
body{
     background:url(imag/13.jpg);
    background-size:100% 100%;
   -moz-background-size:100% 100%;
   background-repeat:no-repeat;
 
}
图例：

备注：有关上面示例的HTML为：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>css3应用实例</title>
</head>
<body >
  <!-- css3 div旋转30度 -->
 <div id="div4"><h1>css3应用实例</h1></div>
 <div id="divset">hello word !</div>
 <div id="divshow">this is the set</div>
 <div id="newsetdiv"></div>
</body>
</html>
 
posted @ 2015-08-11 17:21  cph-Lancer  阅读(488)  评论(0)    收藏  举报