提示:你可以先修改部分代码再运行。
sass
$speed: 2.5s; .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3); overflow: hidden; background: #DD3C54; } .bell { position: absolute; top: 173px; left: 175px; fill: #fff; transform-origin: 50% 0; animation: shake $speed ease infinite; } .line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .line-1, .line-2, .line-3 { position: absolute; top: 170px; left: 230px; } .line-4, .line-5, .line-6 { position: absolute; top: 170px; right: 230px; } @for $i from 1 through 6 { .line-#{$i} { animation: line-#{$i} $speed ease-out infinite both; } } @keyframes line-1 { 0% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 50%, 100% { transform: translate3d(60px,0,0) scale(2); opacity: 0; } } @keyframes line-2 { 0%,19%{ opacity: 0; } 20% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 70%, 100% { transform: translate3d(60px,0,0) scale(2); opacity: 0; } } @keyframes line-3 { 0%,39% { opacity: 0; } 40% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 90%, 100% { transform: translate3d(60px,0,0) scale(2); opacity: 0; } } @keyframes line-4 { 0% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 50%, 100% { transform: translate3d(-60px,0,0) scale(2); opacity: 0; } } @keyframes line-5 { 0%,19%{ opacity: 0; } 20% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 70%, 100% { transform: translate3d(-60px,0,0) scale(2); opacity: 0; } } @keyframes line-6 { 0%,39% { opacity: 0; } 40% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 90%, 100% { transform: translate3d(-60px,0,0) scale(2); opacity: 0; } } @keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% { transform: rotate(6deg); } 45% { transform: rotate(4deg); } 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% { transform: rotate(-6deg); } 47.5% { transform: rotate(-2deg); } }