一些该拿起的就拿起，该舍弃的要舍弃。因为，只有该结束的结束了，该开始的才会开始。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-轻弹-效果</title> <style> .element{ color: #f35626; margin: -24px auto auto auto; position: absolute; top: 50%; left: 50%; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 60s infinite linear; margin-bottom: 1.5rem; font-size: 3rem; font-weight: 100; line-height: 1; letter-spacing: -.05em; } .animated { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } to { transform: perspective(400px); animation-timing-function: ease-in; } } .flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; } </style> </head> <body> <div class="element animated flip">flip</div> </body> </html>
这个效果也叫轻弹效果
