標籤: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 adipisicing48 elit. Ab animi laboriosam nostrum consequatur fugiat49 <span id="first">banana</span> at, labore praesentium modi,50 quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum51 <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur52 adipisicingelit. Ab animi laboriosam nostrum consequatur53 fugiatat, labore praesentium modi, quasi dolorum debitis54 reiciendis facilis, dolor saepe sint nemo, earum molestias quas.55 </p>56 </body>57 </html>
CSS——過渡