CSS——过渡

涉及到的属性：

transition-delay

transition-duration

transition-property

transition-timing-function

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS——过渡</title>
 6 
 7     <style>
 8         @font-face {
 9             font-family: 'MyFont';
10             font-style: normal;
11             font-weight: normal;
12             src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
13         }
14         p{
15             padding: 5px;
16             border: medium solid cadetblue;
17             background-color: lightgray;
18             margin: 2px;
19             font-size: medium;
20             font-family: MyFont,cursive;
21         }
22         #first{
23             font-weight: bold;
24             border: medium solid black;
25             transition-delay: 100ms;
26             transition-duration: 250ms;
27             transition-timing-function: linear;
28         }
29         #first:hover{
30             font-size: x-large;
31             border: medium solid white;
32             background-color: green;
33             color: white;
34             padding: 4px;
35             transition-delay: 100ms;
36             transition-property: background-color,color,padding,font-size,border;
37             transition-duration: 500ms;
38             transition-timing-function: linear;
39         }
40         #second{
41             font-style: italic;
42         }
43     </style>
44 </head>
45 <body>
46 <p>
47     There is a paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing
48     elit. Ab animi laboriosam nostrum consequatur fugiat
49     <span id="first">banana</span> at, labore praesentium modi,
50     quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum
51     <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur
52     adipisicingelit. Ab animi laboriosam nostrum consequatur
53     fugiatat, labore praesentium modi, quasi dolorum debitis
54     reiciendis facilis, dolor saepe sint nemo, earum molestias quas.
55 </p>
56 </body>
57 </html>

 

posted @ 2017-03-15 17:41  Shuqi_memo  阅读(274)  评论(0)  编辑  收藏  举报