操作错误或成功的状态提示信息

Flash Message (Error/Success) 成功时，呈现魔法棒动画，失败时，呈现翻过来的乌龟摇晃动画。

svg, message, widget

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var a = 0;

function f1a() {
    $('.btn').removeClass('oops');
    $('h3').text('enter');
    $('.turtle').removeClass('t-active');
}

function f2a() {
    $('.btn').removeClass('ookay');
    $('h3').text('enter');
    $('.stick').removeClass('s-active');
}

$('.btn').click(function() {
    if (a == 0) {
        f1();
        a = 1
    } else if (a == 1) {
        f1a();
        a = 2
    } else if (a == 2) {
        f2();
        a = 3
    } else if (a == 3) {
        f2a();
        a = 0
    }
});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
body {
    font-family: 'Roboto', sans-serif;
    background: #303435;
    overflow: hidden;
}
.btn {
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 200px;
    height: 70px;
    background: #1fafff;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.btn:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
h3 {
    position: absolute;
    color: white;
    text-transform: uppercase;
    bottom: 0;
    left: 20px;
}
.oops {
    width: 270px;
    height: 200px;
    background: #ed564f;
}
.ookay {
    width: 270px;
    height: 200px;
    background: #2dc4b2;
}
.turtle {
    position: absolute;
    width: 150px;
    right: -40px;
    top: -40px;
    opacity: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.t-active {
    right: 30px;
    top: 30px;
    opacity: 1;
}
#turt {
    -webkit-transform-origin: 80px 60px;
    transform-origin: 80px 60px;
    -webkit-animation: turt-rotate 0.8s infinite ease-in-out;
    animation: turt-rotate 0.8s infinite ease-in-out;
}
@-webkit-keyframes turt-rotate {
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}
@keyframes turt-rotate {
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}
#head {
    -webkit-transform-origin: 120px 30px;
    transform-origin: 120px 30px;
    -webkit-animation: head-rotate 0.8s infinite ease-in-out;
    animation: head-rotate 0.8s infinite ease-in-out;
}
@-webkit-keyframes head-rotate {
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}
@keyframes head-rotate {
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}
#left {
    -webkit-transform-origin: 60px 20px;
    transform-origin: 60px 20px;
    -webkit-animation: left-rotate 0.5s infinite ease-in-out;
    animation: left-rotate 0.5s infinite ease-in-out;
}
@-webkit-keyframes left-rotate {
    50% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
}
@keyframes left-rotate {
    50% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
}
#right {
    -webkit-transform-origin: 100px 30px;
    transform-origin: 100px 30px;
    -webkit-animation: right-rotate 0.6s infinite ease-in-out;
    animation: right-rotate 0.6s infinite ease-in-out;
}
@-webkit-keyframes right-rotate {
    50% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
}
@keyframes right-rotate {
    50% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
}
.stick {
    position: absolute;
    width: 160px;
    right: -100px;
    top: -40px;
    opacity: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.s-active {
    right: 30px;
    top: 30px;
    opacity: 1;
}
#st {
    -webkit-transform-origin: 90px 80px;
    transform-origin: 90px 80px;
    -webkit-animation: st-rotate 2.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-rotate 2.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
@-webkit-keyframes st-rotate {
    30%, 100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes st-rotate {
    30%, 100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
#stars {
    -webkit-transform-origin: 90px 80px;
    transform-origin: 90px 80px;
    opacity: 0;
    -webkit-animation: stars-rotate 2.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: stars-rotate 2.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
@-webkit-keyframes stars-rotate {
    40%, 90% {
        opacity: 1;
    }
}
@keyframes stars-rotate {
    40%, 90% {
        opacity: 1;
    }
}
#star {
    -webkit-animation: st-anim 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star2 {
    -webkit-animation: st-anim_2 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_2 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star3 {
    -webkit-animation: st-anim_3 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_3 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star4 {
    -webkit-animation: st-anim_4 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_4 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star5 {
    -webkit-animation: st-anim_5 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_5 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star6 {
    -webkit-animation: st-anim_6 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_6 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star7 {
    -webkit-animation: st-anim_7 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_7 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
#star8 {
    -webkit-animation: st-anim_8 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_8 0.5s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
@-webkit-keyframes st-anim {
    50% {
        opacity: 0.2;
    }
}
@keyframes st-anim {
    50% {
        opacity: 0.2;
    }
}
@-webkit-keyframes st-anim_2 {
    20% {
        opacity: 0.1;
    }
}
@keyframes st-anim_2 {
    20% {
        opacity: 0.1;
    }
}
@-webkit-keyframes st-anim_3 {
    70% {
        opacity: 0.3;
    }
}
@keyframes st-anim_3 {
    70% {
        opacity: 0.3;
    }
}
@-webkit-keyframes st-anim_4 {
    40% {
        opacity: 0.3;
    }
}
@keyframes st-anim_4 {
    40% {
        opacity: 0.3;
    }
}
@-webkit-keyframes st-anim_5 {
    70% {
        opacity: 0.1;
    }
}
@keyframes st-anim_5 {
    70% {
        opacity: 0.1;
    }
}
@-webkit-keyframes st-anim_6 {
    50% {
        opacity: 0.1;
    }
}
@keyframes st-anim_6 {
    50% {
        opacity: 0.1;
    }
}
@-webkit-keyframes st-anim_7 {
    40% {
        opacity: 0.5;
    }
}
@keyframes st-anim_7 {
    40% {
        opacity: 0.5;
    }
}
@-webkit-keyframes st-anim_8 {
    70% {
        opacity: 0.1;
    }
}
@keyframes st-anim_8 {
    70% {
        opacity: 0.1;
    }
}
.load {
    display: none;
    position: absolute;
    top: 14px;
    right: 20px;
}
.dot {
    display: inline-block;
    border-radius: 100%;
    margin: 2px;
    width: 6px;
    height: 6px;
    background: white;
    -webkit-animation: dot-anim_1 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: dot-anim_1 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
.dot:nth-child(2) {
    -webkit-animation: st-anim_2 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_2 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
.dot:nth-child(3) {
    -webkit-animation: st-anim_3 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
    animation: st-anim_3 0.8s infinite cubic-bezier(0.84, 0.13, 0.465, 0.98);
}
@-webkit-keyframes dot-anim_1 {
    50% {
        opacity: 0.1;
    }
}
@keyframes dot-anim_1 {
    50% {
        opacity: 0.1;
    }
}
@-webkit-keyframes dot-anim_2 {
    40% {
        opacity: 0.5;
    }
}
@keyframes dot-anim_2 {
    40% {
        opacity: 0.5;
    }
}
@-webkit-keyframes dot-anim_3 {
    70% {
        opacity: 0.1;
    }
}
@keyframes dot-anim_3 {
    70% {
        opacity: 0.1;
    }
}

HTML

Flash Message (Error/Success) 成功时，呈现魔法棒动画，失败时，呈现翻过来的乌龟摇晃动画。

svg, message, widget

编辑器支持Emmet

快捷键

Flash Message (Error/Success) 成功时，呈现魔法棒动画，失败时，呈现翻过来的乌龟摇晃动画。

svg, message, widget

CSS3带摇晃动画的输入错误提示信息

jQuery+iziModal.js邮件发送成功弹出框提示信息条动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：