CSS3 夜晚的沙漠和金字塔标志

CSS3 Night desert and pyramids Logo

css3, logo

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* ---------------------------------------------------------------- /
*                             Variables
* ---------------------------------------------------------------- */
/*------------------------------------*\
    == Colors
\*------------------------------------*/
/*------------------------------------*\
    == Config
\*------------------------------------*/
/**
* base/_soft-reset
*/
/**
* base/_typography
*/
/**
* base/_links
*/
/**
* module/_focus
*/
/**
* module/_form
*/
/**
* module/_button
*/
/**
* module/_info-box
*/
/**
* module/_input-file
*/
/**
* module/_top-header
*/
/**
* layout/_
*/
/* --------------------------------------------------------------- */
/* == Soft reset                                                   */
/* --------------------------------------------------------------- */

html {
    height: 100%;
    box-sizing: border-box;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    position: relative;
    height: 100%;
    margin: 0;
    font-family: Lato, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: rem(16);
    font-weight: 400;
    line-height: 1.625em;
    color: #2b2b2b;
    background-color: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],
template {
    display: none;
}
svg:not(:root) {
    overflow: hidden;
}
img {
    height: auto;
    vertical-align: middle;
    border: 0;
}
blockquote,
figure {
    margin-left: 0;
    margin-right: 0;
}
button {
    cursor: pointer;
    /*------------------------------------*\
            Fixs for Firefox
\*------------------------------------*/
    /**
* Put an element min-height to 100vh on Firefox
* ---------------------------------------------
* Exemple of use :
* @include firefox-message("#home header");
*/
    /**
* Put an element to a specified min-height on firefox
* ---------------------------------------------------
* Exemple of use :
* @include firefox-min-height("#home header", "100vh");
*/
    /* --------------------------------------------------------------- */
    /* == Module grid                                                  */
    /* --------------------------------------------------------------- */
    /*------------------------------------*\
    == Wrapper
\*------------------------------------*/
}
.wrapper {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1600px) {
    .wrapper {
        max-width: 1200px;
    }
}
@media (max-width: 540px) {
    /*------------------------------------*\
    == Display class
\*------------------------------------*/
    
    .wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.table,
.table-fixed {
    display: table;
    width: 100%;
}
.table-fixed {
    table-layout: fixed;
}
.table-auto,
.table-auto-fixed {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.table-auto-fixed {
    table-layout: fixed;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}
.cell.top {
    vertical-align: top;
}
.inbl {
    display: inline-block;
}
.bl {
    display: block;
}
@media (max-width: 540px) {
    .table,
    .table-fixed,
    .table-auto,
    .table-auto-fixed,
    .cell {
        display: block;
        text-align: center;
    }
}
.text-right {
    text-align: right;
    /*------------------------------------*\
        Top header layout module
\*------------------------------------*/
    /**
* Create a top header element to extend
* -------------------------------------
* Exemple of use :
* @include top-header($img);
*/
    /**
* Create p for top header element to extend
* -----------------------------------------
* Exemple of use :
* @include top-header-p;
*/
    /**
* Create a full header element to extend
* --------------------------------------
* Exemple of use :
* @include full-header($img);
*/
    /**
* Create a full header color element to extend
* --------------------------------------------
* Exemple of use :
* @include full-header-color($color);
*/
    /**
* Variables
* ---------
*/
    /**
* Stage
* -----
*/
}
.stage {
    display: table;
    background-color: #333;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    text-align: center;
    margin: auto;
    vertical-align: middle;
}
@media (max-width: 540px) {
    .stage {
        display: table;
    }
    .stage .cell {
        display: table-cell;
    }
}
_:-moz-tree-row(hover),
.stage {
    height: 100vh;
    /**
* Content of the demo :D
* ----------------------
*/
}
.land {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    margin: auto;
    background-color: #0071e2;
    box-shadow: 0px 3px 5px 3px #222 inset;
    overflow: hidden;
}
.ground {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 130px;
    background-color: #d8a811;
}
.mountain {
    position: absolute;
    width: 0;
    height: 0;
    top: 80px;
    left: 75px;
    border-left: 30px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 100px solid #555;
}
.mountain:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0px;
    left: -70px;
    border-left: 60px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 100px solid #444;
    transform: skewX(-11deg);
}
.mountain + .mountain {
    top: 100px;
    left: 130px;
}
.mountain + .mountain + .mountain {
    top: 100px;
    left: 10px;
    border-left: 40px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 100px solid #777;
}
.mountain + .mountain + .mountain:before {
    border-bottom: 100px solid #666;
}
.sun {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 80px;
    border-radius: 20px;
    animation: sunAnimation 1.9s ease-in-out infinite alternate;
}
.stars {
    position: absolute;
    width: 2px;
    height: 2px;
    top: 60px;
    left: 60px;
    border-radius: 5px;
    animation: sparkle 1.5s ease-in-out infinite alternate;
}
.stars:before {
    position: absolute;
    content: "";
    width: 2px;
    height: 2px;
    top: -30px;
    left: -5px;
    border-radius: 5px;
    animation: sparkle 1.3s ease-in-out infinite alternate;
}
.stars:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 2px;
    top: 20px;
    left: -40px;
    border-radius: 5px;
    animation: sparkle 1.7s ease-in-out infinite alternate;
}
.stars + .stars {
    top: 35px;
    left: 140px;
    animation: sparkle 1.1s ease-in-out infinite alternate;
}
.stars + .stars:before {
    top: 30px;
    left: -15px;
    animation: sparkle 1.9s ease-in-out infinite alternate;
}
.stars + .stars:after {
    top: 45px;
    left: 25px;
    animation: sparkle 1.4s ease-in-out infinite alternate;
    /**
* Create gradient-background element to extend
* --------------------------------------------
* Exemple of use :
* @include gradient-background($color-1, $color-2);
*/
    /**
* Keyframes
*/
}
@-webkit-keyframes sparkle {
    from {
        background-color: #fff;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        background-color: #ffce00;
        -ms-transform: scale(1.03);
        -moz-transform: scale(1.03);
        -webkit-transform: scale(1.03);
        -o-transform: scale(1.03);
        transform: scale(1.03);
    }
}
@keyframes sparkle {
    from {
        background-color: #fff;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        background-color: #ffce00;
        -ms-transform: scale(1.03);
        -moz-transform: scale(1.03);
        -webkit-transform: scale(1.03);
        -o-transform: scale(1.03);
        transform: scale(1.03);
    }
}
@-webkit-keyframes sunAnimation {
    from {
        /* FF3.6+ */
        
        background-color: #ea5600;
        /* Chrome,Safari4+ */
        
        background: -moz-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* Chrome10+,Safari5.1+ */
        
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ea5600), color-stop(100%, #e50000));
        /* Opera 11.10+ */
        
        background: -webkit-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* IE10+ */
        
        background: -o-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* W3C */
        
        background: -ms-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        background: linear-gradient(135deg, #ea5600 0%, #e50000 100%);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        /* FF3.6+ */
        
        background-color: #f55d05;
        /* Chrome,Safari4+ */
        
        background: -moz-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* Chrome10+,Safari5.1+ */
        
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f55d05), color-stop(100%, #e00000));
        /* Opera 11.10+ */
        
        background: -webkit-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* IE10+ */
        
        background: -o-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* W3C */
        
        background: -ms-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        background: linear-gradient(135deg, #f55d05 0%, #e00000 100%);
        -ms-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}
@keyframes sunAnimation {
    /**
* Credit
* ------
*/
    
    from {
        /* FF3.6+ */
        
        background-color: #ea5600;
        /* Chrome,Safari4+ */
        
        background: -moz-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* Chrome10+,Safari5.1+ */
        
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ea5600), color-stop(100%, #e50000));
        /* Opera 11.10+ */
        
        background: -webkit-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* IE10+ */
        
        background: -o-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        /* W3C */
        
        background: -ms-linear-gradient(-45deg, #ea5600 0%, #e50000 100%);
        background: linear-gradient(135deg, #ea5600 0%, #e50000 100%);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        /* FF3.6+ */
        
        background-color: #f55d05;
        /* Chrome,Safari4+ */
        
        background: -moz-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* Chrome10+,Safari5.1+ */
        
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f55d05), color-stop(100%, #e00000));
        /* Opera 11.10+ */
        
        background: -webkit-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* IE10+ */
        
        background: -o-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        /* W3C */
        
        background: -ms-linear-gradient(-45deg, #f55d05 0%, #e00000 100%);
        background: linear-gradient(135deg, #f55d05 0%, #e00000 100%);
        -ms-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}
.credit {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    padding: 5px 20px;
}

HTML

CSS3 Night desert and pyramids Logo

css3, logo

编辑器支持Emmet

快捷键

CSS3 Night desert and pyramids Logo

css3, logo

CSS3 旋转的3D金字塔

CSS3 文字上色差和像差形成的效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：