css梯形图,CSS3 螺旋木质梯形图

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);

body,

html {

margin: 0;

padding: 0;

width: 100%;

background: url(http://repo.perso.sfr.fr/metal.jpg) center fixed no-repeat;

background-size: cover;

overflow: hidden;

font-family: 'Lato', sans-serif;

font-weight: 100;

display: inline-block;

}

.title {

position: fixed;

top: 0;

left: 0;

right: 0;

background-color: rgba(0, 0, 0, 0.3);

padding: 10px;

text-align: center;

font-size: 30px;

letter-spacing: 15px;

color: #fff;

border-bottom: 1px solid #f66;

box-shadow: 0 0 8px 4px rgba(255, 0, 0, 0.45);

}

.wrapper {

height: 150px;

width: 100%;

position: absolute;

top: 50%;

margin: -75px 0;

text-align: center;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 500px;

perspective: 500px;

}

.dna {

position: relative;

display: inline-block;

height: 100%;

width: 1px;

margin: 0 15px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: rotate 4s linear infinite;

animation: rotate 4s linear infinite;

}

.dna:after,

.dna:before {

content: '';

position: absolute;

height: 8px;

width: 40px;

background-color: #600;

margin: -7px -20px;

-webkit-transform: rotateX(90deg) rotateZ(25deg);

transform: rotateX(90deg) rotateZ(25deg);

}

.dna:after {

top: 100%;

-webkit-transform: rotateX(90deg) rotateZ(-25deg);

transform: rotateX(90deg) rotateZ(-25deg);

}

.el {

position: absolute;

height: 100%;

width: 100%;

}

.el-0 {

-webkit-transform: rotateY(0deg) translateZ(4px);

transform: rotateY(0deg) translateZ(4px);

}

.el-1 {

-webkit-transform: rotateY(18deg) translateZ(4px);

transform: rotateY(18deg) translateZ(4px);

}

.el-2 {

-webkit-transform: rotateY(36deg) translateZ(4px);

transform: rotateY(36deg) translateZ(4px);

}

.el-3 {

-webkit-transform: rotateY(54deg) translateZ(4px);

transform: rotateY(54deg) translateZ(4px);

}

.el-4 {

-webkit-transform: rotateY(72deg) translateZ(4px);

transform: rotateY(72deg) translateZ(4px);

}

.el-5 {

-webkit-transform: rotateY(90deg) translateZ(4px);

transform: rotateY(90deg) translateZ(4px);

}

.el-6 {

-webkit-transform: rotateY(108deg) translateZ(4px);

transform: rotateY(108deg) translateZ(4px);

}

.el-7 {

-webkit-transform: rotateY(126deg) translateZ(4px);

transform: rotateY(126deg) translateZ(4px);

}

.el-8 {

-webkit-transform: rotateY(144deg) translateZ(4px);

transform: rotateY(144deg) translateZ(4px);

}

.el-9 {

-webkit-transform: rotateY(162deg) translateZ(4px);

transform: rotateY(162deg) translateZ(4px);

}

.el-10 {

-webkit-transform: rotateY(180deg) translateZ(4px);

transform: rotateY(180deg) translateZ(4px);

}

.el-11 {

-webkit-transform: rotateY(198deg) translateZ(4px);

transform: rotateY(198deg) translateZ(4px);

}

.el-12 {

-webkit-transform: rotateY(216deg) translateZ(4px);

transform: rotateY(216deg) translateZ(4px);

}

.el-13 {

-webkit-transform: rotateY(234deg) translateZ(4px);

transform: rotateY(234deg) translateZ(4px);

}

.el-14 {

-webkit-transform: rotateY(252deg) translateZ(4px);

transform: rotateY(252deg) translateZ(4px);

}

.el-15 {

-webkit-transform: rotateY(270deg) translateZ(4px);

transform: rotateY(270deg) translateZ(4px);

}

.el-16 {

-webkit-transform: rotateY(288deg) translateZ(4px);

transform: rotateY(288deg) translateZ(4px);

}

.el-17 {

-webkit-transform: rotateY(306deg) translateZ(4px);

transform: rotateY(306deg) translateZ(4px);

}

.el-18 {

-webkit-transform: rotateY(324deg) translateZ(4px);

transform: rotateY(324deg) translateZ(4px);

}

.el-19 {

-webkit-transform: rotateY(342deg) translateZ(4px);

transform: rotateY(342deg) translateZ(4px);

}

.el-20 {

-webkit-transform: rotateY(360deg) translateZ(4px);

transform: rotateY(360deg) translateZ(4px);

}

.dna0 {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.dna1 {

-webkit-animation-delay: 0.15s;

animation-delay: 0.15s;

}

.dna2 {

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

.dna3 {

-webkit-animation-delay: 0.45s;

animation-delay: 0.45s;

}

.dna4 {

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.dna5 {

-webkit-animation-delay: 0.75s;

animation-delay: 0.75s;

}

.dna6 {

-webkit-animation-delay: 0.9s;

animation-delay: 0.9s;

}

.dna7 {

-webkit-animation-delay: 1.05s;

animation-delay: 1.05s;

}

.dna8 {

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

}

.dna9 {

-webkit-animation-delay: 1.35s;

animation-delay: 1.35s;

}

.dna10 {

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

}

.dna11 {

-webkit-animation-delay: 1.65s;

animation-delay: 1.65s;

}

.dna12 {

-webkit-animation-delay: 1.8s;

animation-delay: 1.8s;

}

.dna13 {

-webkit-animation-delay: 1.95s;

animation-delay: 1.95s;

}

.dna14 {

-webkit-animation-delay: 2.1s;

animation-delay: 2.1s;

}

.dna15 {

-webkit-animation-delay: 2.25s;

animation-delay: 2.25s;

}

.dna16 {

-webkit-animation-delay: 2.4s;

animation-delay: 2.4s;

}

.dna17 {

-webkit-animation-delay: 2.55s;

animation-delay: 2.55s;

}

.dna18 {

-webkit-animation-delay: 2.7s;

animation-delay: 2.7s;

}

.dna19 {

-webkit-animation-delay: 2.85s;

animation-delay: 2.85s;

}

.dna20 {

-webkit-animation-delay: 3s;

animation-delay: 3s;

}

.dna21 {

-webkit-animation-delay: 3.15s;

animation-delay: 3.15s;

}

.dna22 {

-webkit-animation-delay: 3.3s;

animation-delay: 3.3s;

}

.dna23 {

-webkit-animation-delay: 3.45s;

animation-delay: 3.45s;

}

.dna24 {

-webkit-animation-delay: 3.6s;

animation-delay: 3.6s;

}

.dna25 {

-webkit-animation-delay: 3.75s;

animation-delay: 3.75s;

}

.dna26 {

-webkit-animation-delay: 3.9s;

animation-delay: 3.9s;

}

.dna27 {

-webkit-animation-delay: 4.05s;

animation-delay: 4.05s;

}

.dna28 {

-webkit-animation-delay: 4.2s;

animation-delay: 4.2s;

}

.dna29 {

-webkit-animation-delay: 4.35s;

animation-delay: 4.35s;

}

.dna30 {

-webkit-animation-delay: 4.5s;

animation-delay: 4.5s;

}

.dna0 .el {

background-color: #ff5757;

}

.dna1 .el {

background-color: #ff8a8a;

}

.dna2 .el {

background-color: #ff8a8a;

}

.dna3 .el {

background-color: #ff4747;

}

.dna4 .el {

background-color: #ff1414;

}

.dna5 .el {

background-color: #ff8585;

}

.dna6 .el {

background-color: #ff3838;

}

.dna7 .el {

background-color: #ff4242;

}

.dna8 .el {

background-color: #ffb3b3;

}

.dna9 .el {

background-color: #ff1a1a;

}

.dna10 .el {

background-color: #ff3d3d;

}

.dna11 .el {

background-color: #ff8f8f;

}

.dna12 .el {

background-color: #ffb3b3;

}

.dna13 .el {

background-color: #ff8585;

}

.dna14 .el {

background-color: #ff8080;

}

.dna15 .el {

background-color: #ff6b6b;

}

.dna16 .el {

background-color: #ff8585;

}

.dna17 .el {

background-color: #ff3838;

}

.dna18 .el {

background-color: #ff2424;

}

.dna19 .el {

background-color: #ff8080;

}

.dna20 .el {

background-color: #ff3d3d;

}

.dna21 .el {

background-color: #ff1414;

}

.dna22 .el {

background-color: #ff0f0f;

}

.dna23 .el {

background-color: #ff3d3d;

}

.dna24 .el {

background-color: #ff2e2e;

}

.dna25 .el {

background-color: #f33;

}

.dna26 .el {

background-color: #ff5252;

}

.dna27 .el {

background-color: #ff8a8a;

}

.dna28 .el {

background-color: #ff3838;

}

.dna29 .el {

background-color: #ff8585;

}

.dna30 .el {

background-color: #ff4747;

}

@-webkit-keyframes rotate {

from {

-webkit-transform: rotateX(0);

transform: rotateX(0);

}

to {

-webkit-transform: rotateX(360deg);

transform: rotateX(360deg);

}

}

@keyframes rotate {

from {

-webkit-transform: rotateX(0);

transform: rotateX(0);

}

to {

-webkit-transform: rotateX(360deg);

transform: rotateX(360deg);

}

}

.wrapper:after {

position: absolute;

top: 50%;

left: 50%;

content: '';

height: 120px;

width: 900px;

-webkit-transform: translateX(-50%) translateY(-50%) translateZ(-150px);

transform: translateX(-50%) translateY(-50%) translateZ(-150px);

background: #fff;

border-radius: 100%;

-webkit-filter: blur(50px);

filter: blur(50px);

opacity: 0.4;

}

.lnk {

position: fixed;

bottom: 0;

left: 0;

right: 0;

background-color: maroon;

text-align: center;

color: #fff;

font-weight: 300;

font-size: 15px;

padding: 2px;

border-top: 1px solid #1a0000;

}

.lnk a {

color: inherit;

}