css3 电话号码,CSS3 老式电话拨号码模拟动画

CSS

语言：

CSSSCSS

确定

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

@-webkit-keyframes dialSpin {

0% {

-ms-transform: rotate(0);

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-ms-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes sixFade {

0%, 74.5% {

opacity: 100;

}

75% {

opacity: 0;

}

}

@-webkit-keyframes murderFade {

0%, 74.5% {

opacity: 0;

}

75% {

opacity: 100;

}

}

@-webkit-keyframes bloodDrip {

0% {

top: -100px;

}

100% {

top: 300%;

}

}

html {

background: #e0e0e0;

}

.blood_source {

z-index: 40;

position: absolute;

right: 26px;

top: -84px;

width: 100px;

height: 100px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

display: block;

background: #cb4444;

box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.5);

}

.blood_source:before {

content: '';

position: absolute;

top: 45px;

left: -10px;

width: 50px;

height: 50px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background: #cb4444;

}

.blood_source:after {

content: '';

position: absolute;

top: 40px;

right: -5px;

width: 50px;

height: 50px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background: #cb4444;

}

.blood_drip {

z-index: 30;

-webkit-animation: bloodDrip 5s infinite ease 6s;

right: 68px;

top: -100px;

position: absolute;

width: 30px;

height: 30px;

background: #cb4444;

display: block;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);

}

.blood_drip:before {

position: absolute;

content: '';

width: 0;

height: 0;

border-left: 14px solid transparent;

border-right: 15px solid transparent;

border-bottom: 24px solid #cb4444;

top: -14px;

left: 1px;

}

.blood_drip:after {

position: absolute;

content: '';

width: 30px;

height: 30px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

box-shadow: 4px 3px 0px 0px rgba(255, 255, 255, 0.3);

bottom: 3px;

right: 5px;

}

.m_for_murder {

height: 100%;

width: 100%;

position: relative;

z-index: 20;

}

.m_for_murder.shadow {

position: absolute;

z-index: 10;

top: 0;

}

.m_for_murder.shadow .left_hump {

border-left-color: #802424;

}

.m_for_murder.shadow .right_hump {

border-right-color: #802424;

}

.m_for_murder.shadow .bottom_hump {

border-top-color: #802424;

}

.m_for_murder.shadow .leg {

background: #802424;

}

.m_for_murder span {

display: block;

position: absolute;

}

.m_for_murder .left_hump {

top: 0;

left: 0;

width: 0;

height: 0;

border-top: 90px solid transparent;

border-bottom: 0px solid transparent;

border-left: 60px solid #cb4444;

}

.m_for_murder .right_hump {

top: 0;

right: 0;

width: 0;

height: 0;

border-top: 90px solid transparent;

border-bottom: 0px solid transparent;

border-right: 60px solid #cb4444;

}

.m_for_murder .bottom_hump {

width: 0;

height: 0;

top: 90px;

left: 0;

right: 0;

margin: auto;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-top: 40px solid #cb4444;

}

.m_for_murder .leg {

height: 40px;

width: 30px;

top: 90px;

background: #cb4444;

}

.m_for_murder .leg.left {

left: 0;

}

.m_for_murder .leg.right {

right: 0;

}

.poster_container {

background: #4a4a4a;

position: absolute;

right: 0;

left: 0;

top: 0;

bottom: 0;

margin: auto;

display: block;

width: 600px;

height: 800px;

overflow: hidden;

}

.rotary_container {

width: 1800px;

height: 1800px;

position: absolute;

top: 0;

bottom: 0;

left: 120px;

right: 0;

margin: auto;

}

.rotary_container .rotary_content {

font-family: 'Oswald';

width: 100%;

height: 100%;

border: 305px solid #edede7;

position: absolute;

z-index: 10;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

box-sizing: border-box;

}

.rotary_container .rotary_content div {

color: #333;

line-height: 0.9em;

text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);

font-size: 150px;

}

.rotary_container .rotary_content .five {

position: absolute;

left: -102px;

top: 136px;

}

.rotary_container .rotary_content .six {

-webkit-animation: sixFade 5s 1;

-moz-animation: sixFade 5s 1;

-o-animation: sixFade 5s 1;

animation: sixFade 5s 1;

opacity: 0;

position: absolute;

bottom: 0;

top: 0;

margin: auto;

height: 140px;

left: -210px;

}

.rotary_container .rotary_content .seven {

position: absolute;

left: -102px;

bottom: 136px;

}

.rotary_container .rotary_content .MURDER {

-webkit-animation: murderFade 5s 1;

-moz-animation: murderFade 5s 1;

-o-animation: murderFade 5s 1;

animation: murderFade 5s 1;

color: #cb4444;

position: absolute;

width: 120px;

height: 130px;

left: -229px;

top: 0;

bottom: 0;

margin: auto;

}

.rotary_container .tangent_container {

width: 100%;

height: 100%;

position: absolute;

-webkit-animation: dialSpin 5s 1;

-moz-animation: dialSpin 5s 1;

-o-animation: dialSpin 5s 1;

animation: dialSpin 5s 1;

z-index: 20;

}

.rotary_container .tangent_container .dial {

box-shadow: 0px 0px 0px 124px #565656, inset 5px -8px 0px rgba(0, 0, 0, 0.2);

height: 15%;

width: 100%;

position: absolute;

display: block;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.rotary_container .tangent_container .dial:first-child {

top: 0;

}

.rotary_container .tangent_container .dial:last-child {

bottom: 0;

}

.rotary_container .tangent_container .tangent {

height: 100%;

width: 15%;

position: absolute;

left: 0px;

right: 0;

margin: auto;

}

.rotary_container .tangent_container .tangent.tangent_one {

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.rotary_container .tangent_container .tangent.tangent_two {

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.rotary_container .tangent_container .tangent.tangent_three {

-ms-transform: rotate(60deg);

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

.rotary_container .tangent_container .tangent.tangent_four {

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.rotary_container .tangent_container .tangent.tangent_five {

-ms-transform: rotate(120deg);

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.rotary_container .tangent_container .tangent.tangent_six {

-ms-transform: rotate(150deg);

-webkit-transform: rotate(150deg);

transform: rotate(150deg);

}