1 |
<div class="rum">会いたくて会いたくて</div> |
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 |
.rum{ width: 300px; margin: 40px auto; padding: 40px 0; background: #e88; border-radius: 8px; color: #fff; text-align: center; } .rum:hover{ animation: rumble 0.12s linear infinite; } @keyframes rumble{ 0% {transform:rotate(0deg) translate(0,0);} 12.5% {transform:rotate(0.4deg) translate(1px,-1px);} 25% {transform:rotate(0.8deg) translate(0px,1px);} 37.5% {transform:rotate(0.4deg) translate(-1px,0);} 50% {transform:rotate(0deg) translate(0,0);} 62.5% {transform:rotate(-0.4deg) translate(1px,0);} 75% {transform:rotate(-0.8deg) translate(0,1px);} 87.5% {transform:rotate(-0.4deg) translate(-1px,-1px);} 100% {transform:rotate(0deg) translate(0,0);} } |
1 |
文章内のリンクはこんな感じ→<span class="rum_inline">ここにマウスを乗せて!</span>←で震えます。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.rum_inline{ display: inline-block; background: #ffefef; } .rum-inline:hover{ animation: rumble 0.12s linear infinite; } @keyframes rumble{ 0% {transform:rotate(0deg) translate(0,0);} 12.5% {transform:rotate(0.4deg) translate(1px,-1px);} 25% {transform:rotate(0.8deg) translate(0px,1px);} 37.5% {transform:rotate(0.4deg) translate(-1px,0);} 50% {transform:rotate(0deg) translate(0,0);} 62.5% {transform:rotate(-0.4deg) translate(1px,0);} 75% {transform:rotate(-0.8deg) translate(0,1px);} 87.5% {transform:rotate(-0.4deg) translate(-1px,-1px);} 100% {transform:rotate(0deg) translate(0,0);} } |