CSS——动画

 

 

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

 

posted @ 2017-03-15 21:11  Shuqi_memo  阅读(138)  评论(0)    收藏  举报