你的位置:首页 > 网页设计

[网页设计]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 myfirst29 {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>