JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效(2)

@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic"); @font-face {   font-family: 'matrix-code';   src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg'); } html, body {   -webkit-font-smoothing: antialiased;   font: normal 12px/14px "Carrois Gothic", sans-serif;   width: 100%;   height: 100%;   margin: 0;   overflow: hidden;   color: #fff;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; } body {   background: black; } #stats {   z-index: 100; } #info {   background: rgba(0, 0, 0, 0.7);   position: fixed;   bottom: 0;   left: 0px;   width: 250px;   padding: 10px 20px 20px;   z-index: 100;   -webkit-transform-origin: bottom center;   -moz-transform-origin: bottom center;   -o-transform-origin: bottom center;   transform-origin: bottom center;   -webkit-transform: rotate(0deg);   -moz-transform: rotate(0deg);   -o-transform: rotate(0deg);   transform: rotate(0deg);   -webkit-transition: -webkit-transform .5s ease-in-out;   -moz-transition: -moz-transform .5s ease-in-out;   -o-transition: -o-transform .5s ease-in-out;   transition: transform .5s ease-in-out; } #info.closed {   -webkit-transform: rotate(180deg);   -moz-transform: rotate(180deg);   -o-transform: rotate(180deg);   transform: rotate(180deg); } .toggle-info {   position: absolute;   display: block;   height: 10px;   background: rgba(0, 0, 0, 0.8);   width: 290px;   left: 0;   text-align: center;   padding: 3px 0 7px;   text-decoration: none;   color: white;   text-shadow: none; } .toggle-info:hover {   background: rgb(0, 0, 0); } #close {   top: -20px; } #open {   bottom: -20px;   -webkit-transform: rotate(-180deg);   -moz-transform: rotate(-180deg);   -o-transform: rotate(-180deg);   transform: rotate(-180deg); } button {   background: rgba(255, 255, 255, 0.2);   color: #fff;   border: 0;   border-radius: 2px;   padding: 7px 10px;   box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);   cursor: pointer; } button:hover {   background: rgba(255, 255, 255, 0.1); } pa {   color: #fff; } pa:hover {   color: #EFFDEB;   text-shadow: 0px 0px 5px #75AD61; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3c8b44a8a89a29c7870bda79297519c0.html