html5工作描述,HTML5 幽灵般的工作清单（待办事项列表）

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}

body {

background: #404040;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-transition: all 700ms;

transition: all 700ms;

}

ul {

margin: 0;

padding: 0;

width: 100%;

}

li {

list-style: none;

margin: 0 0 0 0;

display: block;

padding: 0 0 0 0;

}

li p {

padding: 0.5em 0 0 1.5em;

margin: 0;

position: relative;

display: inline-block;

color: transparent;

letter-spacing: 3px;

font: 300 1.5em "Josefin Sans", sans-serif;

cursor: pointer;

-webkit-transition: all 400ms;

transition: all 400ms;

text-shadow: 0 0 0 rgba(255, 255, 255, 0.9), 0 1px 0 #0d0d0d;

}

li p:hover {

font-weight: 100;

letter-spacing: 4px;

text-shadow: 0 0 0 white, 0 0 4px black, 0 -10px 15px white, 0 3px 25px #d9d9d9;

}

li p:hover:before {

font-weight: 400;

color: white;

}

li p:before {

content: "~";

position: absolute;

left: 0;

padding: 0 0 0 0;

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

display: block;

font-weight: 400;

text-shadow: 0 0 0 rgba(255, 255, 255, 0.3), 1px 0 0 #0d0d0d;

}

.dark_body {

background: #212121;

}

.ghost {

text-shadow: 0 0 10px white !important;

}

.ghost:before {

text-shadow: 0 0 10px white !important;

}