css 雷恩里奇的钢笔。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 雷恩里奇的钢笔。相关的知识，希望对你有一定的参考价值。
CAxJB
-----
A [Pen](http://codepen.io/rr1000/pen/CAxJB) by [Ryan Rich](http://codepen.io/rr1000) on [CodePen](http://codepen.io/).
[License](http://codepen.io/rr1000/pen/CAxJB/license).<body>
<section class="splash">
<div class="canvas-wrapper">
<header>
<h1>Catalyze User Status Check</h1>
<p>Easily check the status and information on a Catalyze user</p>
<form id="userForm">
<input type="text" id="apiKey" name="api" value="" placeholder="Type Identifier Key">
<input type="text" id="userName" name="un" value="" placeholder="Username">
<input type="password" id="userPassword" name="pw" value="" placeholder="Password">
<input type="submit" id="submitUser" value="Submit User">
</form>
</header>
<canvas id="particles" width="1000px" height="500px" />
</div>
</section>
<div class="wrapper">
<div id="userInfo">
<div id="userStatus"></div>
<div id="headerType"></div>
<div id="bodyContent"></div>
</div>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js'></script>/* Particle Sphere */
(function(){
window.addEventListener("load", windowLoadHandler, false);
var sphereRad = 280;
var Debugger = function(){};
Debugger.log = function(message){
try{
console.log(message);
}
catch (exception){
return;
}
}
function windowLoadHandler(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()){
return;
}
var theCanvas = document.getElementById("particles");
var context = theCanvas.getContext("2d");
var displayWidth;
var displayHeight;
var timer;
var wait;
var count;
var numToAddEachFrame;
var particleList;
var recycleBin;
var particleAlpha;
var r,g,b;
var fLen;
var m;
var projCenterX;
var projCenterY;
var zMax;
var turnAngle;
var turnSpeed;
var sphereCenterX, sphereCenterY, sphereCenterZ;
var particleRad;
var zeroAlphaDepth;
var randAccelX, randAccelY, randAccelZ;
var gravity;
var rgbString;
var p;
var outsideTest;
var nextParticle;
var sinAngle;
var cosAngle;
var rotX, rotZ;
var depthAlphaFactor;
var i;
var theta, phi;
var x0, y0, z0;
init();
function init(){
wait = 1;
count = wait - 1;
numToAddEachFrame = 5;
r = 255;
g = 255;
b = 255;
rgbString = "rgba("+r+","+g+","+b+",";
particleAlpha = 0.9;
displayWidth = theCanvas.width;
displayHeight = theCanvas.height;
fLen = 1000;
projCenterX = displayWidth/2;
projCenterY = displayHeight/2;
zMax = fLen-2;
particleList = {};
recycleBin = {};
randAccelX = 0.1;
randAccelY = 0.1;
randAccelZ = 0.1;
gravity = -0;
particleRad = 1;
sphereCenterX = 0;
sphereCenterY = 0;
sphereCenterZ = -3 - sphereRad;
zeroAlphaDepth = -750;
turnSpeed = 2*Math.PI/2000;
turnAngle = 0;
timer = setInterval(onTimer, 10/24);
}
function onTimer(){
count++;
if (count >= wait) {
count = 0;
for (i = 0; i < numToAddEachFrame; i++){
theta = Math.random()*2*Math.PI;
phi = Math.acos(Math.random()*2-1);
x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
z0 = sphereRad*Math.cos(phi);
var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.005*x0, 0.002*y0, 0.002*z0);
p.attack = 120;
p.hold = 120;
p.decay = 60;
p.initValue = 0;
p.holdValue = particleAlpha;
p.lastValue = 0;
p.stuckTime = 120 + Math.random()*20;
p.accelX = 0;
p.accelY = gravity;
p.accelZ = 0;
}
}
turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
sinAngle = Math.sin(turnAngle);
cosAngle = Math.cos(turnAngle);
context.fillStyle = "#111111";
context.fillRect(0,0,displayWidth,displayHeight);
p = particleList.first;
while (p != null) {
nextParticle = p.next;
p.age++;
if (p.age > p.stuckTime) {
p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);
p.x += p.velX;
p.y += p.velY;
p.z += p.velZ;
}
rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
m = fLen/(fLen - rotZ);
p.projX = rotX*m + projCenterX;
p.projY = p.y*m + projCenterY;
if (p.age < p.attack+p.hold+p.decay) {
if (p.age < p.attack) {
p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
}
else if (p.age < p.attack+p.hold) {
p.alpha = p.holdValue;
}
else if (p.age < p.attack+p.hold+p.decay) {
p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
}
}
else {
p.dead = true;
}
if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
outsideTest = true;
}
else {
outsideTest = false;
}
if (outsideTest||p.dead) {
recycle(p);
}
else {
depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";
context.beginPath();
context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);
context.closePath();
context.fill();
}
p = nextParticle;
}
}
function addParticle(x0,y0,z0,vx0,vy0,vz0) {
var newParticle;
var color;
if (recycleBin.first != null) {
newParticle = recycleBin.first;
//remove from bin
if (newParticle.next != null) {
recycleBin.first = newParticle.next;
newParticle.next.prev = null;
}
else {
recycleBin.first = null;
}
}
else {
newParticle = {};
}
if (particleList.first == null) {
particleList.first = newParticle;
newParticle.prev = null;
newParticle.next = null;
}
else {
newParticle.next = particleList.first;
particleList.first.prev = newParticle;
particleList.first = newParticle;
newParticle.prev = null;
}
newParticle.x = x0;
newParticle.y = y0;
newParticle.z = z0;
newParticle.velX = vx0;
newParticle.velY = vy0;
newParticle.velZ = vz0;
newParticle.age = 0;
newParticle.dead = false;
if (Math.random() < 0.5) {
newParticle.right = true;
}
else {
newParticle.right = false;
}
return newParticle;
}
function recycle(p) {
if (particleList.first == p) {
if (p.next != null) {
p.next.prev = null;
particleList.first = p.next;
}
else {
particleList.first = null;
}
}
else {
if (p.next == null) {
p.prev.next = null;
}
else {
p.prev.next = p.next;
p.next.prev = p.prev;
}
}
if (recycleBin.first == null) {
recycleBin.first = p;
p.prev = null;
p.next = null;
}
else {
p.next = recycleBin.first;
recycleBin.first.prev = p;
recycleBin.first = p;
p.prev = null;
}
}
}
var asd = 12;
})();
/* Catalyze API */
$(document).ready(function(){
$("#submitUser").bind( "click keyup", function(event){
event.preventDefault();
var Request = new XMLHttpRequest();
Request.open('POST', 'https://apiv2.catalyze.io/v2/auth/signin');
var apiKey = document.getElementById('apiKey').value;
Request.setRequestHeader('X-Api-Key', apiKey);
Request.setRequestHeader('Accept', 'application/json');
Request.setRequestHeader('Content-Type', 'application/json');
Request.onreadystatechange = function(){
if (this.readyState === 4){
var statusElement=document.getElementById("userStatus");
statusElement.innerHTML="<h3>Status:</h3>" + " " + "<span id='currentStatus'>" + (this.status) + "</span>";
var headerElement=document.getElementById("headerType");
headerElement.innerHTML="<h3>Response:</h3>" + " " + (this.getAllResponseHeaders());
var bodyElement=document.getElementById("bodyContent");
bodyElement.innerHTML="<h3>User info:</h3>" + " " + "<pre>" + (this.responseText) + "</pre>";
console.log("Ready");
}
};
var users = {
'username': document.getElementById('userName').value,
'password': document.getElementById('userPassword').value
};
Request.send(JSON.stringify(users, null, "\t"));
$("#userInfo").slideDown(500);
var statusColor = $("#currentStatus").val();
if(statusColor == undefined){
$("#currentStatus").hide(0);
console.log(statusColor);
}
});
});@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,600,700,800);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
display: block;
}
body{
line-height: 1;
word-wrap: break-word;
}
ol, ul{
list-style: none;
}
blockquote, q{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content: '';
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
body{
background-color: #fff;
color: #333;
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.splash{
background-color: #111;
padding-bottom: 100px;
}
header{
background-color: transparent;
position: absolute;
padding: 100px 0px 0px 0px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
header h1{
font-size: 40px;
text-align: center;
font-weight: 300;
color: #fff;
}
header p{
text-align: center;
color: #999;
padding: 20px 0px 0px 0px;
}
.canvas-wrapper{
width: 100%;
text-align:center;
}
canvas{
display: inline;
}
.wrapper{
max-width: 960px;
margin: auto;
width: 100%;
}
#userInfo{
padding: 100px 20px 100px 20px;
display: none;
}
#userInfo div{
font-weight: 400;
font-size: 20px;
padding: 20px;
text-align: center;
margin: 0px 0px 50px 0px;
background-color: #333;
color: #fff;
}
#userInfo h3{
font-size: 30px;
font-weight: 900;
padding: 0px 0px 20px 0px;
}
#userInfo pre{
font-family: monospace;
background-color: #000;
color: #00a4da;
padding: 10px;
text-align: left;
}
#userForm{
padding: 30px 0px 0px 0px;
text-align: center;
}
input[type="text"],
input[type="submit"],
input[type="password"]{
background-color: #fff;
border: 0px;
padding: 20px;
display: block;
width: 100%;
max-width: 250px;
margin: 20px auto 0px auto;
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #999;
font-weight: 900;
font-size: 15px;
}
input[type="submit"]{
font-weight: 600;
font-size: 15px;
max-width: 295px;
background-color: #333;
color: #fff;
}
input[type="submit"]:hover{
cursor: pointer;
}
.errorBg{
background-color: #d54545 !important;
}
@media all and (max-width: 480px){
header h1{
font-size: 25px;
}
header p{
font-size: 16px;
max-width: 300px;
margin: auto;
line-height: 1.5;
}
input[type="text"],
input[type="submit"],
input[type="password"]{
padding: 10px;
}
input[type="submit"]{
max-width: 275px;
}
header{
padding: 50px 20px 50px 20px;
background-color: #f0f0f0;
}
#userInfo{
padding: 50px 20px 50px 20px;
display: none;
}
#userInfo div{
font-size: 16px;
padding: 10px;
margin: 0px auto 50px auto;
max-width: 250px;
}
#userInfo h3{
font-size: 20px;
}
}以上是关于css 雷恩里奇的钢笔。的主要内容，如果未能解决你的问题，请参考以下文章