HTML5 CSS3大红灯笼高高挂动画

HTML5 Red lantern, 可用来制作元宵节动画。

html5, lantern

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    padding: 25% 30%;
    background-color: #000;
    background-repeat: no-repeat;
}
div {
    height: 100px;
    width: 100px;
    border: solid 1px #f00;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);
    -moz-box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);
    box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);
    background-color: #f00;
}
div:before {
    height: 20px;
    width: 60px;
    background-color: #000;
    content: " ";
    display: block;
    margin-top: -21px;
    border-radius: 5px;
    margin-left: 20px;
    border: solid 1px #333;
}
div:after {
    display: block;
    border: solid 1px #333;
    height: 20px;
    width: 60px;
    background-color: #000;
    content: " ";
    margin-left: 20px;
    border-radius: 5px;
}
span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #ff0;
    -webkit-box-shadow: inset 0px 0px 50px 34px rgba(250, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 50px 34px rgba(250, 0, 0, 1);
    box-shadow: inset 0px 0px 70px 34px rgba(250, 0, 0, 1);
    text-align: center;
    padding-top: 50%;
    color: orange;
    font-family: "Microsoft Yahei";
}
div {
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation: swing 3s infinite ease-in-out;
    -webkit-transform-origin: 50% -100px;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

HTML

HTML5 Red lantern, 可用来制作元宵节动画。

html5, lantern

编辑器支持Emmet

快捷键

HTML5 Red lantern, 可用来制作元宵节动画。

html5, lantern

HTML5 CSS3闪烁灯光文字动画效果

HTML5 CSS3 GSAP带音效的超级马里奥跑跳动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：