CSS3童话故事里的蝴蝶仙女动画

Fairy CSS Animation, 很漂亮的渐变色效果。

css3, fairy

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #1E6128;
}
.fairy {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    position: absolute;
    -webkit-perspective: 250px;
    perspective: 250px;
    -webkit-animation: flying 12s linear infinite;
    animation: flying 12s linear infinite;
}
.glow {
    width: 56px;
    height: 56px;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -28px;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 100px;
    background: -webkit-radial-gradient(center ellipse, #ffffff 0%, #fff0f0 35%, #ffcccc 50%, #f2949a 65%, #df7e84 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%, #fff0f0 35%, #ffcccc 50%, #f2949a 65%, #df7e84 100%);
}
.glow:after {
    content: "";
    width: 54px;
    height: 54px;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    position: absolute;
    border-radius: 100px;
    -webkit-animation: pulse 1.5s ease-in-out infinite alternate;
    animation: pulse 1.5s ease-in-out infinite alternate;
}
.sparkle {
    height: 3px;
    width: 3px;
    background: #FFAFB1;
    position: absolute;
    border-radius: 100px;
    opacity: 0;
    z-index: 100;
}
.sparkle:nth-child(1) {
    top: -20px;
    left: 15px;
}
.sparkle:nth-child(2) {
    top: 3px;
    left: 60px;
}
.sparkle:nth-child(3) {
    top: 60px;
    left: 50px;
}
.sparkle:nth-child(4) {
    top: 68px;
    left: 16px;
}
.sparkle:nth-child(5) {
    top: 50px;
    left: 0px;
}
.sparkle:nth-child(1) {
    -webkit-animation: sparkling 0.8s ease-in-out 0.2s infinite;
    animation: sparkling 0.8s ease-in-out 0.2s infinite;
}
.sparkle:nth-child(2) {
    -webkit-animation: sparkling 0.8s ease-in-out 0.4s infinite;
    animation: sparkling 0.8s ease-in-out 0.4s infinite;
}
.sparkle:nth-child(3) {
    -webkit-animation: sparkling 0.8s ease-in-out 0.6s infinite;
    animation: sparkling 0.8s ease-in-out 0.6s infinite;
}
.sparkle:nth-child(4) {
    -webkit-animation: sparkling 0.8s ease-in-out 0.8s infinite;
    animation: sparkling 0.8s ease-in-out 0.8s infinite;
}
.sparkle:nth-child(5) {
    -webkit-animation: sparkling 0.8s ease-in-out 1s infinite;
    animation: sparkling 0.8s ease-in-out 1s infinite;
}
.wings {
    position: relative;
    top: 50%;
    left: 50%;
    width: 144px;
    height: 114px;
    margin: -87px 0 0 -72px;
}
.wings:before,
.wings:after {
    content: "";
    width: 64px;
    height: 114px;
    top: 50%;
    left: 50%;
    margin: -57px 0 0 -72px;
    position: absolute;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-animation: flapping-left 0.2s ease-in-out infinite;
    animation: flapping-left 0.2s ease-in-out infinite;
    background: url("/uploads/1704/wing-left.svg") no-repeat;
}
.wings:after {
    left: auto;
    right: 50%;
    margin: -57px -72px 0 0;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-animation: flapping-right 0.2s ease-in-out infinite;
    animation: flapping-right 0.2s ease-in-out infinite;
    background: url("/uploads/1704/wing-right.svg") no-repeat;
}
@-webkit-keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 20px 5px rgba(239, 145, 145, 0.9), 0 0 30px 20px rgba(195, 66, 102, 0.8);
    }
    50% {
        box-shadow: 0 0 30px 7px rgba(239, 145, 145, 0.9), 0 0 35px 22px rgba(195, 66, 102, 0.8);
    }
}
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 20px 5px rgba(239, 145, 145, 0.9), 0 0 30px 20px rgba(195, 66, 102, 0.8);
    }
    50% {
        box-shadow: 0 0 30px 7px rgba(239, 145, 145, 0.9), 0 0 35px 22px rgba(195, 66, 102, 0.8);
    }
}
@-webkit-keyframes sparkling {
    0%, 100% {
        -webkit-transform: scale3d(0, 0, 1);
        transform: scale3d(0, 0, 1);
        opacity: 0;
    }
    25%,
    75% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 0;
    }
}
@keyframes sparkling {
    0%, 100% {
        -webkit-transform: scale3d(0, 0, 1);
        transform: scale3d(0, 0, 1);
        opacity: 0;
    }
    25%,
    75% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 0;
    }
}
@-webkit-keyframes flapping-left {
    0%, 100% {
        -webkit-transform: rotateX(-15deg) rotateY(-45deg);
        transform: rotateX(-15deg) rotateY(-45deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(-20deg);
        transform: rotateX(-10deg) rotateY(-20deg);
    }
}
@keyframes flapping-left {
    0%, 100% {
        -webkit-transform: rotateX(-15deg) rotateY(-45deg);
        transform: rotateX(-15deg) rotateY(-45deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(-20deg);
        transform: rotateX(-10deg) rotateY(-20deg);
    }
}
@-webkit-keyframes flapping-right {
    0%, 100% {
        -webkit-transform: rotateX(-15deg) rotateY(45deg);
        transform: rotateX(-15deg) rotateY(45deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(20deg);
        transform: rotateX(-10deg) rotateY(20deg);
    }
}
@keyframes flapping-right {
    0%, 100% {
        -webkit-transform: rotateX(-15deg) rotateY(45deg);
        transform: rotateX(-15deg) rotateY(45deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(20deg);
        transform: rotateX(-10deg) rotateY(20deg);
    }
}
@-webkit-keyframes flying {
    0% {
        -webkit-transform: rotate(50deg) translateX(0px) rotate(-50deg) scale(0.85);
        transform: rotate(50deg) translateX(0px) rotate(-50deg) scale(0.85);
    }
    50% {
        -webkit-transform: rotate(180deg) translateX(80px) rotate(-180deg) scale(1);
        transform: rotate(180deg) translateX(80px) rotate(-180deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(0px) rotate(-360deg) scale(0.85);
        transform: rotate(360deg) translateX(0px) rotate(-360deg) scale(0.85);
    }
}
@keyframes flying {
    0% {
        -webkit-transform: rotate(50deg) translateX(0px) rotate(-50deg) scale(0.85);
        transform: rotate(50deg) translateX(0px) rotate(-50deg) scale(0.85);
    }
    50% {
        -webkit-transform: rotate(180deg) translateX(80px) rotate(-180deg) scale(1);
        transform: rotate(180deg) translateX(80px) rotate(-180deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(0px) rotate(-360deg) scale(0.85);
        transform: rotate(360deg) translateX(0px) rotate(-360deg) scale(0.85);
    }
}

HTML

Fairy CSS Animation, 很漂亮的渐变色效果。

css3, fairy

编辑器支持Emmet

快捷键

Fairy CSS Animation, 很漂亮的渐变色效果。

css3, fairy

CSS3空中旋转的3D童话书展览动画特效

纯CSS实现的3D蝴蝶展翅飞行动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：