@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; }
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效(2)
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:http://www.heiqu.com/3c8b44a8a89a29c7870bda79297519c0.html