HTML5消除列表符号,HTML5 一组创新的列表项序列符号

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One);

.wrap {

width: 860px;

margin: 0 auto;

}

.wrap .container {

display: flex;

flex-flow: center;

justify-content: center;

align-content: center;

}

.wrap .container section {

flex: 1;

}

h2 {

font-size: 3em;

text-align: center;

font-family: 'Changa One', sans-serif;

font-weight: 400;

text-transform: uppercase;

font-size: 90px;

letter-spacing: 15px;

margin: 0 0;

}

h1 {

font-family: 'PT Sans', sans-serif;

font-weight: 700;

text-align: center;

font-size: 16px;

text-transform: uppercase;

margin: 70px 0 0;

position: relative;

letter-spacing: 6px;

}

h1:before,

h1:after {

content: " ";

position: absolute;

width: 50px;

height: 5px;

border-top: 1px solid #222;

border-bottom: 1px solid #222;

}

h1:before {

margin: 7px 0 0 -60px;

}

h1:after {

margin: 7px 0 0 10px;

}

.last {

width: 50%;

}

ul {

font-family: 'PT Sans', sans-serif;

font-weight: 700;

font-size: 16px;

text-transform: uppercase;

margin: 70px 0 0;

position: relative;

letter-spacing: 6px;

}

ul li {

list-style: none;

}

.first li:before {

font-size: 1.5em;

margin-right: 1em;

}

.first li:nth-of-type(2):before {

content: '\2234';

animation: rotate 2s linear infinite;

}

.second li:before {

font-size: 1.5em;

margin-right: 1em;

}

.second li:nth-of-type(1):before {

content: '\269b';

color: green;

animation: rotateY 2s linear infinite;

}

.second li:nth-of-type(2):before {

content: '\2192';

}

.second li:nth-of-type(2):after {

content: '\2190';

font-size: 1.5em;

margin-left: 1em;

}

.third li:before {

font-size: 1.5em;

margin-right: 1em;

}

.third li:nth-of-type(2):before {

content: '\25a0';

}

@keyframes rotate {

0% {

-webkit-transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

}

}

@keyframes rotateY {

0% {

-webkit-transform: rotateY(0deg);

}

100% {

-webkit-transform: rotateY(360deg);

}

}

@keyframes rotateX {

0% {

-webkit-transform: rotateX(0deg);

}

100% {

-webkit-transform: rotateX(360deg);

}

}