码迷,mamicode.com
首页 > Web开发 > 详细

CSS——过渡

时间:2017-03-15 19:00:28      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:delay   iat   sum   app   gray   lin   css   har   http   

涉及到的属性:

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>

 

CSS——过渡

标签:delay   iat   sum   app   gray   lin   css   har   http   

原文地址:http://www.cnblogs.com/shuqicui/p/2017-3-15-2.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!