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>
时间： 2024-08-24 04:14:35