标签:
Some examples
1> Input width animation
Search:
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 input[type=text] { 6 width: 100px; 7 -webkit-transition: ease-in-out, width .35s ease-in-out; 8 transition: ease-in-out,width .35s ease-in-out; 9 } 10 input[type=text]:focus { 11 width: 250px; 12 } 13 </style> 14 </head> 15 <body> 16 Search: <input type="text" name="search" placeholder="click here"> 17 </body> 18 </html>
2> Shadow Effect
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 background-color: #4CAF50; /* Green */ 7 border: none; 8 color: white; 9 padding: 15px 32px; 10 text-align: center; 11 text-decoration: none; 12 display: inline-block; 13 font-size: 16px; 14 margin: 4px 2px; 15 cursor: pointer; 16 -webkit-transition-duration: 0.4s; /* Safari */ 17 transition-duration: 0.4s; 18 } 19 20 .button1 { 21 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 22 } 23 24 .button2:hover { 25 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 26 } 27 </style> 28 </head> 29 <body> 30 <button class="button button1">Shadow Button</button> 31 <button class="button button2">Shadow on Hover</button> 32 </body> 33 </html>
3> Button Groups1
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 background-color: #4CAF50; /* Green */ 7 border: none; 8 color: white; 9 padding: 15px 32px; 10 text-align: center; 11 text-decoration: none; 12 display: inline-block; 13 font-size: 16px; 14 cursor: pointer; 15 float: left; 16 } 17 18 .button:hover { 19 background-color: #3e8e41; 20 } 21 </style> 22 </head> 23 <body> 24 <button class="button">Button</button> 25 <button class="button">Button</button> 26 <button class="button">Button</button> 27 <button class="button">Button</button> 28 </body> 29 </html>
4> Button Groups2
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 background-color: #4CAF50; /* Green */ 7 border: 1px solid green; 8 color: white; 9 padding: 15px 32px; 10 text-align: center; 11 text-decoration: none; 12 display: inline-block; 13 font-size: 16px; 14 cursor: pointer; 15 float: left; 16 } 17 18 .button:hover { 19 background-color: #3e8e41; 20 } 21 </style> 22 </head> 23 <body> 24 <button class="button">Button</button> 25 <button class="button">Button</button> 26 <button class="button">Button</button> 27 <button class="button">Button</button> 28 </body> 29 </html>
5> Animated Button
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 display: inline-block; 7 border-radius: 4px; 8 background-color: #f4511e; 9 border: none; 10 color: #FFFFFF; 11 text-align: center; 12 font-size: 28px; 13 padding: 20px; 14 width: 200px; 15 transition: all 0.5s; 16 cursor: pointer; 17 margin: 5px; 18 } 19 20 .button span { 21 cursor: pointer; 22 display: inline-block; 23 position: relative; 24 transition: 0.5s; 25 } 26 27 .button span:after { 28 content: ‘»‘; 29 position: absolute; 30 opacity: 0; 31 top: 0; 32 right: -20px; 33 transition: 0.5s; 34 } 35 36 .button:hover span { 37 padding-right: 25px; 38 } 39 40 .button:hover span:after { 41 opacity: 1; 42 right: 0; 43 } 44 </style> 45 </head> 46 <body> 47 48 <button class="button" style="vertical-align:middle"><span>Hover </span></button> 49 50 </body> 51 </html>
6> Ripple Effect
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 position: relative; 7 background-color: #4CAF50; 8 border: none; 9 font-size: 28px; 10 color: #FFFFFF; 11 padding: 20px; 12 width: 200px; 13 text-align: center; 14 -webkit-transition-duration: 0.4s; /* Safari */ 15 transition-duration: 0.4s; 16 text-decoration: none; 17 overflow: hidden; 18 cursor: pointer; 19 } 20 21 .button:after { 22 content: ""; 23 background: #90EE90; 24 display: block; 25 position: absolute; 26 padding-top: 300%; 27 padding-left: 350%; 28 margin-left: -20px!important; 29 margin-top: -120%; 30 opacity: 0; 31 transition: all 0.8s 32 } 33 34 .button:active:after { 35 padding: 0; 36 margin: 0; 37 opacity: 1; 38 transition: 0s 39 } 40 </style> 41 </head> 42 <body> 43 44 <button class="button">Click Me</button> 45 46 </body> 47 </html>
7> Pressed Effect
Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .button { 6 display: inline-block; 7 padding: 15px 25px; 8 font-size: 24px; 9 cursor: pointer; 10 text-align: center; 11 text-decoration: none; 12 outline: none; 13 color: #fff; 14 background-color: #4CAF50; 15 border: none; 16 border-radius: 15px; 17 box-shadow: 0 9px #999; 18 } 19 20 .button:hover {background-color: #3e8e41} 21 22 .button:active { 23 background-color: #3e8e41; 24 box-shadow: 0 5px #666; 25 transform: translateY(4px); 26 } 27 </style> 28 </head> 29 <body> 30 <button class="button">Click Me</button> 31 </body> 32 </html>
标签:
原文地址:http://www.cnblogs.com/hzj680539/p/5093554.html