圖片旋轉
<style> div,img,body{ margin: 0; padding: 0; } /*.box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; padding: 20px; }*/ .box:hover img{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } img{ margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } </style> </head> <body> <div class="box"> <img src="../doc/1.jpg" width="100" height="100"/> </div> </body>
左右抖動
<style> .lanren { margin: 100px auto; width: 100px; text-align: center; height: 40px; line-height: 40px; border: 1px solid #CCC; border-radius: 2px; } .lanren:hover { animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 40%, 60% { transform: translate3d(8px, 0, 0); } } </style> </head> <body> <div class="lanren">Hover Me</div> </body>