HTML5 一组素描草稿风格的图标和说明

眼睛、树枝（枝叶）、蜡烛、头骨、牙齿、小刀、绳索（打结）

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* ------------------ */
/* TEMPLATE STYLES -- */
/* ------------------ */

body {
    height: 100%;
    width: 100%;
    background-color: #333;
    color: lightgrey;
    font-size: 24px;
    line-height: 30px;
    font-family: "Microsoft Yahei";
}
h1,
h2 {
    padding: 10px 0;
    margin-bottom: 10px;
    font-weight: normal;
}
p {
    margin: 15px 0;
    line-height: 24px;
}
h1 {
    font-size: 48px;
    line-height: 52px;
}
h2 {
    font-size: 26px;
}
.container {
    max-width: 960px;
    height: 100%;
    /* ------------------ */
    /* THE EYE         -- */
    /* ------------------ */
    
    margin: 0 auto;
    padding: 20px;
}
.eye {
    width: 75px;
    height: 75px;
    margin: 0 auto 50px auto;
    background-image: url('/uploads/151101/closed.png');
    background-size: contain;
    background-repeat: no-repeat;
    /* .all-seeing is added with js below */
    
    background-position: 50% 50%;
    cursor: pointer;
}
.eye.all-seeing {
    background-image: url('/uploads/151101/ope.png');
}
.title {
    position: relative;
    width: 500px;
    height: 75px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
}
.title span {
    font-size: 34px;
    font-family: 'Secret Society Italic';
    text-transform: none;
}
.branch {
    width: 75px;
    height: 125px;
    position: absolute;
    top: -20px;
    left: auto;
    right: auto;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.branch-left {
    left: -50px;
    background-image: url('/uploads/151101/branch%20left.png');
}
.branch-right {
    /* ------------------ */
    /* SECRET MESSAGES -- */
    /* ------------------ */
    
    right: -50px;
    background-image: url('/uploads/151101/branch%20right.png');
}
.secret-book {
    position: relative;
    top: 150px;
    /* Hidden until revealed */
    
    max-width: 800px;
    height: 500px;
    margin: 0 auto;
    opacity: 0;
    /* .revealed is added via js below */
    
    -webkit-transition: opacity 2s ease;
    transition: opacity 2s ease;
}
.secret-book.revealed {
    opacity: 1;
}
.secret-book label + input[type='radio'] {
    display: none;
}
.secret-book label {
    /* Levitate the amulets */
    
    display: block;
    width: 20%;
    height: 75px;
    position: absolute;
    top: -75px;
    color: transparent;
    background-position: 50% 50%;
    background-size: auto 75px;
    /* Amulet Positions */
    
    background-repeat: no-repeat;
    cursor: pointer;
}
.secret-book label[for=candle] {
    left: 0;
}
.secret-book label[for=birb] {
    left: 20%;
}
.secret-book label[for=toof] {
    left: 40%;
}
.secret-book label[for=knife] {
    right: 20%;
}
.secret-book label[for=knot] {
    right: 0;
}
.secret-book label[for=candle] {
    background-image: url('/uploads/151101/candle.png');
}
.secret-book label[for=birb] {
    background-image: url('/uploads/151101/birb.png');
    background-size: 85px auto;
}
.secret-book label[for=toof] {
    background-image: url('/uploads/151101/toof.png');
    background-size: auto 60px;
}
.secret-book label[for=knife] {
    background-image: url('/uploads/151101/knife.png');
}
.secret-book label[for=knot] {
    background-image: url('/uploads/151101/knot.png');
}
.secret-book label[for=candle].lit {
    background-image: url('/uploads/151101/candle-white.png');
}
.secret-book label[for=birb].lit {
    background-image: url('/uploads/151101/birb-white.png');
    background-size: 85px auto;
}
.secret-book label[for=toof].lit {
    background-image: url('/uploads/151101/toof-white.png');
    background-size: auto 60px;
}
.secret-book label[for=knife].lit {
    background-image: url('/uploads/151101/knife-white.png');
}
.secret-book label[for=knot].lit {
    background-image: url('/uploads/151101/knot-white.png');
}
.ghostly-message {
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 20px;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    background-color: #2f2f2f;
    border-radius: 3px;
    -webkit-transition: height 500ms, opacity 1s;
    transition: height 500ms, opacity 1s;
}
.ghostly-message h2 {
    font-size: 28px;
    text-transform: uppercase;
}
.ghostly-message p {
    font-family: 'Secret Society Italic';
}
.secret-book label + input[type='radio']:checked + .ghostly-message {
    opacity: 1;
}

HTML

<div class="eye"></div>

<h1 class="title">The Secret Society<br/><span>of</span> Scranton
			<div class="branch branch-left"></div>
			<div class="branch branch-right"></div>
		</h1>

<div class="secret-book">

<div>
            <label for="candle">Candle</label>
            <input type="radio" id="candle" name="omnibus" />
            <div class="ghostly-message">
                <h2>You remember last week when that girl went missing?</h2>
                <p>Guess whose candles they used for the vigil?</p>
            </div>
        </div>

<div>
            <label for="birb">Birb</label>
            <input type="radio" id="birb" name="omnibus" />
            <div class="ghostly-message">
                <h2>We had a funeral for a bird.</h2>
                <p>You're not real, man.</p>
            </div>
        </div>

<div>
            <label for="toof">Toof</label>
            <input type="radio" id="toof" name="omnibus" />
            <div class="ghostly-message">
                <h2>Your dentist's name is Crentist?</h2>
                <p>He's far.</p>
            </div>
        </div>

<div>
            <label for="knife">Knife</label>
            <input type="radio" id="knife" name="omnibus" />
            <div class="ghostly-message">
                <h2>You're making a knife with a knife?</h2>
                <p>You know a better way?</p>
            </div>
        </div>

<div>
            <label for="knot">Knot</label>
            <input type="radio" id="knot" name="omnibus" />
            <div class="ghostly-message">
                <h2>I can untie any knot. I'm serious.</h2>
                <p>Name a knot. Any knot.</p>
            </div>
        </div>

</div>

眼睛、树枝（枝叶）、蜡烛、头骨、牙齿、小刀、绳索（打结）

编辑器支持Emmet

快捷键

眼睛、树枝（枝叶）、蜡烛、头骨、牙齿、小刀、绳索（打结）

HTML5 WebGL 基于Three.js实现的一个可复用3D烟雾界面组件

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：