CSS3 孤独的仙人掌、浮云和日夜更替

CSS3 Cactus and cloud

css3, plant

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #B5A99C;
    margin: 0;
}
.content-wrapper {
    height: 100vh;
    width: 100vh;
}
.window {
    border: 12px solid #ccc;
    bottom: 0;
    height: 400px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 500px;
    animation: sunriset 15s linear infinite;
    -webkit-animation: sunriset 15s linear infinite;
    -moz-animation: sunriset 15s linear infinite;
    -ms-animation: sunriset 15s linear infinite;
    -o-animation: sunriset 15s linear infinite;
}
.window:after {
    background-color: #ccc;
    bottom: -12px;
    box-shadow: inset 0px 10px 15px #c3c3c3;
    content: '';
    height: 15px;
    left: -25px;
    position: absolute;
    width: 550px;
}
.cactus-wrapper {
    bottom: 118px;
    left: 300px;
    position: absolute;
}
.vase {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 40px solid #AD693D;
    height: 40px;
    left: 65px;
    position: absolute;
    top: 75px;
    width: 50px;
}
.vase:after {
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-top: 10px solid #9c582c;
    content: '';
    height: 10px;
    left: -5px;
    position: absolute;
    top: -40px;
    width: 56px;
}
.vase:before {
    background-color: #3a2b20;
    border-radius: 100%;
    content: '';
    height: 5px;
    left: -5px;
    position: absolute;
    top: -43px;
    width: 60px;
}
.cactus {
    background-color: #61783A;
    border-radius: 100% 70% 0 0;
    box-shadow: inset -5px 1px 15px #4d6426;
    height: 60px;
    left: 83px;
    position: absolute;
    top: 15px;
    width: 25px;
}
.cactus:after {
    background-color: #52692b;
    border-radius: 50% 100% 10% 10%;
    content: '';
    height: 20px;
    left: 31px;
    position: absolute;
    top: 12px;
    width: 9px;
    animation: sayHey 2s linear infinite;
    -webkit-animation: sayHey 2s linear infinite;
    -moz-animation: sayHey 2s linear infinite;
    -ms-animation: sayHey 2s linear infinite;
    -o-animation: sayHey 2s linear infinite;
}
.cactus:before {
    background-color: #52692b;
    border-radius: 0 0 100% 0;
    content: '';
    height: 10px;
    left: 23px;
    position: absolute;
    top: 30px;
    width: 17px;
    animation: sayHeyBefore 2s linear infinite;
    -webkit-animation: sayHeyBefore 2s linear infinite;
    -moz-animation: sayHeyBefore 2s linear infinite;
    -ms-animation: sayHeyBefore 2s linear infinite;
    -o-animation: sayHeyBefore 2s linear infinite;
}
.eye {
    background-color: #222;
    border-radius: 100%;
    height: 5px;
    position: absolute;
    top: 19px;
    width: 5px;
}
.eye.left {
    left: 6px;
}
.eye.right {
    right: 6px;
}
.eye:after {
    background-color: #f9f9f9;
    border-radius: 100%;
    content: '';
    height: 1.25px;
    left: 2px;
    position: absolute;
    top: 1px;
    width: 2px;
}
.mouth {
    border-bottom: 4px solid #853434;
    border-radius: 100%;
    height: 5px;
    left: 8px;
    position: absolute;
    top: 23px;
    width: 9px;
}
.stars {
    background-color: #eee;
    border-radius: 5px;
    position: absolute;
    animation: showStar 15s infinite;
    -webkit-animation: showStar 15s infinite;
    -moz-animation: showStar 15s infinite;
    -ms-animation: showStar 15s infinite;
    -o-animation: showStar 15s infinite;
}
.s1 {
    height: 2px;
    left: 1%;
    top: 86%;
    width: 1px;
}
.s2 {
    height: 2px;
    left: 21%;
    top: 62%;
    width: 1px;
}
.s3 {
    height: 2px;
    left: 89%;
    top: 66%;
    width: 1px;
}
.s4 {
    height: 1px;
    left: 32%;
    top: 63%;
    width: 1px;
}
.s5 {
    height: 2px;
    left: 99%;
    top: 70%;
    width: 1px;
}
.s6 {
    height: 1px;
    left: 94%;
    top: 80%;
    width: 1px;
}
.s7 {
    height: 2px;
    left: 84%;
    top: 11%;
    width: 1px;
}
.s8 {
    height: 2px;
    left: 36%;
    top: 43%;
    width: 1px;
}
.s9 {
    height: 1px;
    left: 29%;
    top: 26%;
    width: 1px;
}
.s10 {
    height: 2px;
    left: 4%;
    top: 83%;
    width: 1px;
}
.s11 {
    height: 1px;
    left: 60%;
    top: 76%;
    width: 1px;
}
.s12 {
    height: 2px;
    left: 18%;
    top: 90%;
    width: 1px;
}
.s13 {
    height: 1px;
    left: 25%;
    top: 21%;
    width: 1px;
}
.s14 {
    height: 1px;
    left: 30%;
    top: 10%;
    width: 1px;
}
.s15 {
    height: 1px;
    left: 7%;
    top: 56%;
    width: 1px;
}
.s16 {
    height: 2px;
    left: 37%;
    top: 10%;
    width: 1px;
}
.s17 {
    height: 1px;
    left: 35%;
    top: 64%;
    width: 1px;
}
.s18 {
    height: 1px;
    left: 46%;
    top: 94%;
    width: 1px;
}
.s19 {
    height: 1px;
    left: 77%;
    top: 79%;
    width: 1px;
}
.s20 {
    height: 1px;
    left: 96%;
    top: 94%;
    width: 1px;
}
.s21 {
    height: 1px;
    left: 25%;
    top: 98%;
    width: 1px;
}
.s22 {
    height: 2px;
    left: 89%;
    top: 17%;
    width: 1px;
}
.s23 {
    height: 2px;
    left: 43%;
    top: 11%;
    width: 1px;
}
.s24 {
    height: 1px;
    left: 61%;
    top: 32%;
    width: 1px;
}
.s25 {
    height: 2px;
    left: 29%;
    top: 64%;
    width: 1px;
}
.s26 {
    height: 1px;
    left: 49%;
    top: 36%;
    width: 1px;
}
.s27 {
    height: 2px;
    left: 47%;
    top: 43%;
    width: 1px;
}
.s28 {
    height: 1px;
    left: 40%;
    top: 95%;
    width: 1px;
}
.s29 {
    height: 1px;
    left: 36%;
    top: 8%;
    width: 1px;
}
.s30 {
    height: 2px;
    left: 4%;
    top: 49%;
    width: 1px;
}
.s31 {
    height: 1px;
    left: 38%;
    top: 45%;
    width: 1px;
}
.s32 {
    height: 1px;
    left: 99%;
    top: 47%;
    width: 1px;
}
.s33 {
    height: 1px;
    left: 89%;
    top: 85%;
    width: 1px;
}
.s34 {
    height: 2px;
    left: 93%;
    top: 31%;
    width: 1px;
}
.s35 {
    height: 2px;
    left: 48%;
    top: 16%;
    width: 1px;
}
.s36 {
    height: 2px;
    left: 27%;
    top: 53%;
    width: 1px;
}
.s37 {
    height: 2px;
    left: 59%;
    top: 65%;
    width: 1px;
}
.s38 {
    height: 2px;
    left: 31%;
    top: 94%;
    width: 1px;
}
.s39 {
    height: 1px;
    left: 37%;
    top: 62%;
    width: 1px;
}
.s40 {
    height: 2px;
    left: 9%;
    top: 53%;
    width: 1px;
}
.s41 {
    height: 2px;
    left: 97%;
    top: 91%;
    width: 1px;
}
.s42 {
    height: 1px;
    left: 47%;
    top: 72%;
    width: 1px;
}
.s43 {
    height: 2px;
    left: 14%;
    top: 41%;
    width: 1px;
}
.s44 {
    height: 2px;
    left: 40%;
    top: 80%;
    width: 1px;
}
.s45 {
    height: 1px;
    left: 26%;
    top: 33%;
    width: 1px;
}
.s46 {
    height: 2px;
    left: 30%;
    top: 9%;
    width: 1px;
}
.s47 {
    height: 1px;
    left: 46%;
    top: 94%;
    width: 1px;
}
.s48 {
    height: 1px;
    left: 70%;
    top: 50%;
    width: 1px;
}
.s49 {
    height: 1px;
    left: 86%;
    top: 74%;
    width: 1px;
}
.s50 {
    height: 2px;
    left: 90%;
    top: 84%;
    width: 1px;
}
@keyframes showStar {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes showStar {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes showStar {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes showStar {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.cloud-wrapper {
    position: absolute;
    top: 35px;
}
.cloud {
    background-color: #eee;
    border-radius: 100px;
    height: 28px;
    opacity: 0.75;
    position: absolute;
    width: 83.3px;
}
.cloud.typeb:after {
    height: 23.3px;
    right: 10px;
    top: -13.3px;
    width: 23.3px;
}
.cloud.typeb:before {
    height: 40px;
    right: 12.7px;
    top: -20px;
    width: 40px;
}
.cloud:after {
    background-color: #eee;
    border-radius: 100px;
    content: '';
    display: block;
    height: 36.7px;
    position: absolute;
    right: 10px;
    top: -22.7px;
    width: 36.7px;
    animation: darkenClouds 15s infinite;
    -webkit-animation: darkenClouds 15s infinite;
    -moz-animation: darkenClouds 15s infinite;
    -ms-animation: darkenClouds 15s infinite;
    -o-animation: darkenClouds 15s infinite;
}
.cloud:before {
    background-color: #eee;
    border-radius: 100px;
    content: '';
    display: block;
    height: 28.7px;
    position: absolute;
    left: 12.7px;
    top: -14px;
    width: 28.7px;
    animation: darkenClouds 15s infinite;
    -webkit-animation: darkenClouds 15s infinite;
    -moz-animation: darkenClouds 15s infinite;
    -ms-animation: darkenClouds 15s infinite;
    -o-animation: darkenClouds 15s infinite;
}
.cloud.c1 {
    top: 3px;
    animation: walkTheCloud 32s -100s linear infinite, darkenClouds 15s infinite;
    -webkit-animation: walkTheCloud 32s -100s linear infinite, darkenClouds 15s infinite;
    -moz-animation: walkTheCloud 32s -100s linear infinite, darkenClouds 15s infinite;
    -ms-animation: walkTheCloud 32s -100s linear infinite, darkenClouds 15s infinite;
    -o-animation: walkTheCloud 32s -100s linear infinite, darkenClouds 15s infinite;
}
.cloud.c2 {
    top: 2px;
    animation: walkTheCloud 34s -115s linear infinite, darkenClouds 15s infinite;
    -webkit-animation: walkTheCloud 34s -115s linear infinite, darkenClouds 15s infinite;
    -moz-animation: walkTheCloud 34s -115s linear infinite, darkenClouds 15s infinite;
    -ms-animation: walkTheCloud 34s -115s linear infinite, darkenClouds 15s infinite;
    -o-animation: walkTheCloud 34s -115s linear infinite, darkenClouds 15s infinite;
}
.cloud.c3 {
    top: 4px;
    animation: walkTheCloud 37s -86s linear infinite, darkenClouds 15s infinite;
    -webkit-animation: walkTheCloud 37s -86s linear infinite, darkenClouds 15s infinite;
    -moz-animation: walkTheCloud 37s -86s linear infinite, darkenClouds 15s infinite;
    -ms-animation: walkTheCloud 37s -86s linear infinite, darkenClouds 15s infinite;
    -o-animation: walkTheCloud 37s -86s linear infinite, darkenClouds 15s infinite;
}
.cloud.c4 {
    top: 5px;
    animation: walkTheCloud 53s -66s linear infinite, darkenClouds 15s infinite;
    -webkit-animation: walkTheCloud 53s -66s linear infinite, darkenClouds 15s infinite;
    -moz-animation: walkTheCloud 53s -66s linear infinite, darkenClouds 15s infinite;
    -ms-animation: walkTheCloud 53s -66s linear infinite, darkenClouds 15s infinite;
    -o-animation: walkTheCloud 53s -66s linear infinite, darkenClouds 15s infinite;
}
.cloud.c5 {
    top: 5px;
    animation: walkTheCloud 45s -23s linear infinite, darkenClouds 15s infinite;
    -webkit-animation: walkTheCloud 45s -23s linear infinite, darkenClouds 15s infinite;
    -moz-animation: walkTheCloud 45s -23s linear infinite, darkenClouds 15s infinite;
    -ms-animation: walkTheCloud 45s -23s linear infinite, darkenClouds 15s infinite;
    -o-animation: walkTheCloud 45s -23s linear infinite, darkenClouds 15s infinite;
}
@keyframes darkenClouds {
    0% {
        background-color: #eee;
    }
    30% {
        background-color: #eee;
    }
    50% {
        background-color: #888;
    }
    80% {
        background-color: #888;
    }
    100% {
        background-color: #eee;
    }
}
@-webkit-keyframes darkenClouds {
    0% {
        background-color: #eee;
    }
    30% {
        background-color: #eee;
    }
    50% {
        background-color: #888;
    }
    80% {
        background-color: #888;
    }
    100% {
        background-color: #eee;
    }
}
@-moz-keyframes darkenClouds {
    0% {
        background-color: #eee;
    }
    30% {
        background-color: #eee;
    }
    50% {
        background-color: #888;
    }
    80% {
        background-color: #888;
    }
    100% {
        background-color: #eee;
    }
}
@-ms-keyframes darkenClouds {
    0% {
        background-color: #eee;
    }
    30% {
        background-color: #eee;
    }
    50% {
        background-color: #888;
    }
    80% {
        background-color: #888;
    }
    100% {
        background-color: #eee;
    }
}
@keyframes walkTheCloud {
    from {
        left: 0;
    }
    to {
        left: 420px;
    }
}
@-webkit-keyframes walkTheCloud {
    from {
        left: 0;
    }
    to {
        left: 420px;
    }
}
@-moz-keyframes walkTheCloud {
    from {
        left: 0;
    }
    to {
        left: 420px;
    }
}
@-ms-keyframes walkTheCloud {
    from {
        left: 0;
    }
    to {
        left: 420px;
    }
}
/* cactus animation */

@keyframes sayHey {
    0% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
    25% {
        transform: skew(-10deg);
        -webkit-transform: skew(-10deg);
        -moz-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
    }
    75% {
        transform: skew(10deg);
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
    }
    100% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
}
@-webkit-keyframes sayHey {
    0% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
    25% {
        transform: skew(-10deg);
        -webkit-transform: skew(-10deg);
        -moz-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
    }
    75% {
        transform: skew(10deg);
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
    }
    100% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
}
@-moz-keyframes sayHey {
    0% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
    25% {
        transform: skew(-10deg);
        -webkit-transform: skew(-10deg);
        -moz-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
    }
    75% {
        transform: skew(10deg);
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
    }
    100% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
}
@-ms-keyframes sayHey {
    0% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
    25% {
        transform: skew(-10deg);
        -webkit-transform: skew(-10deg);
        -moz-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
    }
    75% {
        transform: skew(10deg);
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
    }
    100% {
        transform: skew(0deg);
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -ms-transform: skew(0deg);
    }
}
@keyframes sayHeyBefore {
    0% {
        left: 23px;
    }
    25% {
        left: 21.5px;
    }
    75% {
        left: 24.7px;
    }
    100% {
        left: 23px;
    }
}
@-webkit-keyframes sayHeyBefore {
    0% {
        left: 23px;
    }
    25% {
        left: 21.5px;
    }
    75% {
        left: 24.7px;
    }
    100% {
        left: 23px;
    }
}
@-moz-keyframes sayHeyBefore {
    0% {
        left: 23px;
    }
    25% {
        left: 21.5px;
    }
    75% {
        left: 24.7px;
    }
    100% {
        left: 23px;
    }
}
@-ms-keyframes sayHeyBefore {
    0% {
        left: 23px;
    }
    25% {
        left: 21.5px;
    }
    75% {
        left: 24.7px;
    }
    100% {
        left: 23px;
    }
}
/* day/night animations */

@keyframes sunriset {
    0% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    15% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    50% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    65% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    100% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
}
@-webkit-keyframes sunriset {
    0% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    15% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    50% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    65% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    100% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
}
@-moz-keyframes sunriset {
    0% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    15% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    50% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    65% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    100% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
}
@-ms-keyframes sunriset {
    0% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    15% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
    50% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    65% {
        background: linear-gradient(#343545, #40447A);
        background: -webkit-linear-gradient(#343545, #40447A);
        background: -moz-linear-gradient(#343545, #40447A);
        background: -ms-linear-gradient(#343545, #40447A);
    }
    100% {
        background: linear-gradient(#3E668A, #7292AD);
        background: -webkit-linear-gradient(#3E668A, #7292AD);
        background: -moz-linear-gradient(#3E668A, #7292AD);
        background: -ms-linear-gradient(#3E668A, #7292AD);
    }
}

HTML

CSS3 Cactus and cloud

css3, plant

编辑器支持Emmet

快捷键

CSS3 Cactus and cloud

css3, plant

CSS3 最终幻想里面的仙人掌

CSS3 3D旋转卡片和空中漂浮的文字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：