CSS3的几个标签速记3

transition：CSS3过渡     css3里很好的一个标签，可以非常方便的完成需要很多JS才能完成的动态效果

例语法：transition：width 2S,height 2S,transform 2S;

CSS3动画

@keyframes:使一种样式逐渐变为另一种样式的过程

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:red;
10 position:relative;
11 animation-name:myfirst;
12 animation-duration:5s;
13 animation-timing-function:linear;
14 animation-delay:2s;
15 animation-iteration-count:infinite;
16 animation-direction:alternate;
17 animation-play-state:running;
18 /* Safari and Chrome: */
19 -webkit-animation-name:myfirst;
20 -webkit-animation-duration:5s;
21 -webkit-animation-timing-function:linear;
22 -webkit-animation-delay:2s;
23 -webkit-animation-iteration-count:infinite;
24 -webkit-animation-direction:alternate;
25 -webkit-animation-play-state:running;
26 }
27 
28 @keyframes myfirst
29 {
30 0%   {background:red; left:0px; top:0px;}
31 25%  {background:yellow; left:200px; top:0px;}
32 50%  {background:blue; left:200px; top:200px;}
33 75%  {background:green; left:0px; top:200px;}
34 100% {background:red; left:0px; top:0px;}
35 }
36 
37 @-webkit-keyframes myfirst /* Safari and Chrome */
38 {
39 0%   {background:red; left:0px; top:0px;}
40 25%  {background:yellow; left:200px; top:0px;}
41 50%  {background:blue; left:200px; top:200px;}
42 75%  {background:green; left:0px; top:200px;}
43 100% {background:red; left:0px; top:0px;}
44 }
45 </style>
46 </head>
47 <body>
48 
49 <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
50 
51 <div></div>
52 
53 </body>
54 </html>

CSS3多列

column-count：指定需要分割的列数     语法：column-count：--；

columnn-gap：列之间的距离     语法：column-gap：--px;

column-rule-style:solid;     column-rule-gap:--px;     column-rule-color：----；边框样式和厚度颜色

直接简写column-rule：solid 1px blue;

column-width:--px;列的宽度

column-span：all；指定元素跨过所有列

outline：不占空间的轮廓     CSS3提供outline-offset：--px；使轮廓与边框中间隔指定的间隙

img{max-width：100%；height：auto；}实现图片自动按比例缩放

查看大图功能

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 a {
 6     display: inline-block;
 7     border: 1px solid #ddd;
 8     border-radius: 4px;
 9     padding: 5px;
10     transition: 0.3s;
11 }
12 
13 a:hover {
14     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
15 }
16 </style>
17 </head>
18 <body>
19 
20 <h2>缩略图作为连接</h2>
21 <p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
22 <p>点击图片查看效果：</p>
23 
24 <a target="_blank" href="paris.jpg">
25   <img src="paris.jpg" alt="Paris" width="200" height="150">
26 </a>
27 
28 </body>
29 </html>

 

 

 

 

 

posted @ 2016-07-12 20:06  Blue-Beginner  阅读(422)  评论(0)  编辑  收藏  举报