CSS3文本特效 - 风铃摆动

可用于创意标题动画。

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2352
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Amatic+SC);
html {
    font-size: 16px;
}
@media (min-width: 500px) {
    html {
        font-size: 20px;
    }
}
@media (min-width: 700px) {
    html {
        font-size: 25px;
    }
}
@media (min-width: 900px) {
    html {
        font-size: 30px;
    }
}
@media (min-width: 1100px) {
    html {
        font-size: 35px;
    }
}
@media (min-width: 1300px) {
    html {
        font-size: 40px;
    }
}
body {
    background: #292929;
}
.tag {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.tag:before,
.tag:after {
    content: '';
    height: 3px;
    background: #fff;
    width: 20%;
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
span {
    font-family: Amatic SC;
    font-size: 3rem;
    color: #fff;
    -webkit-animation: rattle 20s infinite linear;
    animation: rattle 20s infinite linear;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    display: inline-block;
}
span:nth-child(1) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
span:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
span:nth-child(3) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
span:nth-child(4) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
span:nth-child(5) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
span:nth-child(6) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
span:nth-child(7) {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
span:nth-child(8) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
span:nth-child(9) {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}
span:nth-child(10) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
span:nth-child(11) {
    -webkit-animation-delay: 5.5s;
    animation-delay: 5.5s;
}
span:nth-child(12) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
span:nth-child(13) {
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s;
}
span:nth-child(14) {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}
span:nth-child(15) {
    -webkit-animation-delay: 7.5s;
    animation-delay: 7.5s;
}
span:nth-child(16) {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
.d {
    -webkit-animation: none;
    animation: none;
    font-size: 20% !important;
}
@-webkit-keyframes rattle {
    0% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    1% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    2% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    3% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    4% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    5% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    6% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    7% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    8% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    9% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    10% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    11% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    12% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    13% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    14% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    15% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    16% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    17% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    18% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    19% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    20% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    21% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    22% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    23% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    24% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    25% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    26% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    27% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    28% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    29% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    30% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    31% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    32% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    33% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    34% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    35% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    36% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    37% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    38% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    39% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    40% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    41% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    42% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    43% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    44% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    45% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    46% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    47% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    48% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    49% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    50% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    51% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    52% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    53% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    54% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    55% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    56% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    57% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    58% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    59% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    61% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    62% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    63% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    64% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    65% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    66% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    67% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    68% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    69% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    70% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    71% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    72% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    73% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    74% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    75% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    76% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    77% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    78% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    79% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    80% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    81% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    82% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    83% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    84% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    85% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    86% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    87% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    88% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    89% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    90% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    91% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    92% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    93% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    94% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    95% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    96% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    97% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    98% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    99% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}
@keyframes rattle {
    0% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    1% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    2% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    3% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    4% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    5% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    6% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    7% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    8% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    9% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    10% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    11% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    12% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    13% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    14% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    15% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    16% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    17% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    18% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    19% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    20% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    21% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    22% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    23% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    24% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    25% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    26% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    27% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    28% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    29% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    30% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    31% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    32% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    33% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    34% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    35% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    36% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    37% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    38% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    39% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    40% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    41% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    42% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    43% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    44% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    45% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    46% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    47% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    48% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    49% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    50% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    51% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    52% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    53% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    54% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    55% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    56% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    57% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    58% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    59% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    61% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    62% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    63% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    64% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    65% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    66% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    67% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }
    68% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    69% {
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    70% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    71% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    72% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    73% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    74% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    75% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    76% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    77% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    78% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    79% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    80% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    81% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    82% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    83% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    84% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    85% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    86% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    87% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    88% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    89% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    90% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    91% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    92% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    93% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    94% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    95% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    96% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    97% {
        -webkit-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    98% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    99% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

HTML

可用于创意标题动画。

CSS3

编辑器支持Emmet

快捷键

可用于创意标题动画。

CSS3

使用CSS3 clip-path实现的标题文本水纹波动动画特效

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字