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---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>