看到嗶哩嗶哩的幻燈上有一個張嘴的效果很好玩,這里做一個玩一玩
html代碼:
1 2 3 4 5 6 | < div class = "center" > < div class = "eat-up" > </ div > < div class = "eat-down" > </ div > </ div > |
css代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | . center { width : 100px ; height : 100px ; margin : 100px auto ; } .eat-up { background-color : green ; width : 100px ; height : 50px ; border-radius: 50px 50px 0 0 ; animation: eat-haha-up 1 s infinite; transform-origin: center bottom ; } .eat-down{ background-color : green ; width : 100px ; height : 50px ; border-radius: 0 0 50px 50px ; animation: eat-haha-down 1 s infinite; transform-origin: center top ; } @keyframes eat-haha-up { 0% {transform: rotate( 0 ) } 25% {transform: rotate( -45 deg) } 50% {transform: rotate( 0 ) } 75% {transform: rotate( -45 deg) } to {transform: rotate( 0 ) } } @keyframes eat-haha-down { 0% {transform: rotate( 0 ) } 25% {transform: rotate( 45 deg) } 50% {transform: rotate( 0 ) } 75% {transform: rotate( 45 deg) } to {transform: rotate( 0 ) } } |