MENU

CSS的文字抖动特效

August 9, 2019 • CSS资源,CSS笔记

在网页合适的位置加上:

<span class="shaky">你在说什么( ,,´・ω・)ノ"(´っω・`。)</span>

CSS代码:

.shaky { display: inline-block; padding: 1px; font-size: 12px;
.-webkit-transform-origin: center center; -ms-transform-origin: center
.center; transform-origin: center center; -webkit-animation-name:
.shaky-slow; -ms-animation-name: shaky-slow; animation-name:
.shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration:
.4s; animation-duration: 4s; -webkit-animation-iteration-count:
.infinite; -ms-animation-iteration-count: infinite;
.animation-iteration-count: infinite;
.-webkit-animation-timing-function: ease-in-out;
.-ms-animation-timing-function: ease-in-out;
.animation-timing-function: ease-in-out; -webkit-animation-delay: 0s;
.-ms-animation-delay: 0s; animation-delay: 0s;
.-webkit-animation-play-state: running; -ms-animation-play-state:
.running; animation-play-state: running; } @-webkit-keyframes
.shaky-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg)
.} 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg) } 4%
.{ -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% {
.-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% {
.-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% {
.-webkit-transform: translate(1.4px, 0px) rotate(-2deg) } 12% {
.-webkit-transform: translate(-1.3px, -1px) rotate(-2deg) } 14% {
.-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% {
.-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% {
.-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% {
.-webkit-transform: translate(1px, 1px) rotate(-0.5deg) } 22% {
.-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% {
.-webkit-transform: translate(-1.4px, -1px) rotate(2deg) } 26% {
.-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% {
.-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg) } 30% {
.-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% {
.-webkit-transform: translate(-1px, 0px) rotate(2deg) } 34% {
.-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% {
.-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% {
.-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% {
.-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% {
.-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% {
.-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% {
.-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% {
.-webkit-transform: translate(1px, 1.6px) rotate(1.5deg) } 50% {
.-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% {
.-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% {
.-webkit-transform: translate(1.6px, -1px) rotate(-2deg) } 56% {
.-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% {
.-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% {
.-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% {
.-webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% {
.-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% {
.-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% {
.-webkit-transform: translate(0px, -1.6px) rotate(-2deg) } 70% {
.-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% {
.-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% {
.-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% {
.-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% {
.-webkit-transform: translate(-1px, 1.4px) rotate(2deg) } 80% {
.-webkit-transform: translate(1.4px, 1.6px) rotate(2deg) } 82% {
.-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% {
.-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% {
.-webkit-transform: translate(1px, 1.4px) rotate(-2deg) } 88% {
.-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% {
.-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% {
.-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 94% {
.-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% {
.-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% {
.-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg) } }
.@keyframes shaky-slow { 0% { transform: translate(0px, 0px)
.rotate(0deg) } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg)
.} 4% { transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% {
.transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { transform:
.translate(-1.3px, -1px) rotate(-1.5deg) } 10% { transform:
.translate(1.4px, 0px) rotate(-2deg) } 12% { transform:
.translate(-1.3px, -1px) rotate(-2deg) } 14% { transform:
.translate(1.5px, 1.3px) rotate(1.5deg) } 16% { transform:
.translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { transform:
.translate(1.3px, -1.3px) rotate(-2deg) } 20% { transform:
.translate(1px, 1px) rotate(-0.5deg) } 22% { transform:
.translate(1.3px, 1.5px) rotate(-2deg) } 24% { transform:
.translate(-1.4px, -1px) rotate(2deg) } 26% { transform:
.translate(1.3px, -1.3px) rotate(0.5deg) } 28% { transform:
.translate(1.6px, -1.6px) rotate(-1.5deg) } 30% { transform:
.translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { transform:
.translate(-1px, 0px) rotate(2deg) } 34% { transform: translate(1.3px,
.1.3px) rotate(-0.5deg) } 36% { transform: translate(1.3px, 1.6px)
.rotate(1.5deg) } 38% { transform: translate(1.3px, -1.6px)
.rotate(1.5deg) } 40% { transform: translate(-1.4px, -1px)
.rotate(-0.5deg) } 42% { transform: translate(-1.4px, 1.3px)
.rotate(-0.5deg) } 44% { transform: translate(-1.6px, 1.4px)
.rotate(0.5deg) } 46% { transform: translate(-2.1px, -1.3px)
.rotate(-0.5deg) } 48% { transform: translate(1px, 1.6px)
.rotate(1.5deg) } 50% { transform: translate(1.6px, 1.6px)
.rotate(1.5deg) } 52% { transform: translate(-1.4px, 1.6px)
.rotate(0.5deg) } 54% { transform: translate(1.6px, -1px)
.rotate(-2deg) } 56% { transform: translate(1.3px, -1.6px)
.rotate(-2deg) } 58% { transform: translate(-1.3px, -1.6px)
.rotate(0.5deg) } 60% { transform: translate(1.3px, 1.6px)
.rotate(-0.5deg) } 62% { transform: translate(0px, 0px)
.rotate(-1.5deg) } 64% { transform: translate(-1.6px, -1.6px)
.rotate(-2deg) } 66% { transform: translate(1.6px, -1.6px)
.rotate(0.5deg) } 68% { transform: translate(0px, -1.6px)
.rotate(-2deg) } 70% { transform: translate(-1.6px, 1px)
.rotate(1.5deg) } 72% { transform: translate(-1.6px, 1.6px)
.rotate(2deg) } 74% { transform: translate(1.3px, -1.6px)
.rotate(-0.5deg) } 76% { transform: translate(1.4px, 1px)
.rotate(-0.5deg) } 78% { transform: translate(-1px, 1.4px)
.rotate(2deg) } 80% { transform: translate(1.4px, 1.6px) rotate(2deg)
.} 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% {
.transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { transform:
.translate(1px, 1.4px) rotate(-2deg) } 88% { transform:
.translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { transform:
.translate(-1.6px, -1.6px) rotate(-2deg) } 92% { transform:
.translate(-1.4px, 1.6px) rotate(2deg) } 94% { transform:
.translate(-1.6px, -1.6px) rotate(-2deg) } 96% { transform:
.translate(-1.4px, 1.3px) rotate(-2deg) } 98% { transform:
.translate(1.3px, 1px) rotate(-0.5deg) } }

测试效果:

See the Pen CSS文字抖动特效 by ChaunceyWoo (@chaunceywoo) on CodePen.

Archives QR Code Tip
QR Code for this page
Tipping QR Code