进入梦境动画（以云朵呈现头脑中的想法）

卡通动画中常见的人物旁白（或进入思考状或进入梦境）效果。

css3, dream

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive);
body {
    background: #F0F0F0;
}
/** text **/

.cloud h2 {
    font-family: 'Cedarville Cursive', cursive;
    color: #D7B1D0;
    z-index: 10;
    position: absolute;
    margin-left: 35px;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/** cloud **/

.cloud {
    width: 320px;
    height: 80px;
    margin-left: 120px;
    margin-top: 80px;
    background: white;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 100px;
    position: relative;
    -webkit-animation: fadein 2s;
    animation: fadein 2s;
}
.cloud:after,
.cloud:before {
    content: '';
    position: absolute;
    background: white;
    z-index: -1
}
.cloud:after {
    width: 100px;
    height: 100px;
    top: -25px;
    left: 50px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}
.cloud:before {
    width: 180px;
    height: 155px;
    top: -65px;
    right: 50px;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
}
/** icon base **/

.plate {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 75px;
    height: 75px;
    border-radius: 40px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
    background: #D7B1D0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.plate-edge {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    border-radius: 40px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .1);
    background: #F5F5F5;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/** waffle **/

.waffle {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0px;
    -webkit-transform: translate(-50%, -50%);
    background: radial-gradient(circle, #CC8533, #DCA459, #F2DB94);
    border: 1px solid rgba(220, 164, 89, 0.2);
    width: 35px;
    height: 35px;
    z-index: 3;
}
.butter {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 42%;
    -webkit-transform: translate(-50%, -50%);
    background-color: yellow;
    width: 7px;
    height: 6px;
    z-index: 3;
}
/* grid */

.waffle-grid {
    position: absolute;
    left: 45%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
.waffle-grid2 {
    position: absolute;
    left: 27%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
.waffle-grid3 {
    position: absolute;
    left: 35%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
.waffle-grid4 {
    position: absolute;
    left: 55%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
.waffle-grid5 {
    position: absolute;
    left: 65%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
.waffle-grid6 {
    position: absolute;
    left: 74%;
    right: 50%;
    bottom: 1px;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 1px;
    height: 35px;
    z-index: 10;
}
/** verticals **/

.waffle-vert {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 24%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}
.waffle-vert2 {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 34%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}
.waffle-vert3 {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 44%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}
.waffle-vert4 {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 54%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}
.waffle-vert5 {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 64%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}
.waffle-vert6 {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 71%;
    -webkit-transform: translate(-50%, -50%);
    background-color: #CC8533;
    width: 35px;
    height: 1px;
    z-index: 10;
}

HTML

卡通动画中常见的人物旁白（或进入思考状或进入梦境）效果。

css3, dream

编辑器支持Emmet

快捷键

卡通动画中常见的人物旁白（或进入思考状或进入梦境）效果。

css3, dream

纯CSS3实现的画布外菜单（入场时带边角变形动画）

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：