猫#685
展开↯#686
作者：广西南宁市
男人被相亲可能真的是穷
女人被相亲一定是品质太次
女人被相亲一定是品质太次
文章：2017那些“风暴眼”里的创投者 发表时间：2017-12-26, 16:26:00
#687
作者：广西南宁市
定义外部脚本文件中所使用的字符编码：
charset="UTF-8"
utf-8编码引起document.writeln输出中文乱码的解决办法
编码规则是utf-8，如网页头中的：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
那么js文件中如果有中文输出就会出现乱码，解决此个问题有两个方法：
1、在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"（假设输出的是Big5繁体字）。
例：
<script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script>
2、把js文件保存为utf-8编码。
PHP文件插入header("Content-type: text/html; charset=utf-8");
相当于页面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>Run code
Cut to clipboard
charset="UTF-8"
utf-8编码引起document.writeln输出中文乱码的解决办法
编码规则是utf-8，如网页头中的：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
那么js文件中如果有中文输出就会出现乱码，解决此个问题有两个方法：
1、在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"（假设输出的是Big5繁体字）。
例：
<script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script>
2、把js文件保存为utf-8编码。
PHP文件插入header("Content-type: text/html; charset=utf-8");
相当于页面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
文章：jQuery手机端省市区联动代码 发表时间：2017-12-27, 14:31:33
#688
作者：广西南宁市
Canvas飞机树林上空飞行特效
<style>
* {
margin: 0;
padding: 0;
}
#world {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(#e4e0ba, #f7d9aa);
}
</style>
<script src="https://out.img.pan.lizhenqiu.com/ae680261c17f84d0fdae004b6189a4d7"></script>
<div id="world"></div>
<script>
var Colors = {
red:0xf25346,
yellow:0xedeb27,
white:0xd8d0d1,
brown:0x59332e,
pink:0xF5986E,
brownDark:0x23190f,
blue:0x68c3c0,
green:0x458248,
purple:0x551A8B,
lightgreen:0x629265,
};
var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;
function createScene() {
// Get the width and height of the screen
// and use them to setup the aspect ratio
// of the camera and the size of the renderer.
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
// Create the scene.
scene = new THREE.Scene();
// Add FOV Fog effect to the scene. Same colour as the BG int he stylesheet.
scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);
// Create the camera
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 60;
nearPlane = 1;
farPlane = 10000;
camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane
);
// Position the camera
camera.position.x = 0;
camera.position.y = 150;
camera.position.z = 100;
// Create the renderer
renderer = new THREE.WebGLRenderer ({
// Alpha makes the background transparent, antialias is performant heavy
alpha: true,
antialias:true
});
//set the size of the renderer to fullscreen
renderer.setSize (WIDTH, HEIGHT);
//enable shadow rendering
renderer.shadowMap.enabled = true;
// Add the Renderer to the DOM, in the world div.
container = document.getElementById('world');
container.appendChild (renderer.domElement);
//RESPONSIVE LISTENER
window.addEventListener('resize', handleWindowResize, false);
}
//RESPONSIVE FUNCTION
function handleWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
}
var hemispshereLight, shadowLight;
function createLights(){
// Gradient coloured light - Sky, Ground, Intensity
hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)
// Parallel rays
shadowLight = new THREE.DirectionalLight(0xffffff, .9);
shadowLight.position.set(0,350,350);
shadowLight.castShadow = true;
// define the visible area of the projected shadow
shadowLight.shadow.camera.left = -650;
shadowLight.shadow.camera.right = 650;
shadowLight.shadow.camera.top = 650;
shadowLight.shadow.camera.bottom = -650;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 1000;
// Shadow map size
shadowLight.shadow.mapSize.width = 2048;
shadowLight.shadow.mapSize.height = 2048;
// Add the lights to the scene
scene.add(hemisphereLight);
scene.add(shadowLight);
}
Land = function(){
var geom = new THREE.CylinderGeometry(600,600,1700,40,10);
//rotate on the x axis
geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
//create a material
var mat = new THREE.MeshPhongMaterial({
color: Colors.lightgreen,
shading:THREE.FlatShading,
});
//create a mesh of the object
this.mesh = new THREE.Mesh(geom, mat);
//receive shadows
this.mesh.receiveShadow = true;
}
Orbit = function(){
var geom =new THREE.Object3D();
this.mesh = geom;
//this.mesh.add(sun);
}
Sun = function(){
this.mesh = new THREE.Object3D();
var sunGeom = new THREE.SphereGeometry( 400, 20, 10 );
var sunMat = new THREE.MeshPhongMaterial({
color: Colors.yellow,
shading:THREE.FlatShading,
});
var sun = new THREE.Mesh(sunGeom, sunMat);
//sun.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
sun.castShadow = false;
sun.receiveShadow = false;
this.mesh.add(sun);
}
Cloud = function(){
// Create an empty container for the cloud
this.mesh = new THREE.Object3D();
// Cube geometry and material
var geom = new THREE.DodecahedronGeometry(20,0);
var mat = new THREE.MeshPhongMaterial({
color:Colors.white,
});
var nBlocs = 3+Math.floor(Math.random()*3);
for (var i=0; i<nBlocs; i++ ){
//Clone mesh geometry
var m = new THREE.Mesh(geom, mat);
//Randomly position each cube
m.position.x = i*15;
m.position.y = Math.random()*10;
m.position.z = Math.random()*10;
m.rotation.z = Math.random()*Math.PI*2;
m.rotation.y = Math.random()*Math.PI*2;
//Randomly scale the cubes
var s = .1 + Math.random()*.9;
m.scale.set(s,s,s);
this.mesh.add(m);
}
}
Sky = function(){
this.mesh = new THREE.Object3D();
// Number of cloud groups
this.nClouds = 25;
// Space the consistenly
var stepAngle = Math.PI*2 / this.nClouds;
// Create the Clouds
for(var i=0; i<this.nClouds; i++){
var c = new Cloud();
//set rotation and position using trigonometry
var a = stepAngle*i;
// this is the distance between the center of the axis and the cloud itself
var h = 800 + Math.random()*200;
c.mesh.position.y = Math.sin(a)*h;
c.mesh.position.x = Math.cos(a)*h;
// rotate the cloud according to its position
c.mesh.rotation.z = a + Math.PI/2;
// random depth for the clouds on the z-axis
c.mesh.position.z = -400-Math.random()*400;
// random scale for each cloud
var s = 1+Math.random()*2;
c.mesh.scale.set(s,s,s);
this.mesh.add(c.mesh);
}
}
Tree = function () {
this.mesh = new THREE.Object3D();
var matTreeLeaves = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});
var geonTreeBase = new THREE.BoxGeometry( 10,20,10 );
var matTreeBase = new THREE.MeshBasicMaterial( { color:Colors.brown});
var treeBase = new THREE.Mesh(geonTreeBase,matTreeBase);
treeBase.castShadow = true;
treeBase.receiveShadow = true;
this.mesh.add(treeBase);
var geomTreeLeaves1 = new THREE.CylinderGeometry(1, 12*3, 12*3, 4 );
var treeLeaves1 = new THREE.Mesh(geomTreeLeaves1,matTreeLeaves);
treeLeaves1.castShadow = true;
treeLeaves1.receiveShadow = true;
treeLeaves1.position.y = 20
this.mesh.add(treeLeaves1);
var geomTreeLeaves2 = new THREE.CylinderGeometry( 1, 9*3, 9*3, 4 );
var treeLeaves2 = new THREE.Mesh(geomTreeLeaves2,matTreeLeaves);
treeLeaves2.castShadow = true;
treeLeaves2.position.y = 40;
treeLeaves2.receiveShadow = true;
this.mesh.add(treeLeaves2);
var geomTreeLeaves3 = new THREE.CylinderGeometry( 1, 6*3, 6*3, 4);
var treeLeaves3 = new THREE.Mesh(geomTreeLeaves3,matTreeLeaves);
treeLeaves3.castShadow = true;
treeLeaves3.position.y = 55;
treeLeaves3.receiveShadow = true;
this.mesh.add(treeLeaves3);
}
Flower = function () {
this.mesh = new THREE.Object3D();
var geomStem = new THREE.BoxGeometry( 5,50,5,1,1,1 );
var matStem = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});
var stem = new THREE.Mesh(geomStem,matStem);
stem.castShadow = false;
stem.receiveShadow = true;
this.mesh.add(stem);
var geomPetalCore = new THREE.BoxGeometry(10,10,10,1,1,1);
var matPetalCore = new THREE.MeshPhongMaterial({color:Colors.yellow, shading:THREE.FlatShading});
petalCore = new THREE.Mesh(geomPetalCore, matPetalCore);
petalCore.castShadow = false;
petalCore.receiveShadow = true;
var petalColor = petalColors [Math.floor(Math.random()*3)];
var geomPetal = new THREE.BoxGeometry( 15,20,5,1,1,1 );
var matPetal = new THREE.MeshBasicMaterial( { color:petalColor});
geomPetal.vertices[5].y-=4;
geomPetal.vertices[4].y-=4;
geomPetal.vertices[7].y+=4;
geomPetal.vertices[6].y+=4;
geomPetal.translate(12.5,0,3);
var petals = [];
for(var i=0; i<4; i++){
petals[i]=new THREE.Mesh(geomPetal,matPetal);
petals[i].rotation.z = i*Math.PI/2;
petals[i].castShadow = true;
petals[i].receiveShadow = true;
}
petalCore.add(petals[0],petals[1],petals[2],petals[3]);
petalCore.position.y = 25;
petalCore.position.z = 3;
this.mesh.add(petalCore);
}
var petalColors = [Colors.red, Colors.yellow, Colors.blue];
Forest = function(){
this.mesh = new THREE.Object3D();
// Number of Trees
this.nTrees = 300;
// Space the consistenly
var stepAngle = Math.PI*2 / this.nTrees;
// Create the Trees
for(var i=0; i<this.nTrees; i++){
var t = new Tree();
//set rotation and position using trigonometry
var a = stepAngle*i;
// this is the distance between the center of the axis and the tree itself
var h = 605;
t.mesh.position.y = Math.sin(a)*h;
t.mesh.position.x = Math.cos(a)*h;
// rotate the tree according to its position
t.mesh.rotation.z = a + (Math.PI/2)*3;
//Andreas Trigo funtime
//t.mesh.rotation.z = Math.atan2(t.mesh.position.y, t.mesh.position.x)-Math.PI/2;
// random depth for the tree on the z-axis
t.mesh.position.z = 0-Math.random()*600;
// random scale for each tree
var s = .3+Math.random()*.75;
t.mesh.scale.set(s,s,s);
this.mesh.add(t.mesh);
}
// Number of Trees
this.nFlowers = 350;
var stepAngle = Math.PI*2 / this.nFlowers;
for(var i=0; i<this.nFlowers; i++){
var f = new Flower();
var a = stepAngle*i;
var h = 605;
f.mesh.position.y = Math.sin(a)*h;
f.mesh.position.x = Math.cos(a)*h;
f.mesh.rotation.z = a + (Math.PI/2)*3;
f.mesh.position.z = 0-Math.random()*600;
var s = .1+Math.random()*.3;
f.mesh.scale.set(s,s,s);
this.mesh.add(f.mesh);
}
}
var AirPlane = function() {
this.mesh = new THREE.Object3D();
// Create the cabin
var geomCockpit = new THREE.BoxGeometry(80,50,50,1,1,1);
var matCockpit = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
geomCockpit.vertices[4].y-=10;
geomCockpit.vertices[4].z+=20;
geomCockpit.vertices[5].y-=10;
geomCockpit.vertices[5].z-=20;
geomCockpit.vertices[6].y+=30;
geomCockpit.vertices[6].z+=20;
geomCockpit.vertices[7].y+=30;
geomCockpit.vertices[7].z-=20;
var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
cockpit.castShadow = true;
cockpit.receiveShadow = true;
this.mesh.add(cockpit);
// Create the engine
var geomEngine = new THREE.BoxGeometry(20,50,50,1,1,1);
var matEngine = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
var engine = new THREE.Mesh(geomEngine, matEngine);
engine.position.x = 40;
engine.castShadow = true;
engine.receiveShadow = true;
this.mesh.add(engine);
// Create the tail
var geomTailPlane = new THREE.BoxGeometry(15,20,5,1,1,1);
var matTailPlane = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
tailPlane.position.set(-35,25,0);
tailPlane.castShadow = true;
tailPlane.receiveShadow = true;
this.mesh.add(tailPlane);
// Create the wing
var geomSideWing = new THREE.BoxGeometry(40,4,150,1,1,1);
var matSideWing = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
var sideWingTop = new THREE.Mesh(geomSideWing, matSideWing);
var sideWingBottom = new THREE.Mesh(geomSideWing, matSideWing);
sideWingTop.castShadow = true;
sideWingTop.receiveShadow = true;
sideWingBottom.castShadow = true;
sideWingBottom.receiveShadow = true;
sideWingTop.position.set(20,12,0);
sideWingBottom.position.set(20,-3,0);
this.mesh.add(sideWingTop);
this.mesh.add(sideWingBottom);
var geomWindshield = new THREE.BoxGeometry(3,15,20,1,1,1);
var matWindshield = new THREE.MeshPhongMaterial({color:Colors.white,transparent:true, opacity:.3, shading:THREE.FlatShading});;
var windshield = new THREE.Mesh(geomWindshield, matWindshield);
windshield.position.set(5,27,0);
windshield.castShadow = true;
windshield.receiveShadow = true;
this.mesh.add(windshield);
var geomPropeller = new THREE.BoxGeometry(20,10,10,1,1,1);
geomPropeller.vertices[4].y-=5;
geomPropeller.vertices[4].z+=5;
geomPropeller.vertices[5].y-=5;
geomPropeller.vertices[5].z-=5;
geomPropeller.vertices[6].y+=5;
geomPropeller.vertices[6].z+=5;
geomPropeller.vertices[7].y+=5;
geomPropeller.vertices[7].z-=5;
var matPropeller = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
this.propeller = new THREE.Mesh(geomPropeller, matPropeller);
this.propeller.castShadow = true;
this.propeller.receiveShadow = true;
var geomBlade1 = new THREE.BoxGeometry(1,100,10,1,1,1);
var geomBlade2 = new THREE.BoxGeometry(1,10,100,1,1,1);
var matBlade = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
var blade1 = new THREE.Mesh(geomBlade1, matBlade);
blade1.position.set(8,0,0);
blade1.castShadow = true;
blade1.receiveShadow = true;
var blade2 = new THREE.Mesh(geomBlade2, matBlade);
blade2.position.set(8,0,0);
blade2.castShadow = true;
blade2.receiveShadow = true;
this.propeller.add(blade1, blade2);
this.propeller.position.set(50,0,0);
this.mesh.add(this.propeller);
var wheelProtecGeom = new THREE.BoxGeometry(30,15,10,1,1,1);
var wheelProtecMat = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
var wheelProtecR = new THREE.Mesh(wheelProtecGeom,wheelProtecMat);
wheelProtecR.position.set(25,-20,25);
this.mesh.add(wheelProtecR);
var wheelTireGeom = new THREE.BoxGeometry(24,24,4);
var wheelTireMat = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
var wheelTireR = new THREE.Mesh(wheelTireGeom,wheelTireMat);
wheelTireR.position.set(25,-28,25);
var wheelAxisGeom = new THREE.BoxGeometry(10,10,6);
var wheelAxisMat = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
var wheelAxis = new THREE.Mesh(wheelAxisGeom,wheelAxisMat);
wheelTireR.add(wheelAxis);
this.mesh.add(wheelTireR);
var wheelProtecL = wheelProtecR.clone();
wheelProtecL.position.z = -wheelProtecR.position.z ;
this.mesh.add(wheelProtecL);
var wheelTireL = wheelTireR.clone();
wheelTireL.position.z = -wheelTireR.position.z;
this.mesh.add(wheelTireL);
var wheelTireB = wheelTireR.clone();
wheelTireB.scale.set(.5,.5,.5);
wheelTireB.position.set(-35,-5,0);
this.mesh.add(wheelTireB);
var suspensionGeom = new THREE.BoxGeometry(4,20,4);
suspensionGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,10,0))
var suspensionMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
var suspension = new THREE.Mesh(suspensionGeom,suspensionMat);
suspension.position.set(-35,-5,0);
suspension.rotation.z = -.3;
this.mesh.add(suspension);
};
var Fox = function() {
this.mesh = new THREE.Object3D();
var redFurMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
// Create the Body
var geomBody = new THREE.BoxGeometry(100,50,50,1,1,1);
var body = new THREE.Mesh(geomBody, redFurMat);
body.castShadow = true;
body.receiveShadow = true;
this.mesh.add(body);
// Create the Chest
var geomChest = new THREE.BoxGeometry(50,60,70,1,1,1);
var chest = new THREE.Mesh(geomChest, redFurMat);
chest.position.x = 60;
chest.castShadow = true;
chest.receiveShadow = true;
this.mesh.add(chest);
// Create the Head
var geomHead = new THREE.BoxGeometry(40,55,50,1,1,1);
this.head = new THREE.Mesh(geomHead, redFurMat);
this.head.position.set(80, 35, 0);
this.head.castShadow = true;
this.head.receiveShadow = true;
// Create the Snout
var geomSnout = new THREE.BoxGeometry(40,30,30,1,1,1);
var snout = new THREE.Mesh(geomSnout, redFurMat);
geomSnout.vertices[0].y-=5;
geomSnout.vertices[0].z+=5;
geomSnout.vertices[1].y-=5;
geomSnout.vertices[1].z-=5;
geomSnout.vertices[2].y+=5;
geomSnout.vertices[2].z+=5;
geomSnout.vertices[3].y+=5;
geomSnout.vertices[3].z-=5;
snout.castShadow = true;
snout.receiveShadow = true;
snout.position.set(30,0,0);
this.head.add(snout);
// Create the Nose
var geomNose = new THREE.BoxGeometry(10,15,20,1,1,1);
var matNose = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
var nose = new THREE.Mesh(geomNose, matNose);
nose.position.set(55,0,0);
this.head.add(nose);
// Create the Ears
var geomEar = new THREE.BoxGeometry(10,40,30,1,1,1);
var earL = new THREE.Mesh(geomEar, redFurMat);
earL.position.set(-10,40,-18);
this.head.add(earL);
earL.rotation.x=-Math.PI/10;
geomEar.vertices[1].z+=5;
geomEar.vertices[4].z+=5;
geomEar.vertices[0].z-=5;
geomEar.vertices[5].z-=5;
// Create the Ear Tips
var geomEarTipL = new THREE.BoxGeometry(10,10,20,1,1,1);
var matEarTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
var earTipL = new THREE.Mesh(geomEarTipL, matEarTip);
earTipL.position.set(0,25,0);
earL.add(earTipL);
var earR = earL.clone();
earR.position.z = -earL.position.z;
earR.rotation.x = - earL.rotation.x;
this.head.add(earR);
this.mesh.add(this.head);
// Create the tail
var geomTail = new THREE.BoxGeometry(80,40,40,2,1,1);
geomTail.vertices[4].y-=10;
geomTail.vertices[4].z+=10;
geomTail.vertices[5].y-=10;
geomTail.vertices[5].z-=10;
geomTail.vertices[6].y+=10;
geomTail.vertices[6].z+=10;
geomTail.vertices[7].y+=10;
geomTail.vertices[7].z-=10;
this.tail = new THREE.Mesh(geomTail, redFurMat);
this.tail.castShadow = true;
this.tail.receiveShadow = true;
// Create the tail Tip
var geomTailTip = new THREE.BoxGeometry(20,40,40,1,1,1);
var matTailTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
var tailTip = new THREE.Mesh(geomTailTip, matTailTip);
tailTip.position.set(80,0,0);
tailTip.castShadow = true;
tailTip.receiveShadow = true;
this.tail.add(tailTip);
this.tail.position.set(-40,10,0);
geomTail.translate(40,0,0);
geomTailTip.translate(10,0,0);
this.tail.rotation.z = Math.PI/1.5;
this.mesh.add(this.tail);
// Create the Legs
var geomLeg = new THREE.BoxGeometry(20,60,20,1,1,1);
this.legFR = new THREE.Mesh(geomLeg, redFurMat);
this.legFR.castShadow = true;
this.legFR.receiveShadow = true;
// Create the feet
var geomFeet = new THREE.BoxGeometry(20,20,20,1,1,1);
var matFeet = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
var feet = new THREE.Mesh(geomFeet, matFeet);
feet.position.set(0,0,0);
feet.castShadow = true;
feet.receiveShadow = true;
this.legFR.add(feet);
this.legFR.position.set(70,-12,25);
geomLeg.translate(0,40,0);
geomFeet.translate(0,80,0);
this.legFR.rotation.z = 16;
this.mesh.add(this.legFR);
this.legFL = this.legFR.clone();
this.legFL.position.z = -this.legFR.position.z;
this.legFL.rotation.z = -this.legFR.rotation.z;
this.mesh.add(this.legFL);
this.legBR = this.legFR.clone();
this.legBR.position.x = -(this.legFR.position.x)+50;
this.legBR.rotation.z = -this.legFR.rotation.z;
this.mesh.add(this.legBR);
this.legBL = this.legFL.clone();
this.legBL.position.x = -(this.legFL.position.x)+50;
this.legBL.rotation.z = -this.legFL.rotation.z;
this.mesh.add(this.legBL);
};
var sky;
var forest;
var land;
var orbit;
var airplane;
var sun;
var fox;
var mousePos={x:0, y:0};
var offSet = -600;
function createSky(){
sky = new Sky();
sky.mesh.position.y = offSet;
scene.add(sky.mesh);
}
function createLand(){
land = new Land();
land.mesh.position.y = offSet;
scene.add(land.mesh);
}
function createOrbit(){
orbit = new Orbit();
orbit.mesh.position.y = offSet;
orbit.mesh.rotation.z = -Math.PI/6;
scene.add(orbit.mesh);
}
function createForest(){
forest = new Forest();
forest.mesh.position.y = offSet;
scene.add(forest.mesh);
}
function createSun(){
sun = new Sun();
sun.mesh.scale.set(1,1,.3);
sun.mesh.position.set(0,-30,-850);
scene.add(sun.mesh);
}
function createPlane(){
airplane = new AirPlane();
airplane.mesh.scale.set(.35,.35,.35);
airplane.mesh.position.set(-40,110,-250);
// airplane.mesh.rotation.z = Math.PI/15;
scene.add(airplane.mesh);
}
function createFox(){
fox = new Fox();
fox.mesh.scale.set(.35,.35,.35);
fox.mesh.position.set(-40,110,-250);
scene.add(fox.mesh);
}
function updatePlane() {
var targetY = normalize(mousePos.y,-.75,.75, 50, 190);
var targetX = normalize(mousePos.x,-.75,.75,-100, -20);
// Move the plane at each frame by adding a fraction of the remaining distance
airplane.mesh.position.y += (targetY-airplane.mesh.position.y)*0.1;
airplane.mesh.position.x += (targetX-airplane.mesh.position.x)*0.1;
// Rotate the plane proportionally to the remaining distance
airplane.mesh.rotation.z = (targetY-airplane.mesh.position.y)*0.0128;
airplane.mesh.rotation.x = (airplane.mesh.position.y-targetY)*0.0064;
airplane.mesh.rotation.y = (airplane.mesh.position.x-targetX)*0.0064;
airplane.propeller.rotation.x += 0.3;
}
function normalize(v,vmin,vmax,tmin, tmax){
var nv = Math.max(Math.min(v,vmax), vmin);
var dv = vmax-vmin;
var pc = (nv-vmin)/dv;
var dt = tmax-tmin;
var tv = tmin + (pc*dt);
return tv;
}
function loop(){
land.mesh.rotation.z += .005;
orbit.mesh.rotation.z += .001;
sky.mesh.rotation.z += .003;
forest.mesh.rotation.z += .005;
updatePlane();
renderer.render(scene, camera);
requestAnimationFrame(loop);
}
function handleMouseMove (event) {
var tx = -1 + (event.clientX / WIDTH)*2;
var ty = 1 - (event.clientY / HEIGHT)*2;
mousePos = {x:tx, y:ty};
}
function init(event) {
createScene();
createLights();
createPlane();
createOrbit();
createSun();
createLand();
createForest();
createSky();
//createFox();
document.addEventListener('mousemove', handleMouseMove, false);
loop();
}
window.addEventListener('load', init, false);
</script>Run code
Cut to clipboard
文章：JS酷炫红色LED数字时钟 发表时间：2017-12-27, 11:11:35
#689
作者：广西南宁市
HTML5 SVG自行车行驶动画特效
<style>html {background-color: #78D89B;}
.container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.st0{fill:#1E0F02;}
.st1{fill:none;}
.st2{fill:#23110D;}
.st3{fill:#FFFFFF;}
.st4{fill:#E14C00;}
.st5{fill:#807B7C;}
.st6{fill:#4D4A4A;}
.st7{fill:#6A1D02;}
.st8{fill:#6EC48C;}
.st9{fill:#64B380;}
.st10{fill:#807B7C;}
.st11{fill: none; stroke:none; stroke-miterlimit="10"}
.bg{fill:url(#pattern);}
</style>
<div class="container">
<svg id="bike" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="750px"
height="500px" viewBox="0 0 750 500" style="enable-background:new 0 0 750 500;" xml:space="preserve">
<rect id="city" class="bg" width="750" height="500" x="0" y="0"/>
<g id="wheel">
<path class="st0" id="anima_wheel_1" d="M234,222.25c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
S280.53,222.25,234,222.25z M263.192,323.776l-13.949-11.086l18.36-1.271l41.305,10.665c-1.185,5.727-3.025,11.211-5.413,16.392
L263.192,323.776z M303.081,339.39c-1.837,3.852-3.998,7.518-6.428,10.982l-30.986-24.628L303.081,339.39z M272.533,372.577
c-4.94,2.887-10.222,5.253-15.787,6.984l-16.052-39.808l-1.095-17.785l13.229,12.793L272.533,372.577z M255.102,336.96
l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L255.102,336.96z M255.779,379.836c-4.024,1.193-8.187,2.059-12.459,2.578
l-2.432-39.506L255.779,379.836z M210.673,379.365c-5.549-1.775-10.821-4.167-15.739-7.094l18.832-38.545l12.485-12.714
l-0.655,18.392L210.673,379.365z M225.484,342.562l-1.416,39.775c-4.266-0.553-8.425-1.443-12.441-2.669L225.484,342.562z
M194.072,371.758c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.237L194.072,371.758z M164.253,337.917
c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.82L164.253,337.917z M201.502,324.302
L170.99,349.87c-2.402-3.482-4.518-7.173-6.325-11.041L201.502,324.302z M157.5,306.5c0-5.785,0.663-11.411,1.88-16.828
l42.474,5.999l15.95,7.944l-17.694,5.061l-42.601-1.843C157.508,306.721,157.5,306.611,157.5,306.5z M310.5,306.5
c0,0.318-0.02,0.63-0.024,0.947l-42.783,2.963l-17.252-4.454l16.255-8.629l42.063-7.056C309.889,295.503,310.5,300.929,310.5,306.5
z M229.058,294.881l-2.494-1.561l-4.258-15.332l9.216,13.683l-0.379,2.541C230.423,294.379,229.724,294.597,229.058,294.881z
M227.993,295.394c-0.251,0.136-0.49,0.29-0.73,0.442l-0.302-1.089L227.993,295.394z M223.501,299.491l-0.713-0.864l1.223,0.173
C223.836,299.026,223.66,299.253,223.501,299.491z M222.951,300.396c-0.351,0.634-0.641,1.304-0.88,1.998l-2.842,0.813
l-14.243-7.094l16.334,2.307L222.951,300.396z M221.741,303.529c-0.067,0.278-0.125,0.558-0.173,0.843l-1.011-0.504
L221.741,303.529z M221.43,305.421c-0.03,0.357-0.055,0.715-0.055,1.079c0,0.372,0.024,0.738,0.056,1.102l-2.265,1.898
l-15.896-0.688l15.862-4.536L221.43,305.421z M221.59,308.773c0.052,0.284,0.117,0.563,0.188,0.84l-1.131-0.049L221.59,308.773z
M228.129,317.672l-0.786,0.801l0.044-1.234C227.63,317.39,227.874,317.538,228.129,317.672z M232.349,292.9l0.689,1.023
c-0.289,0.022-0.573,0.056-0.856,0.097L232.349,292.9z M246.6,305.995l1.099,0.284l-1.092,0.579
c0.003-0.12,0.018-0.238,0.018-0.359C246.625,306.33,246.606,306.164,246.6,305.995z M246.519,304.942
c-0.091-0.735-0.236-1.452-0.448-2.142l1.814-2.318l15.694-2.633l-14.572,7.735L246.519,304.942z M245.671,301.69
c-0.109-0.265-0.235-0.52-0.362-0.776l1.115-0.187L245.671,301.69z M242.703,297.369c-0.207-0.197-0.415-0.394-0.635-0.577
l0.934-0.619L242.703,297.369z M241.221,296.152c-0.594-0.415-1.227-0.775-1.89-1.085l-0.512-2.914l8.545-13.424l-4.002,16.005
L241.221,296.152z M238.236,294.619c-0.269-0.096-0.542-0.185-0.819-0.263l0.606-0.952L238.236,294.619z M238.374,318.331
l0.069,1.129l-0.882-0.852C237.837,318.526,238.106,318.43,238.374,318.331z M245.722,311.17l0.881,0.7l-1.231,0.085
C245.496,311.697,245.616,311.437,245.722,311.17z M246.078,310.174c0.21-0.69,0.355-1.406,0.445-2.139l2.61-1.386l15.407,3.978
l-16.458,1.14L246.078,310.174z M269.488,295.844l35.176-18.673c1.616,3.888,2.907,7.942,3.868,12.123L269.488,295.844z
M266.372,296.367l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L266.372,296.367z M247.337,299.56
l-2.538,0.426c-0.377-0.624-0.804-1.214-1.28-1.761l0.717-2.869l13.267-8.788L247.337,299.56z M244.596,293.916l4.464-17.853
l22.897-35.972c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L244.596,293.916z M249.828,272.996l9.659-38.63
c4.034,1.425,7.911,3.176,11.602,5.227L249.828,272.996z M248.131,275.662l-9.568,15.032l-3.183-18.125l6.288-42.186
c5.845,0.582,11.488,1.839,16.87,3.661L248.131,275.662z M237.766,291.944l-1.377,2.164c-0.705-0.135-1.43-0.209-2.171-0.222
l-1.651-2.451l2.346-15.738L237.766,291.944z M231.739,290.206l-10.28-15.263l-11.414-41.095
c5.395-1.778,11.051-2.976,16.901-3.511l7.42,42.246L231.739,290.206z M219.692,272.319l-22.248-33.033
c3.707-2.02,7.607-3.725,11.652-5.117L219.692,272.319z M220.538,275.365l4.768,17.169l-15.601-9.763l-27.141-32.898
c4.256-3.868,8.961-7.248,14.01-10.086L220.538,275.365z M225.703,293.961l0.689,2.481c-0.58,0.439-1.12,0.925-1.615,1.456
l-2.933-0.414l-10.127-12.275L225.703,293.961z M220.377,297.276l-18.221-2.573l-38.176-19.015
c2.342-5.314,5.255-10.319,8.688-14.917l36.369,22.76L220.377,297.276z M199.024,294.261l-39.418-5.567
c0.995-4.172,2.314-8.218,3.962-12.094L199.024,294.261z M197.069,309.545l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657
L197.069,309.545z M219.51,310.516l2.569,0.111c0.24,0.694,0.532,1.364,0.884,1.997l-1.295,2.65l-14.803,5.838L219.51,310.516z
M223.585,313.631c0.162,0.236,0.336,0.462,0.513,0.686l-1.05,0.414L223.585,313.631z M224.791,315.117
c0.497,0.53,1.038,1.016,1.618,1.454l-0.105,2.958l-11.149,11.354l7.242-14.822L224.791,315.117z M227.289,319.955l1.791-1.824
c0.666,0.282,1.365,0.498,2.084,0.663l1.105,2.741l-5.567,14.908L227.289,319.955z M232.326,319.001
c0.283,0.038,0.57,0.064,0.859,0.082l-0.397,1.063L232.326,319.001z M234.241,319.113c0.742-0.014,1.468-0.088,2.173-0.224
l2.12,2.05l0.978,15.883l-6.17-15.301L234.241,319.113z M239.508,320.49l-0.158-2.567c0.663-0.311,1.295-0.672,1.889-1.089
l2.775,1.012l7.353,14.111L239.508,320.49z M242.175,316.111c0.218-0.185,0.43-0.377,0.635-0.577l0.52,0.998L242.175,316.111z
M243.534,314.76c0.475-0.548,0.9-1.138,1.276-1.763l2.954-0.205l12.457,9.901l-15.499-5.653L243.534,314.76z M270.756,311.2
l39.695-2.749c-0.108,4.314-0.565,8.539-1.359,12.647L270.756,311.2z M295.094,260.464l-33.007,21.865l24.52-31.34
C289.687,253.909,292.533,257.071,295.094,260.464z M240.667,230.307l-5.835,39.147l-6.883-39.194
c1.999-0.157,4.012-0.26,6.051-0.26C236.248,230,238.468,230.117,240.667,230.307z M181.839,250.564l25.186,30.529l-33.738-21.114
C175.875,256.607,178.736,253.459,181.839,250.564z M171.571,350.687l32.872-27.545l16.575-6.537l-8.078,16.535l-29.873,30.423
C178.767,359.723,174.914,355.4,171.571,350.687z M225.064,382.463l1.526-42.862l6.234-16.692l6.883,17.068l2.62,42.564
C239.59,382.837,236.815,383,234,383C230.975,383,227.997,382.805,225.064,382.463z M284.468,363.966l-30.827-29.81l-8.234-15.802
l17.289,6.306l33.377,26.527C292.693,355.874,288.799,360.159,284.468,363.966z"/>
<circle class="st1" cx="234" cy="306.649" r="84.25"/>
</g>
<g id="wheel_2">
<path class="st0" id="anima_wheel_front" d="M517.471,222.963c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
S564.001,222.963,517.471,222.963z M546.665,324.49l-13.95-11.088l18.359-1.271l41.305,10.665
c-1.185,5.727-3.026,11.212-5.413,16.392L546.665,324.49z M586.552,340.103c-1.837,3.852-3.998,7.518-6.428,10.981l-30.985-24.627
L586.552,340.103z M556.004,373.29c-4.94,2.887-10.222,5.254-15.788,6.984l-16.052-39.808l-1.095-17.785l13.23,12.793
L556.004,373.29z M538.573,337.673l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L538.573,337.673z M539.249,380.549
c-4.024,1.193-8.187,2.059-12.458,2.578l-2.432-39.505L539.249,380.549z M494.144,380.078c-5.549-1.775-10.821-4.167-15.738-7.094
l18.833-38.546l12.483-12.713l-0.655,18.391L494.144,380.078z M508.954,343.278l-1.416,39.771
c-4.265-0.553-8.424-1.443-12.439-2.669L508.954,343.278z M477.543,372.471c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.238
L477.543,372.471z M447.724,338.63c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.819
L447.724,338.63z M484.974,325.014l-30.513,25.568c-2.402-3.482-4.518-7.174-6.325-11.041L484.974,325.014z M440.971,307.213
c0-5.785,0.663-11.411,1.88-16.828l42.475,5.999l15.949,7.944l-17.693,5.06l-42.602-1.843
C440.979,307.434,440.971,307.324,440.971,307.213z M593.971,307.213c0,0.318-0.02,0.63-0.024,0.947l-42.782,2.962l-17.253-4.455
l16.254-8.628l42.063-7.056C593.36,296.216,593.971,301.642,593.971,307.213z M507.305,303.644
c-0.258,0.736-0.443,1.505-0.537,2.303l-2.742-1.366L507.305,303.644z M502.7,303.92l-14.243-7.094l16.334,2.307l2.796,3.389
L502.7,303.92z M506.534,306.948l-3.896,3.265l-15.897-0.688l15.86-4.536L506.534,306.948z M506.732,308.087
c0.064,0.801,0.208,1.58,0.438,2.322l-3.051-0.132L506.732,308.087z M508.211,301.707l-1.952-2.367l3.378,0.477
C509.095,300.392,508.618,301.025,508.211,301.707z M513.312,297.263c-0.733,0.307-1.421,0.698-2.061,1.151l-0.821-2.955
L513.312,297.263z M510.033,294.031l-4.259-15.333l9.217,13.686l-0.648,4.345L510.033,294.031z M512.962,316.998l-2.149,2.188
l0.121-3.412C511.56,316.253,512.238,316.664,512.962,316.998z M515.819,293.613l1.906,2.83c-0.085-0.002-0.169-0.013-0.254-0.013
c-0.72,0-1.422,0.074-2.103,0.208L515.819,293.613z M522.084,297.478c-0.707-0.336-1.454-0.6-2.235-0.776l1.645-2.585
L522.084,297.478z M522.289,292.868l8.544-13.424l-4.002,16.003l-3.664,2.427L522.289,292.868z M521.726,317.121l0.188,3.052
l-2.449-2.368C520.252,317.657,521.009,317.429,521.726,317.121z M526.473,296.885l-0.827,3.308
c-0.516-0.6-1.098-1.138-1.732-1.612L526.473,296.885z M528.204,306.226l2.965,0.766l-3.013,1.6
c0.058-0.452,0.098-0.91,0.098-1.379C528.254,306.88,528.234,306.552,528.204,306.226z M528.223,305.199l3.133-4.004l15.693-2.633
l-14.571,7.735L528.223,305.199z M527.798,304.12c-0.229-0.764-0.54-1.491-0.923-2.173l3.019-0.507L527.798,304.12z
M527.675,310.676l2.399,1.907l-3.404,0.236C527.079,312.148,527.419,311.432,527.675,310.676z M528.113,309.746l4.49-2.384
l15.407,3.978l-16.457,1.14L528.113,309.746z M552.959,296.557l35.177-18.673c1.616,3.888,2.907,7.942,3.868,12.124
L552.959,296.557z M549.842,297.08l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L549.842,297.08z
M530.808,300.273l-4.333,0.727l1.233-4.933l13.266-8.788L530.808,300.273z M528.068,294.628l4.464-17.853l22.896-35.971
c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L528.068,294.628z M533.299,273.707l9.659-38.628
c4.034,1.425,7.911,3.176,11.602,5.227L533.299,273.707z M531.601,276.376l-9.568,15.032l-3.184-18.127l6.287-42.185
c5.845,0.582,11.488,1.839,16.871,3.661L531.601,276.376z M521.238,292.657l-2.359,3.707l-2.841-4.218l2.346-15.74L521.238,292.657
z M515.211,290.918l-10.283-15.267l-11.413-41.09c5.395-1.778,11.051-2.976,16.902-3.511l7.419,42.245L515.211,290.918z
M503.163,273.03l-22.247-33.032c3.706-2.02,7.606-3.724,11.652-5.117L503.163,273.03z M504.009,276.078l4.768,17.168
l-15.602-9.764l-27.14-32.898c4.256-3.868,8.961-7.247,14.01-10.086L504.009,276.078z M509.174,294.674l1.176,4.234l-5.035-0.711
l-10.127-12.275L509.174,294.674z M503.848,297.99l-18.221-2.574l-38.176-19.015c2.342-5.314,5.255-10.319,8.688-14.917
l36.369,22.76L503.848,297.99z M482.496,294.974l-39.419-5.568c0.995-4.172,2.314-8.218,3.962-12.094L482.496,294.974z
M480.54,310.258l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657L480.54,310.258z M502.982,311.229l4.39,0.19l-2.232,4.568
l-14.802,5.838L502.982,311.229z M508.011,312.389c0.381,0.695,0.843,1.337,1.362,1.929l-2.855,1.126L508.011,312.389z
M509.955,315.163l-0.181,5.082l-11.148,11.353l7.242-14.823L509.955,315.163z M510.76,320.667l3.079-3.136l1.901,4.714
l-5.567,14.907L510.76,320.667z M514.984,317.696c0.755,0.179,1.539,0.282,2.346,0.293l-1.071,2.869L514.984,317.696z
M518.35,318.117l3.655,3.534l0.978,15.883l-6.17-15.301L518.35,318.117z M522.979,321.202l-0.27-4.385l4.777,1.742l7.353,14.112
L522.979,321.202z M523.601,316.078c0.651-0.451,1.245-0.976,1.781-1.556l1.419,2.723L523.601,316.078z M526.163,313.856
l5.072-0.351l12.457,9.901l-15.498-5.653L526.163,313.856z M554.227,311.913l39.694-2.749c-0.108,4.314-0.565,8.539-1.359,12.647
L554.227,311.913z M578.565,261.177l-33.007,21.865l24.52-31.34C573.158,254.622,576.004,257.784,578.565,261.177z M524.138,231.02
l-5.835,39.149l-6.884-39.196c1.999-0.157,4.013-0.26,6.052-0.26C519.719,230.713,521.939,230.83,524.138,231.02z M465.31,251.276
l25.185,30.528l-33.737-21.113C459.346,257.32,462.207,254.171,465.31,251.276z M455.042,351.4l32.873-27.545l16.575-6.536
l-8.079,16.536l-29.872,30.422C462.239,360.436,458.385,356.114,455.042,351.4z M508.535,383.176l1.526-42.862l6.234-16.693
l6.883,17.069l2.62,42.564c-2.736,0.296-5.512,0.459-8.326,0.459C514.446,383.713,511.468,383.518,508.535,383.176z
M567.939,364.679l-30.826-29.809l-8.234-15.802l17.288,6.305l33.377,26.528C576.164,356.587,572.27,360.872,567.939,364.679z"/>
<circle class="st1" cx="517.471" cy="307.166" r="84.25"/>
</g>
<g id="velik">
<g id="rul">
<g>
<path class="st2" d="M405.833,142.563l0.468,3.846l0.574-0.221v-0.679c0-0.971,0.521-2.868,1.365-3.349l6.923-3.949
c0.669-0.382,1.419-0.587,2.189-0.596c2.782-0.035,9.683,0.834,11.023,0.387c1.688-0.563,4.313-4,5.563-4.5
c0.746-0.298,1.625-0.463,2.213-0.548c0.38-0.055,0.662-0.377,0.662-0.761v-1.22c0-0.451-0.385-0.806-0.834-0.766
c-1.936,0.171-6.704,0.512-8.479-0.079c-1.266-0.422-1.78-1.595-1.987-2.541c-0.157-0.714-0.9-1.136-1.607-0.952l-7.236,1.879
l0.44,1.951c0,0,1.953-0.765,2.828-0.003c0.875,0.762,1.813,1.729,0.75,3.229s-3.188,0.688-4.75,1.313s-9.125,5.479-9.771,5.938
C405.657,141.299,405.833,142.563,405.833,142.563z"/>
</g>
<g>
<path class="st3" d="M438.982,171.934l-9.929-23.101l1.648-0.857c0.008-0.004,1.387-0.74,4.102-2.766
c4.438-3.312,5.013-8.982,3.613-13.133c-1.771-5.256-6.309-6.468-9.959-5.854c-3.603,0.608-12.615,2.94-12.706,2.964
l-1.004-3.872c0.377-0.098,9.271-2.399,13.044-3.036c6.642-1.119,12.295,2.226,14.416,8.521
c2.234,6.631,0.221,13.711-5.012,17.616c-1.278,0.954-2.295,1.651-3.048,2.141l8.51,19.799L438.982,171.934z"/>
</g>
<g>
<path class="st2" d="M417.351,131.53l-1.968-8.732c-0.121-0.54-0.658-0.875-1.195-0.756c-0.539,0.122-0.877,0.657-0.756,1.195
l0.011,0.048l-26.907,7.552l-0.041-0.201c-0.098-0.481-0.566-0.79-1.046-0.694c-0.481,0.097-0.792,0.566-0.694,1.047l1.215,6.007
c0.085,0.421,0.455,0.712,0.869,0.712c0.059,0,0.117-0.006,0.177-0.018c0.481-0.097,0.792-0.566,0.694-1.047l-0.04-0.197
l27.724-4.502l0.006,0.026c0.104,0.465,0.518,0.78,0.975,0.78c0.073,0,0.146-0.008,0.221-0.024
C417.134,132.604,417.472,132.069,417.351,131.53z"/>
</g>
</g>
<g id="krilya">
<g>
<path class="st4" d="M323.54,301.67l-6.21-0.44C314.62,257.57,278.35,223,234,223c-40.654,0-74.511,29.039-81.971,67.508
c-0.536,2.765-2.148,5.204-4.537,6.697l-0.2,0.125c-1.089,0.68-2.478-0.209-2.327-1.483
c5.259-44.497,43.118-79.016,89.035-79.016C281.9,216.83,321.03,254.39,323.54,301.67z"/>
</g>
<g>
<path class="st4" d="M522.133,223.791c-17.449-1.06-35.376,3.33-51.078,13.72c-33.904,22.434-46.116,65.334-31.109,101.532
c1.079,2.602,1.081,5.525-0.088,8.088l-0.098,0.215c-0.533,1.168-2.182,1.194-2.76,0.047
c-20.168-40.011-7.644-89.69,30.65-115.028c18.863-12.482,40.718-16.899,61.5-14.08C533.5,219,525.928,224,522.133,223.791z"/>
</g>
</g>
<g id="tormoz">
<g>
<path class="st5" d="M285.745,248.074l-6.156-5.109c-0.846-0.702-0.964-1.97-0.262-2.816l0,0
c0.703-0.846,1.97-0.964,2.816-0.262l6.156,5.109c0.846,0.702,0.964,1.97,0.262,2.816l0,0
C287.859,248.658,286.592,248.776,285.745,248.074z"/>
<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -89.0755 287.0871)" class="st3" cx="287.012" cy="246.415" rx="1" ry="1"/>
<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -87.3724 281.0121)" class="st3" cx="280.848" cy="241.41" rx="1" ry="1"/>
</g>
<path class="st2" d="M305.545,234.594c0,0-0.419-0.671-1.043-1.321c-0.609-0.659-1.394-1.314-2.29-1.839
c-0.324-0.177-0.659-0.342-1.002-0.491c0.99-1.812,3.258-3.399,5.015-3.399c0.001,0,0.001,0,0.001,0c0.552,0,1-0.447,1-1
s-0.447-1-1-1c-0.001,0-0.001,0-0.002,0c-2.838,0-5.81,2.428-6.952,4.77c-0.932-0.246-2.032-0.454-3.094-0.316
c-0.545,0.047-1.058,0.2-1.551,0.358c-0.479,0.18-0.92,0.386-1.321,0.6c-0.382,0.23-0.753,0.41-1.079,0.646
c-0.308,0.219-0.654,0.468-0.821,0.554c-0.391,0.232-0.648,0.342-0.648,0.342l-0.009,0.003c-1.069,0.459-1.817,1.523-1.816,2.76
c0.002,1.656,1.347,2.997,3.003,2.994s2.997-1.347,2.994-3.003c0,0,0-0.28,0.058-0.732c0.041-0.267,0.028-0.39,0.069-0.621
c0.01-0.226,0.124-0.477,0.233-0.744c0.067-0.116,0.134-0.249,0.217-0.379c0.089-0.111,0.181-0.234,0.287-0.353
c0.222-0.205,0.483-0.416,0.802-0.536c0.316-0.132,0.677-0.199,1.063-0.187c0.387,0.017,0.781,0.09,1.213,0.23l0.314,0.098
l0.329,0.12c0.195,0.09,0.343,0.153,0.518,0.258c0.345,0.199,0.641,0.451,0.894,0.715c0.492,0.549,0.767,1.178,0.849,1.739
c0.056,0.273,0.035,0.545,0.024,0.768c-0.008,0.223-0.07,0.424-0.114,0.579c-0.097,0.313-0.211,0.478-0.211,0.478
c-0.344,0.59-0.913,0.466-0.504,1.631L305.545,234.594z"/>
</g>
<g>
<path class="st3" d="M283.51,242.235c0,0,0.636-0.265,1.423-0.816c0.803-0.536,1.757-1.358,2.606-2.276
c0.851-0.916,1.596-1.93,2.053-2.782c0.478-0.834,0.677-1.5,0.677-1.5c0.264-0.882,1.193-1.383,2.075-1.119
c0.882,0.264,1.383,1.193,1.119,2.075c-0.151,0.505-0.528,0.888-0.982,1.071c0,0-0.646,0.256-1.435,0.805
c-0.81,0.53-1.755,1.359-2.594,2.287c-0.841,0.925-1.577,1.947-2.041,2.794c-0.48,0.832-0.689,1.488-0.689,1.488
c-0.277,0.87-1.206,1.351-2.077,1.075c-0.87-0.277-1.351-1.206-1.075-2.077C282.723,242.78,283.08,242.416,283.51,242.235z"/>
</g>
<g id="tormoz_front">
<g>
<path class="st5" d="M476.648,240.727l7.159-3.572c0.984-0.491,1.388-1.698,0.897-2.683l0,0
c-0.491-0.984-1.698-1.388-2.683-0.897l-7.159,3.572c-0.984,0.491-1.388,1.698-0.897,2.683l0,0
C474.457,240.815,475.664,241.219,476.648,240.727z"/>
<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -56.6651 237.4861)" class="st3" cx="475.644" cy="238.994" rx="1" ry="1"/>
<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -54.2761 240.3562)" class="st3" cx="482.929" cy="235.359" rx="1" ry="1"/>
</g>
<path class="st0" d="M472.077,226.041c0,0,0.041-0.252,0.077-0.685c0.003-0.142,0.056-0.315,0.034-0.542
c-0.013-0.232-0.032-0.494-0.105-0.766c-0.084-0.26-0.166-0.563-0.34-0.833c-0.163-0.277-0.375-0.554-0.639-0.813
c-0.539-0.509-1.306-0.905-2.152-1.154c-0.202-0.055-0.45-0.135-0.621-0.158l-0.701-0.125c-0.403-0.029-0.8-0.048-1.203-0.009
c-0.393,0.04-0.76,0.119-1.085,0.241c-0.325,0.117-0.608,0.258-0.84,0.425c-0.466,0.326-0.611,0.703-0.71,0.962l-1.244-3.19
c0.369-0.156,0.74-0.219,0.99-0.275c0.444-0.078,0.908-0.159,1.394-0.188c0.487-0.02,0.987-0.017,1.492,0.019
c0.497,0.035,1.023,0.11,1.557,0.2l0.697,0.147c0.299,0.062,0.511,0.117,0.772,0.184c0.997,0.265,2.013,0.646,2.923,1.207
c0.448,0.287,0.881,0.598,1.241,0.959c0.361,0.357,0.689,0.719,0.956,1.086c0.248,0.372,0.49,0.714,0.66,1.038
c0.178,0.322,0.332,0.65,0.456,0.91c0.193,0.391,0.323,0.61,0.323,0.61c0.603,1.009,0.274,2.317-0.735,2.92
c-1.009,0.603-2.317,0.274-2.92-0.735C472.083,227.03,472,226.519,472.077,226.041z"/>
<g>
<path class="st3" d="M480.252,235.605c0,0-0.533-0.436-1.129-1.19c-0.616-0.744-1.294-1.804-1.844-2.927
c-0.553-1.122-0.975-2.306-1.169-3.254c-0.218-0.936-0.219-1.631-0.219-1.631c0-0.921-0.746-1.667-1.667-1.667
c-0.92,0-1.667,0.746-1.667,1.667c0,0.527,0.251,1.002,0.634,1.308c0,0,0.545,0.431,1.144,1.182
c0.624,0.74,1.292,1.806,1.829,2.935c0.54,1.128,0.952,2.317,1.154,3.262c0.222,0.935,0.234,1.624,0.234,1.624
c0.016,0.913,0.768,1.641,1.681,1.625c0.913-0.016,1.641-0.768,1.625-1.681C480.85,236.353,480.612,235.902,480.252,235.605z"/>
</g>
</g>
<g id="sedlo">
<rect x="302.547" y="205.617" transform="matrix(0.9322 -0.362 0.362 0.9322 -57.1172 124.9964)" class="st3" width="5" height="18.645"/>
<path class="st6" d="M285.492,205.5h-8.367c-0.552,0-1-0.448-1-1s0.448-1,1-1h8.367c5.497,0,9.62-6.465,9.661-6.531
c0.294-0.467,0.91-0.608,1.378-0.316c0.467,0.293,0.61,0.909,0.317,1.377C296.657,198.335,292.103,205.5,285.492,205.5z"/>
<path class="st5" d="M274.5,204.417c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.03,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,204.416,274.517,204.417,274.5,204.417z"/>
<path class="st5" d="M274.5,203.204c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,203.203,274.517,203.204,274.5,203.204z"/>
<path class="st5" d="M274.5,201.991c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,201.99,274.517,201.991,274.5,201.991z"/>
<path class="st5" d="M274.5,200.778c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
c0.272-0.023,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,200.777,274.517,200.778,274.5,200.778z"/>
<path class="st5" d="M274.5,199.565c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,199.564,274.517,199.565,274.5,199.565z"/>
<path class="st5" d="M274.5,198.352c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,198.351,274.517,198.352,274.5,198.352z"/>
<path class="st5" d="M274.5,197.139c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,197.138,274.517,197.139,274.5,197.139z"/>
<path class="st5" d="M274.5,195.926c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
C274.534,195.925,274.517,195.926,274.5,195.926z"/>
<path class="st5" d="M274.5,194.713c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
C274.534,194.712,274.517,194.713,274.5,194.713z"/>
<path class="st5" d="M274.5,193.5c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
C274.534,193.499,274.517,193.5,274.5,193.5z"/>
<path class="st6" d="M287.59,194.377c0,0,0.292,0.024,0.804,0.067c0.257,0.023,0.569,0.05,0.927,0.082
c0.376,0.055,0.8,0.117,1.263,0.185c0.469,0.065,0.949,0.189,1.477,0.295c0.525,0.106,1.068,0.289,1.641,0.444
c0.559,0.202,1.154,0.387,1.734,0.654c0.292,0.132,0.587,0.266,0.883,0.4l0.867,0.474c0.572,0.332,1.141,0.696,1.667,1.103
c0.539,0.395,1.027,0.838,1.499,1.278c0.915,0.902,1.666,1.852,2.246,2.702c0.564,0.855,0.976,1.598,1.244,2.121
c0.259,0.526,0.407,0.827,0.407,0.827c0.737,1.497,0.121,3.309-1.376,4.046c-1.497,0.737-3.309,0.121-4.046-1.376
c-0.102-0.207-0.178-0.419-0.229-0.635l-0.011-0.052c0,0-0.057-0.245-0.157-0.674c-0.106-0.426-0.276-1.021-0.528-1.713
c-0.265-0.682-0.624-1.452-1.109-2.231c-0.256-0.377-0.523-0.774-0.843-1.143c-0.306-0.382-0.659-0.741-1.03-1.091l-0.573-0.514
l-0.616-0.469c-0.407-0.319-0.857-0.576-1.278-0.853c-0.447-0.235-0.866-0.498-1.298-0.692c-0.429-0.191-0.836-0.405-1.217-0.548
c-0.384-0.151-0.736-0.289-1.048-0.411c-0.338-0.11-0.634-0.205-0.877-0.284c-0.489-0.156-0.769-0.244-0.769-0.244
c-0.471-0.15-0.732-0.653-0.582-1.125C286.79,194.593,287.183,194.343,287.59,194.377z"/>
<path class="st5" d="M306.093,209.853l-5.311,2.123c-0.461,0.184-0.989-0.042-1.174-0.503l-1.711-4.281
c-0.184-0.461,0.042-0.989,0.503-1.174l5.311-2.123c0.461-0.184,0.989,0.042,1.174,0.503l1.711,4.281
C306.781,209.141,306.555,209.669,306.093,209.853z"/>
<path class="st7" d="M271.014,194.342c-1.465,0.238-2.868-0.682-3.208-2.126c-0.967-4.103-1.359-8.154,0.694-9.591
c2.5-1.75,4.55-2,7.275-2s10.725,2.75,19.35,2.125S315,179.5,319,179.5s9.928,0.422,12.625,4.5c1.708,2.583,2.5,4.875,1.125,6
c-1.61,1.317-9.625,0.625-18.875,4.875c-6.089,2.798-10.932,5.649-13.531,7.272c-0.956,0.597-2.201,0.256-2.743-0.733
c-1-1.824-3.537-4.442-9.975-6.164C280.418,193.323,274.278,193.811,271.014,194.342z"/>
<path class="st5" d="M304.919,223.297c-1.799,0.725-2.66,2.764-1.939,4.554c0.725,1.799,2.755,2.663,4.554,1.939l6.493-2.616
l-2.616-6.493L304.919,223.297z M306.881,228.166c-0.9,0.362-1.915-0.07-2.277-0.969c-0.359-0.89,0.07-1.915,0.969-2.277
c0.89-0.359,1.918,0.079,2.277,0.969C308.212,226.789,307.771,227.808,306.881,228.166z"/>
<circle class="st3" cx="306.227" cy="226.545" r="1.75"/>
</g>
<g id="rama">
<path class="st4" d="M230.922,295.308L230.922,295.308l80.55-65.536l3.155,3.879l-76.672,62.38
C235.814,297.774,232.665,297.45,230.922,295.308z"/>
<rect x="322.381" y="225.473" transform="matrix(0.9254 -0.379 0.379 0.9254 -76.5191 143.3384)" class="st4" width="7" height="81.175"/>
<path class="st4" d="M443.035,169.136c0,0,3.577,9.265,8.943,23.162c2.706,6.939,5.864,15.035,9.247,23.709
c1.691,4.337,3.439,8.818,5.215,13.372c1.771,4.556,3.582,9.179,5.495,13.762l1.425,3.44c0.441,1.045,0.973,2.199,1.482,3.29
c0.997,2.224,2.06,4.409,3.119,6.566c2.129,4.294,4.388,8.485,7.004,12.022c2.746,3.577,5.737,6.945,8.504,10.182
c2.805,3.209,5.456,6.242,7.904,9.043c9.839,11.176,16.398,18.627,16.398,18.627l-2.042,1.884c0,0-1.719-1.794-4.727-4.934
c-1.5-1.573-3.322-3.483-5.412-5.674c-2.096-2.186-4.413-4.696-6.959-7.418c-2.532-2.738-5.275-5.705-8.176-8.843
c-1.438-1.586-2.916-3.216-4.426-4.881c-0.754-0.851-1.515-1.71-2.284-2.578c-0.748-0.882-1.511-1.712-2.275-2.716
c-3.031-3.877-5.459-8.139-7.796-12.529c-1.16-2.198-2.224-4.458-3.269-6.739c-0.509-1.163-0.993-2.27-1.489-3.521l-1.34-3.473
c-1.775-4.638-3.652-9.235-5.512-13.755c-1.854-4.522-3.679-8.973-5.446-13.28c-3.532-8.614-6.829-16.654-9.655-23.546
c-5.698-13.764-9.497-22.94-9.497-22.94L443.035,169.136z"/>
<rect x="357.208" y="257.429" transform="matrix(0.6315 -0.7754 0.7754 0.6315 -48.2292 420.3728)" class="st4" width="121.918" height="7"/>
<path class="st4" d="M359.333,294c-15.566,0-29.331-11.209-29.909-11.686l3.816-4.63c0.125,0.103,12.714,10.316,26.093,10.316
c12.561,0,25.665-13.077,31.076-25.719l0.067-0.158c5.724-13.375,23.142-54.076,34.025-67.512
c8.907-10.995,19.791-13.899,20.25-14.017l1.496,5.811c-0.084,0.022-9.479,2.597-17.084,11.983
c-6.873,8.484-18.034,30.722-33.171,66.096l-0.068,0.158C389.833,278.874,374.939,294,359.333,294z"/>
</g>
<g id="tros">
<path class="st2" d="M384.511,310.318l-0.771-0.637c0.63-0.764,63.196-76.643,80.892-100.728
c16.055-21.851,19.178-55.031,15.26-70.582c-3.871-15.36-14.15-21.748-20.235-21.373c-3.911,0.24-8.325,6.017-11.548,10.235
c-1.682,2.202-3.01,3.94-4.032,4.672c-2.843,2.037-5.122,1.359-8.276,0.422c-0.379-0.113-0.773-0.23-1.187-0.348l0.275-0.962
c0.416,0.119,0.813,0.237,1.195,0.351c3.098,0.921,4.965,1.477,7.41-0.276c0.9-0.646,2.253-2.416,3.819-4.467
c3.526-4.615,7.914-10.358,12.282-10.626c6.421-0.395,17.256,6.213,21.265,22.127c3.967,15.743,0.814,49.32-15.422,71.418
C447.725,233.653,385.141,309.554,384.511,310.318z"/>
<path class="st2" d="M444.065,170.664l-0.563-0.827c0.007-0.004,0.659-0.449,1.681-1.285c3.207-2.621,9.06-8.214,12.227-16.235
c3.637-9.215,2.241-14.905,0.874-18.384c-1.095-2.787-3.132-7.974-14.62-10.822c-10.841-2.688-29.352,2.075-29.538,2.124
l-0.252-0.968c0.769-0.2,18.942-4.875,30.03-2.126c10.537,2.613,13.586,7.036,15.312,11.428
c1.428,3.636,2.892,9.573-0.876,19.116c-3.25,8.232-9.241,13.96-12.523,16.643C444.757,170.192,444.093,170.645,444.065,170.664
z"/>
<path class="st2" d="M470.737,221.422c-6.604-11.103-23.22-51.689-23.387-52.098l0.926-0.378
c0.167,0.408,16.753,40.925,23.32,51.964L470.737,221.422z"/>
<path class="st4" d="M373.011,299.594l0.005-0.024l-0.386-0.025c-1.081-0.135-2.179-0.213-3.296-0.213h0l-132.456-8.546
c-0.617-0.073-1.24-0.121-1.877-0.121c-8.745,0-15.833,7.089-15.833,15.833c0,7.916,5.816,14.456,13.404,15.628l-0.002,0.02
l130.464,29.093l0.001-0.004c2.019,0.496,4.127,0.764,6.299,0.764c14.544,0,26.333-11.79,26.333-26.333
C395.667,312.372,385.813,301.384,373.011,299.594z M336.505,314.902c-0.079,0.771-0.725,1.339-1.478,1.333
c-0.051,0-0.103-0.004-0.154-0.009l-91.684-10.329c0.023,0.257,0.039,0.516,0.039,0.779c0,0.76-0.109,1.493-0.296,2.192
l91.473,12.624c0.815,0.112,1.391,0.869,1.286,1.69c-0.098,0.768-0.758,1.32-1.51,1.295c-0.051-0.002-0.103-0.006-0.154-0.013
l-92.469-12.761c-1.526,2.044-3.954,3.361-6.697,3.337c-4.621-0.041-8.367-3.851-8.367-8.511s3.746-8.404,8.367-8.364
c3.229,0.029,6.025,1.901,7.42,4.614l92.896,10.465C335.995,313.336,336.589,314.078,336.505,314.902z"/>
<path class="st5" d="M229.557,306.651c-0.143,0-0.289-0.021-0.433-0.064l-81.333-24.5c-0.793-0.239-1.243-1.076-1.003-1.869
c0.239-0.793,1.075-1.244,1.869-1.003l81.333,24.5c0.793,0.239,1.243,1.076,1.003,1.869
C230.797,306.232,230.202,306.651,229.557,306.651z"/>
<circle class="st5" cx="517.471" cy="307.166" r="3.5"/>
<circle class="st5" cx="234.667" cy="306.5" r="4"/>
<polygon class="st4" points="467.535,230.287 461.867,232.754 459.535,226.866 465.202,224.4 "/>
<path class="st0" d="M459.07,226.998c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
C459.333,226.973,459.201,226.998,459.07,226.998z"/>
<path class="st0" d="M462.034,234.55c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
C462.297,234.525,462.165,234.55,462.034,234.55z"/>
<polygon class="st4" points="446.285,177.032 440.617,179.498 438.285,173.611 443.952,171.144 "/>
<path class="st0" d="M437.57,173.274c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l10-3.988
c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-10,3.988
C437.833,173.249,437.701,173.274,437.57,173.274z"/>
<path class="st0" d="M440.784,181.294c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
C441.047,181.27,440.915,181.294,440.784,181.294z"/>
<g id="pedali_1_">
<g id="pedali">
<g>
<circle class="st3" cx="368.5" cy="325" r="14.5"/>
<path class="st5" d="M368.5,340c-8.271,0-15-6.729-15-15s6.729-15,15-15c8.271,0,15,6.729,15,15S376.771,340,368.5,340z
M368.5,311c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S376.22,311,368.5,311z"/>
</g>
<g>
<circle class="st0" cx="368.5" cy="325" r="10.625"/>
</g>
<g>
<circle class="st5" cx="368.5" cy="325" r="6.75"/>
</g>
</g>
<g>
<path class="st11" id="motionPath" d="M414.07,325c0,12.584-5.101,23.976-13.347,32.223c-8.247,8.247-19.639,13.347-32.223,13.347
s-23.976-5.101-32.223-13.347c-8.247-8.247-13.347-19.639-13.347-32.223s5.101-23.976,13.347-32.223
c8.247-8.247,19.639-13.347,32.223-13.347s23.976,5.101,32.223,13.347C408.969,301.024,414.07,312.416,414.07,325z"/>
<path class="st3" id="pedal_a" d="M407.688,348.412l-41.117-19.84c-1.981-0.956-2.82-3.359-1.864-5.341l0,0c0.956-1.981,3.359-2.82,5.341-1.864
l41.117,19.84c1.981,0.956,2.82,3.359,1.864,5.341v0C412.073,348.529,409.67,349.368,407.688,348.412z"/>
<circle class="st5" cx="368.5" cy="325" r="2.938"/>
</g>
<g id="pedal" transform="translate(-409.518, -344.854)">
<path class="st0" d="M419.783,344.066l-15.02,9.92c-2.295,1.516-5.412,0.878-6.928-1.417l0,0
c-1.516-2.295-0.878-5.412,1.417-6.928l15.02-9.92c2.295-1.516,5.412-0.878,6.928,1.417l0,0
C422.715,339.433,422.078,342.55,419.783,344.066z"/>
<circle class="st3" cx="409.518" cy="344.854" r="2.938"/>
</g>
</g>
<defs>
<pattern id="pattern" x="0" y="0" width="750" height="500" patternUnits="userSpaceOnUse" >
<path class="st8" d="M741.936,284.582v1.411h-3.629v-3.83h-3.628v-4.839h-13.509v3.025h-2.419v2.621h-2.419v-12.904h-5.645v2.017
h-8.872v2.823h-2.823v-4.234h-13.709v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.662v-2.218h-2.419v3.226h-2.823v12.702
h-3.226v-13.71h-2.419v-2.419h-3.226v2.822h-1.613v7.662h-1.412v9.879h-2.017v-5.444h-2.419v-38.106h-2.015v-4.234h-17.743v4.435
h-1.411v-15.323h-7.057v-2.419h-4.84v3.024h-2.218v30.646h-4.011V235.8v-0.588v-1.47h-5.071v1.47h-7.79v-1.47h-1.47v1.47h-2.94
v-1.102h-8.451v1.102h-3.748v-10.877h-3.087v-1.176h-3.013v1.176h-1.029v-0.588h-2.646v0.588h-7.643v5.108h-12.861v0.919h-1.102
v-1.837h-1.911v1.837h-3.601v-0.735h-2.499v0.735h-7.202v4.85h-0.955v5.732h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911
h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911h0.955v8.367h-5.009v3.226h-0.587c-1.808-12.568-3.408-27.552-4.71-43.757
c0.901-0.131,2.148-2.217,2.148-3.477c0-1.3-0.174-1.222-1.342-1.221c-0.387,0-0.791,0.201-1.133,0.522
c-0.091-1.193-0.18-2.392-0.268-3.596c0.455-0.506,0.863-1.371,0.863-1.966c0-0.886-0.118-0.833-0.915-0.832
c-0.048,0-0.097,0.012-0.146,0.021c-0.936-13.342-1.669-27.294-2.151-41.247h0.054v-1.419h-0.101
c-0.014-0.433-0.029-0.867-0.043-1.3h1.641v-1.025h-1.674c-0.123-3.937-0.226-7.87-0.308-11.784h1.076v-0.67h-1.497v-1.511h1.497
v-0.67h-1.497v-1.511h1.536v-0.67h-1.536v-1.511h1.536v-0.67h-1.536h-0.927l0.001-4.056h0.927v-10.329h0.551v-0.63h-0.551v-2.446
h-1.065v-8.983h-0.591v8.983h-1.025v2.446h-0.67v0.63h0.67v10.329h0.808l-0.001,4.056h-0.808h-1.536v0.67h1.536v1.511h-1.536v0.67
h1.536v1.511h-1.576v0.67h1.576v1.511h-1.576v0.67h1.016c-0.082,3.914-0.184,7.846-0.307,11.784h-1.615v1.025h1.582
c-0.554,17.23-1.495,34.521-2.735,50.72c-0.198-0.074-0.399-0.117-0.596-0.117c-1.462-0.001-1.679-0.1-1.679,1.527
c0,1.209,0.919,3.03,1.856,3.886c-0.709,8.661-1.503,16.961-2.368,24.713H493.54v5.041h-9.678v17.541h-6.25v-2.117h-2.557v-36.838
v-4.859h-0.572v-1.262h-7.458v-13.341v-6.941h-0.817v-1.803h-75.396v-0.374h1.565v-2.45l-5.308-2.041h-2.382l-1.361,2.041v2.45
h1.633v0.374h-24.633v1.803h-2.722v-7.281h5.852l5.512-0.68v-0.68h-9.635l-0.367-1.021h-4.287l-0.367,1.021h-1.878v1.361h4.015
v7.281h-0.885v6.941h0.272l-0.06,1.803h-0.195c-0.365,0-0.663,0.299-0.663,0.664c0,0.365,0.298,0.663,0.663,0.663h0.151
l-0.313,9.362c-0.287,0.073-0.501,0.332-0.501,0.641c0,0.293,0.194,0.541,0.459,0.628l-1.323,39.607l-1.619-0.023v7.088h-4.03
l-2.85,0.112v-10.143h0.975c0.288,0,0.367-0.397,0.1-0.506l-1.076-0.442v-0.004h-0.01l-6.17-2.536v-0.945h-0.165v-1.685h0.165
v-0.586h-0.266v-0.909h0.001l-0.597-0.634v-0.382c0.079-0.032,0.134-0.11,0.134-0.2c0-0.091-0.056-0.168-0.134-0.2v-0.111
c0-0.045-0.037-0.082-0.082-0.082c-0.046,0-0.083,0.037-0.083,0.082v0.111c-0.079,0.032-0.134,0.11-0.134,0.2
c0,0.091,0.055,0.168,0.134,0.2v0.382l-0.596,0.634h0.003v0.909h-0.267v0.586h0.165v1.685h-0.165v0.879h-9.089v-9.489l0.339-0.142
v-0.234l0.412-0.165l0.179-1.333l-1.195-0.385c0,0,0.027-0.508-0.083-0.893c-0.11-0.385-1.951-2.473-2.102-3.023
c-0.151-0.55-0.137-2.322-0.247-2.652c-0.11-0.33-0.687-0.962-1.237-1.759c-0.55-0.797-0.783-1.223-0.948-1.772
c-0.12-0.401-0.307-2.15-0.398-3.065v-0.651c0.077-0.024,0.133-0.094,0.133-0.179c0-0.084-0.056-0.155-0.133-0.179v-0.525
c0.059-0.022,0.102-0.079,0.102-0.146c0-0.067-0.042-0.124-0.102-0.146v-0.528c0.045-0.021,0.076-0.065,0.076-0.118
c0-0.052-0.031-0.097-0.076-0.118v-0.267c0-0.03-0.025-0.055-0.055-0.055s-0.055,0.025-0.055,0.055v0.267
c-0.045,0.021-0.076,0.066-0.076,0.118c0,0.052,0.031,0.097,0.076,0.118v0.528c-0.059,0.022-0.102,0.079-0.102,0.146
c0,0.067,0.042,0.124,0.102,0.146v0.525c-0.077,0.024-0.133,0.094-0.133,0.179c0,0.085,0.056,0.155,0.133,0.179v0.651
c-0.092,0.915-0.278,2.664-0.398,3.065c-0.165,0.55-0.398,0.976-0.948,1.772c-0.549,0.797-1.127,1.429-1.237,1.759
s-0.096,2.102-0.247,2.652c-0.151,0.549-1.992,2.638-2.102,3.023c-0.11,0.385-0.082,0.893-0.082,0.893l-1.195,0.385l0.179,1.333
l0.412,0.165v0.234l0.339,0.142v15.608l-8.287,4.706c-0.325,0.185-0.194,0.68,0.18,0.68h-0.503c-0.635,0-1.154,0.519-1.154,1.154
v0.147c0,0.635,0.519,1.154,1.154,1.154h0.728v2.448h-2.419v2.621h-2.419v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234h-13.709
v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.075c-0.005-0.233-0.009-0.465-0.014-0.698
c-0.025-1.179-0.061-2.358-0.073-3.537c-0.004-0.422,0.064-0.845,0.062-1.268c-0.001-0.16-0.112-0.318-0.168-0.478
c-0.031-0.088-0.069-0.178-0.074-0.269c-0.007-0.137,0.023-0.275,0.021-0.412c-0.021-1.167-0.042-2.333-0.074-3.5
c-0.003-0.098-0.083-0.196-0.139-0.287c-0.013-0.021-0.104-0.024-0.107-0.017c-0.083,0.239-0.268,0.108-0.397,0.092
c-0.234-0.028-0.221-0.26-0.249-0.421c-0.013-0.078,0.074-0.203,0.151-0.259c0.195-0.143,0.399-0.285,0.62-0.378
c0.274-0.115,0.355-0.327,0.353-0.579c-0.002-0.298-0.026-0.599-0.07-0.894c-0.12-0.801-0.272-1.597-0.38-2.4
c-0.14-1.033-0.223-2.074-0.384-3.104c-0.082-0.523-0.284-1.027-0.428-1.541c-0.218-0.777-0.408-1.565-0.937-2.211
c-0.049-0.061-0.08-0.143-0.101-0.22c-0.112-0.404-0.226-0.808-0.325-1.216c-0.152-0.628-0.224-1.261-0.049-1.899
c0.06-0.219,0.117-0.438,0.178-0.657c0.107-0.382,0.196-0.771,0.331-1.143c0.22-0.608,0.794-0.908,1.224-1.332
c0.405-0.4,0.836-0.774,1.238-1.177c0.295-0.295,0.549-0.63,0.845-0.923c0.291-0.288,0.587-0.586,0.929-0.804
c0.425-0.27,0.682-0.663,0.904-1.076c0.274-0.512,0.355-0.598,0.929-0.532c0.097,0.011,0.244,0.092,0.264,0.168
c0.039,0.147,0.021,0.323-0.133,0.36c0.034,0.105,0.095,0.203,0.094,0.3c-0.009,1.085-0.032,2.171-0.043,3.256
c-0.013,1.305-0.019,2.611-0.028,3.917c-0.001,0.089-0.012,0.186,0.018,0.265c0.031,0.081,0.096,0.182,0.169,0.205
c0.054,0.017,0.176-0.057,0.21-0.122c0.071-0.133,0.122-0.284,0.15-0.433c0.256-1.336,0.531-2.669,0.75-4.01
c0.244-1.494,0.457-2.994,0.643-4.497c0.118-0.955,0.166-1.919,0.238-2.88c0.016-0.218,0.039-0.446-0.006-0.655
c-0.107-0.5-0.38-0.739-0.785-0.495c-0.384,0.232-0.767,0.502-0.798,1.027c-0.003,0.055-0.018,0.124-0.054,0.159
c-0.295,0.286-0.331,0.65-0.333,1.03c-0.001,0.15-0.085,0.26-0.242,0.244c-0.529-0.056-0.806,0.286-1.086,0.646
c-0.096,0.123-0.235,0.212-0.361,0.31c-0.074,0.058-0.162,0.097-0.238,0.153c-0.509,0.37-1.014,0.746-1.525,1.114
c-0.469,0.337-1.019,0.575-1.297,1.138c-0.052,0.106-0.204,0.197-0.328,0.229c-0.28,0.073-0.487,0.229-0.692,0.424
c-0.289,0.275-0.567,0.594-1.005,0.635c-0.319,0.03-0.593,0.126-0.826,0.36c-0.149,0.15-0.339,0.087-0.384-0.123
c-0.033-0.155-0.037-0.323-0.015-0.48c0.047-0.328,0.13-0.651,0.179-0.979c0.112-0.766-0.085-1.163-0.74-1.561
c-0.113-0.068-0.213-0.165-0.301-0.264c-0.189-0.214-0.409-0.182-0.521,0.076c-0.037,0.085-0.108,0.155-0.164,0.232
c-0.226,0.312-0.529,0.594-0.549,1.003c-0.025,0.522,0.003,1.047,0,1.571c-0.001,0.124-0.036,0.247-0.063,0.419
c-0.081-0.072-0.121-0.09-0.124-0.113c-0.049-0.377-0.205-0.71-0.406-1.027c-0.017-0.026-0.022-0.061-0.026-0.093
c-0.078-0.576-0.201-1.151-0.221-1.73c-0.021-0.587-0.117-1.157-0.205-1.733c-0.135-0.879-0.218-1.766-0.348-2.646
c-0.076-0.512-0.266-0.97-0.797-1.191c-0.054-0.022-0.092-0.082-0.16-0.147c0.077-0.028,0.106-0.046,0.135-0.048
c0.139-0.012,0.313,0.045,0.365-0.152c0.05-0.186-0.102-0.263-0.212-0.372c-0.076-0.076-0.141-0.203-0.144-0.308
c-0.035-1.28-0.063-2.56-0.083-3.84c-0.013-0.819-0.008-1.638-0.014-2.457c-0.008-0.963-0.016-1.927-0.031-2.89
c-0.002-0.151-0.007-0.319-0.073-0.447c-0.124-0.243-0.282-0.473-0.448-0.691c-0.167-0.22-0.453-0.224-0.624-0.005
c-0.221,0.283-0.401,0.596-0.391,0.972c0.017,0.68,0.052,1.359,0.068,2.039c0.031,1.256,0.053,2.512,0.08,3.768
c0.024,1.142,0.043,2.284,0.083,3.426c0.009,0.252,0.021,0.447-0.251,0.582c-0.19,0.094-0.168,0.295,0.034,0.362
c0.198,0.066,0.219,0.193,0.207,0.354c-0.008,0.104-0.026,0.209-0.053,0.31c-0.173,0.629,0.208,1.056,0.541,1.501
c0.022,0.029,0.069,0.041,0.106,0.057c0.4,0.185,0.476,0.308,0.326,0.719c-0.194,0.53-0.233,1.082-0.224,1.628
c0.017,1.024,0.096,2.048,0.15,3.072c0.003,0.048,0.014,0.096,0.023,0.144c0.085,0.47,0.197,0.937,0.247,1.411
c0.078,0.726,0.262,1.42,0.572,2.075c0.473,0.999,0.751,2.052,0.918,3.138c0.022,0.141-0.033,0.3-0.075,0.444
c-0.154,0.528-0.324,1.05-0.472,1.58c-0.045,0.162-0.02,0.342-0.063,0.505c-0.257,0.969-0.575,1.926-0.531,2.95
c0.001,0.024-0.007,0.048-0.009,0.072c-0.089,0.784,0.031,1.525,0.372,2.247c0.135,0.287,0.177,0.643,0.17,0.966
c-0.011,0.468-0.1,0.934-0.164,1.399c-0.114,0.824-0.034,1.635,0.171,2.433c0.159,0.618,0.167,1.199-0.267,1.719
c-0.04,0.048-0.075,0.112-0.085,0.173c-0.053,0.318-0.129,0.636-0.14,0.956c-0.022,0.663-0.007,1.328-0.01,1.992
c-0.001,0.195,0.017,0.395-0.022,0.582c-0.053,0.256-0.157,0.501-0.232,0.753c-0.149,0.502-0.308,1.002-0.432,1.51
c-0.045,0.185-0.008,0.393,0.004,0.59c0.017,0.279,0.045,0.559,0.068,0.838c-0.022,0.004-0.045,0.009-0.067,0.014
c-0.041-0.07-0.081-0.14-0.152-0.262c-0.042,0.231-0.098,0.416-0.107,0.604c-0.029,0.563-0.041,1.128-0.057,1.692
c-0.013,0.459-0.026,0.919-0.037,1.378h-7.208v6.311c-0.561,0.024-1.121,0.058-1.682,0.087c-0.625,0.033-1.25,0.069-1.875,0.096
c-0.499,0.022-0.998,0.033-1.497,0.051c-0.055,0.002-0.109,0.027-0.163,0.028c-0.209,0.004-0.422,0.029-0.63,0.028v-32.61h-2.015
v-4.234H212.06v4.435h-1.412v-15.323h-2.733v-2.419h-9.163v3.024h-2.218v30.646h-4.233v-12.097h-1.613v-8.468l-1.008-1.008v-15.323
h-2.419v-7.258h-8.066v6.25h-2.017v2.823h-1.814v16.532h-2.62v-7.46h-19.76v9.678h-5.04v-1.815h-3.428v2.823h-6.653V237h-5.444
v-3.428h-9.595v2.621h-5.527v31.049h-5.848v3.226h-3.023v2.924h-7.864v6.956h-1.814v-27.421H82.217v5.041h-9.678v17.541h-6.25
v-2.117h-4.436v-3.125H49.756v3.125h-6.25v2.52h-2.421V250.71H19.714v27.421h-5.242v-10.887H5.6v13.307H0v15.525v205.203h750
V296.075v-11.493H741.936z M248.149,269.168c-0.001-0.077,0.313-0.153,0.784-0.23L248.149,269.168z M253.999,267.453
c0-0.003,0-0.006,0-0.009h0.031L253.999,267.453z M357.06,270.503l1.682-21.568l1.564,21.613L357.06,270.503z M397.815,277.324
l1.441-18.479l1.268,18.479H397.815z M464.167,270.267h-3.088v3.125h-6.25v2.52h-2.421V250.71h-21.371v27.421h-5.242v-10.887h-8.872
v13.307h-5.6v5.444h-3.039v-3.83h-3.628v-4.839h-2.577l-0.66-31.142c0.177-0.065,0.305-0.235,0.305-0.434
c0-0.206-0.137-0.38-0.324-0.44l-0.144-6.562h0.003c0.255,0,0.465-0.209,0.465-0.464c0-0.255-0.209-0.464-0.465-0.464h-0.023
l-0.028-1.262h12.924v4.049h2.62v-1.286h3.716v-2.763h43.7V270.267z M464.167,230.434h-42.461v-0.262h1.096v-1.715l-3.715-1.429
h-1.667l-0.953,1.429v1.715h1.143v0.262h-17.243v1.262h-1.905V226.6h4.096l3.858-0.476v-0.476h-6.745l-0.257-0.715h-3.001
l-0.257,0.715h-1.315v0.953h2.81v5.097h-0.619v4.859h0.191l-0.042,1.262h-0.136c-0.255,0-0.464,0.209-0.464,0.464
c0,0.255,0.209,0.464,0.464,0.464h0.105l-0.219,6.553c-0.201,0.051-0.351,0.233-0.351,0.449c0,0.205,0.136,0.378,0.321,0.44
l-1.04,31.136h-4.713v3.025h-2.419v2.621h-2.42v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234l-6.267-0.088l-0.87-39.736
c0.253-0.094,0.435-0.336,0.435-0.62c0-0.294-0.196-0.543-0.463-0.629l-0.205-9.374h0.004c0.365,0,0.664-0.299,0.664-0.663
c0-0.365-0.299-0.664-0.664-0.664h-0.033l-0.04-1.803h18.463v5.784h3.743v-1.837h5.308v-3.947h75.124V230.434z M473.054,270.267
h-6.029v-33.713h6.029V270.267z M508.883,215.096h1.123v6.68h-1.604C508.568,219.569,508.728,217.34,508.883,215.096z
M508.365,222.249h1.64v6.207h-1.063c0.358-0.332,0.26-1.088,0.251-2.709c-0.005-0.89-0.392-1.686-0.927-2.226
C508.3,223.097,508.333,222.675,508.365,222.249z M508.005,252.928h-2.208V250.5c0.048-0.445,0.095-0.896,0.143-1.343h2.066V252.928
z M508.005,248.684h-2.016c0.228-2.157,0.45-4.351,0.666-6.579h1.349V248.684z M509.779,252.928h-1.302v-3.771h1.302V252.928z
M509.779,248.684h-1.302v-6.579h1.302V248.684z M511.79,273.393h-1.065v-4.323h1.066L511.79,273.393z M511.791,268.597h-1.066
v-6.312h1.067L511.791,268.597z M511.792,261.812h-1.067v-6.581h1.068L511.792,261.812z M511.793,254.758h-1.068v-5.601h1.069
L511.793,254.758z M511.794,248.684h-1.069v-6.579h1.07L511.794,248.684z M511.795,241.632h-5.094
c0.399-4.128,0.779-8.367,1.136-12.702h3.96L511.795,241.632z M511.797,228.457h-1.318v-6.207h1.319L511.797,228.457z
M511.798,221.777h-1.319v-6.68h1.321L511.798,221.777z M511.799,214.623h-2.883c0.212-3.084,0.412-6.201,0.602-9.34h2.283
L511.799,214.623z M511.801,204.81h-2.255c0.122-2.041,0.241-4.089,0.354-6.148h1.902L511.801,204.81z M511.802,198.189h-1.877
c0.052-0.964,0.104-1.93,0.154-2.897h1.724L511.802,198.189z M511.802,194.819h-1.699c0.053-1.023,0.103-2.048,0.153-3.074h1.547
L511.802,194.819z M511.803,191.272h-1.523c0.042-0.864,0.082-1.73,0.122-2.596h1.402L511.803,191.272z M511.803,188.203h-1.38
c0.202-4.416,0.382-8.851,0.535-13.286h0.848L511.803,188.203z M511.806,173.498h-0.802c0.014-0.433,0.029-0.867,0.043-1.3h0.759
V173.498z M511.806,171.173h-0.726c0.123-3.937,0.226-7.87,0.307-11.784h0.42L511.806,171.173z M519.222,254.747
c0,0.004,0.001,0.007,0.001,0.011h-0.001V254.747z M519.222,255.231h0.056c0.258,2.244,0.522,4.439,0.792,6.581h-0.847V255.231z
M519.222,262.284h0.906c0.274,2.16,0.553,4.267,0.838,6.312h-1.744V262.284z M518.557,248.684h-2.016v-6.579h1.349
C518.107,244.333,518.329,246.527,518.557,248.684z M516.345,224.39c-0.008,1.232-0.08,1.836,0.167,2.115
c0.052,0.652,0.105,1.303,0.158,1.952h-2.15v-6.207h1.66C516.234,222.966,516.29,223.678,516.345,224.39z M515.784,216.829
c-0.164,0.261-0.271,0.576-0.273,0.919c-0.007,1.198-0.103,1.53,0.454,1.592c0.059,0.813,0.118,1.628,0.179,2.436h-1.624v-6.68
h1.143C515.702,215.675,515.743,216.252,515.784,216.829z M512.754,159.389h0.404c0.082,3.914,0.184,7.846,0.307,11.784h-0.713
L512.754,159.389z M512.752,172.198h0.747c0.014,0.433,0.028,0.867,0.043,1.3h-0.789L512.752,172.198z M512.751,174.917h0.836
c0.153,4.435,0.333,8.87,0.535,13.286h-1.373L512.751,174.917z M512.749,188.676h1.395c0.04,0.866,0.08,1.732,0.122,2.596h-1.517
L512.749,188.676z M512.749,191.745h1.541c0.05,1.026,0.1,2.051,0.153,3.074h-1.694L512.749,191.745z M512.748,195.292h1.719
c0.05,0.967,0.101,1.933,0.153,2.897h-1.873L512.748,195.292z M512.748,198.662h1.898c0.113,2.059,0.231,4.107,0.354,6.148h-2.253
L512.748,198.662z M512.747,205.283h2.281c0.19,3.139,0.39,6.256,0.602,9.34h-2.884L512.747,205.283z M512.745,215.096h1.302v6.68
h-1.303L512.745,215.096z M512.744,222.249h1.303v6.207h-1.304L512.744,222.249z M512.743,228.93h3.965
c0.358,4.336,0.737,8.574,1.136,12.702h-5.104L512.743,228.93z M513.821,273.393h-1.085l0.001-4.323h1.084V273.393z
M513.821,268.597h-1.084l0.001-6.312h1.083V268.597z M513.821,261.812h-1.083l0.001-6.581h1.082V261.812z M513.821,254.758h-1.082
l0.001-5.601h1.081V254.758z M513.821,248.684h-1.081l0.001-6.579h1.08V248.684z M516.068,273.393h-1.301v-4.323h1.301V273.393z
M516.068,268.597h-1.301v-6.312h1.301V268.597z M516.068,261.812h-1.301v-6.581h1.301V261.812z M516.068,254.758h-1.301v-5.601
h1.301V254.758z M516.068,248.684h-1.301v-6.579h1.301V248.684z M518.749,273.393h-2.208v-4.323h2.208V273.393z M518.749,268.597
h-2.208v-6.312h2.208V268.597z M518.749,261.812h-2.208v-6.581h2.208V261.812z M518.749,254.758h-2.208v-5.601h2.065
c0.047,0.448,0.095,0.899,0.143,1.344V254.758z M519.751,270.469v2.924h-0.529v-4.323h1.809c0.067,0.473,0.134,0.932,0.201,1.399
H519.751z"/>
<rect y="391.463" class="st9" width="750" height="109.815"/>
</pattern>
</defs>
<animate
xlink:href="#pattern"
attributeName="x"
from="750"
to="0"
dur="25s"
begin="0s"
repeatCount="indefinite"
fill="freeze" />
<animateTransform
xlink:href="#anima_wheel_1"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 234 306.649"
to="360 234 306.649"
dur="7s"
begin="0s"
repeatCount="indefinite"
fill="freeze"/>
<animateTransform
xlink:href="#anima_wheel_front"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 517.471 307.166"
to="360 517.471 307.166"
dur="7s"
begin="0s"
repeatCount="indefinite"
fill="freeze"/>
<animateTransform
xlink:href="#pedal_a"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 368.5 325"
to="360 368.5 325"
dur="20s"
begin="0s"
repeatCount="indefinite"
fill="freeze"/>
<animateMotion
xlink:href="#pedal"
dur="20s"
begin="-1.4s"
fill="freeze"
repeatCount="indefinite"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
</div>Run code
Cut to clipboard
文章：JS酷炫红色LED数字时钟 发表时间：2017-12-27, 11:07:13
#690
作者：广西南宁市
Canvas火箭飞行动画特效
<style>
html { overflow: hidden; }
body {
margin: 0;
padding: 0;
overflow: hidden;
color: #333;
background: #01374b;
}
</style>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/e1a69117e6aecb75c3395c448e18f25b"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/c2a59b97857e9d09aa1a7b115ae3c004"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/06a8f1198a7210b3a891b79a4af9242e"></script>
<div id="container"></div>
<script type="text/javascript">
var OutlineShader = {
uniforms: {
offset: { type: 'f', value: 0.3 },
color: { type: 'v3', value: new THREE.Color('#000000') },
alpha: { type: 'f', value: 1.0 }
},
vertexShader: [
"uniform float offset;",
"void main() {",
" vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );",
" gl_Position = projectionMatrix * pos;",
"}"
].join('\n'),
fragmentShader: [
"uniform vec3 color;",
"uniform float alpha;",
"void main() {",
" gl_FragColor = vec4( color, alpha );",
"}"
].join('\n')
};
var container = document.getElementById( 'container' );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.domElement.style.cursor = 'pointer';
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 100000 );
camera.position.set( 0, -6, 3 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.y = 1;
controls.enableDamping = true;
controls.enabled = false;
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x01374b );
scene.fog = new THREE.Fog( scene.background, 10, 20 );
// lights
var aLight = new THREE.AmbientLight( 0x555555 );
scene.add( aLight );
var dLight1 = new THREE.DirectionalLight( 0xffffff, 0.4 );
dLight1.position.set( 0.7, 1, 1 );
scene.add( dLight1 );
// var dlh1 = new THREE.DirectionalLightHelper( dLight1, 0.5 );
// scene.add( dlh1 );
// var gh = new THREE.GridHelper( 2, 10, 0x000000, 0x808080 );
// scene.add( gh );
// -------------------------------------------
var rocketGroup = new THREE.Group();
scene.add( rocketGroup );
var rocket = new THREE.Group();
rocket.position.y = -1.5; // vertically center
rocketGroup.add( rocket );
// -------------------------------------------
// body
var points = [];
points.push( new THREE.Vector2( 0, 0 ) ); // bottom
for ( var i = 0; i < 11; i ++ ) {
var point = new THREE.Vector2(
Math.cos( i * 0.227 - 0.75 ) * 8,
i * 4.0
);
points.push( point );
}
points.push( new THREE.Vector2( 0, 40 ) ); // tip
var rocketGeo = new THREE.LatheGeometry( points, 32 );
var rocketMat = new THREE.MeshToonMaterial({
color: 0xcccccc,
shininess: 1
});
var rocketOutlineMat = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone( OutlineShader.uniforms ),
vertexShader: OutlineShader.vertexShader,
fragmentShader: OutlineShader.fragmentShader,
side: THREE.BackSide,
});
var rocketObj = THREE.SceneUtils.createMultiMaterialObject(
rocketGeo, [ rocketMat, rocketOutlineMat ]
);
rocketObj.scale.setScalar( 0.1 );
rocket.add( rocketObj );
// var wireframe = new THREE.WireframeGeometry( rocketGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// rocketObj.add( line );
// -------------------------------------------
// window
var portalGeo = new THREE.CylinderBufferGeometry( 0.26, 0.26, 1.6, 32 );
var portalMat = new THREE.MeshToonMaterial({ color: 0x90dcff });
var portalOutlineMat = rocketOutlineMat.clone();
portalOutlineMat.uniforms.offset.value = 0.03;
var portal = THREE.SceneUtils.createMultiMaterialObject(
portalGeo, [ portalMat, portalOutlineMat ]
);
portal.position.y = 2;
portal.rotation.x = Math.PI / 2;
rocket.add( portal );
// ------------
var circle = new THREE.Shape();
circle.absarc( 0, 0, 3.5, 0, Math.PI * 2 );
var hole = new THREE.Path();
hole.absarc( 0, 0, 3, 0, Math.PI * 2 );
circle.holes.push( hole );
var tubeExtrudeSettings = {
amount: 17,
steps: 1,
bevelEnabled: false
};
var tubeGeo = new THREE.ExtrudeGeometry( circle, tubeExtrudeSettings );
tubeGeo.computeVertexNormals();
tubeGeo.center();
var tubeMat = new THREE.MeshToonMaterial({
color: 0xff0000,
shininess: 1
});
var tubeOutlineMat = rocketOutlineMat.clone();
tubeOutlineMat.uniforms.offset.value = 0.2;
var tube = THREE.SceneUtils.createMultiMaterialObject(
tubeGeo, [ tubeMat, tubeOutlineMat ]
);
tube.position.y = 2;
tube.scale.setScalar( 0.1 );
rocket.add( tube );
// var wireframe = new THREE.WireframeGeometry( tubeGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// tube.add( line );
// -------------------------------------------
// wing
var shape = new THREE.Shape();
shape.moveTo( 3, 0 );
shape.quadraticCurveTo( 25, -8, 15, -37 );
shape.quadraticCurveTo( 13, -21, 0, -20 );
shape.lineTo( 3, 0 );
var extrudeSettings = {
steps: 1,
amount: 4,
bevelEnabled: true,
bevelThickness: 2,
bevelSize: 2,
bevelSegments: 5
};
var wingGroup = new THREE.Group();
rocket.add( wingGroup );
var wingGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );
wingGeo.computeVertexNormals();
var wingMat = new THREE.MeshToonMaterial({
color: 0xff0000,
shininess: 1,
});
var wingOutlineMat = rocketOutlineMat.clone();
wingOutlineMat.uniforms.offset.value = 1;
var wing = THREE.SceneUtils.createMultiMaterialObject(
wingGeo, [ wingMat, wingOutlineMat ]
);
wing.scale.setScalar( 0.03 );
wing.position.set( .6, 0.9, 0 );
wingGroup.add( wing );
// var wireframe = new THREE.WireframeGeometry( wingGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// wing.add( line );
var wing2 = wingGroup.clone();
wing2.rotation.y = Math.PI;
rocket.add( wing2 );
var wing3 = wingGroup.clone();
wing3.rotation.y = Math.PI / 2;
rocket.add( wing3 );
var wing4 = wingGroup.clone();
wing4.rotation.y = - Math.PI / 2;
rocket.add( wing4 );
// -------------------------------------------
// fire and stars particles
// https://aerotwist.com/tutorials/creating-particles-with-three-js/
// https://aerotwist.com/static/tutorials/creating-particles-with-three-js/demo/
// downloads/paul-lewis-aerotwist/particles-r88
var Particles = function( options ) {
var color = this.color = options.color || 0x333333;
var size = this.size = options.size || 0.4;
var pointCount = this.pointCount = options.pointCount || 40; // 1800
var rangeV = this.rangeV = options.rangeV || 2; // 600
var rangeH = this.rangeH = options.rangeH || 1;
var speed = this.speed = this.speedTarget = options.speed || 0.0005;
THREE.Group.call( this );
// circle texture
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext( '2d' );
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.width / 3;
ctx.beginPath();
ctx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
ctx.fillStyle = '#fff';
ctx.fill();
var texture = new THREE.Texture( canvas );
texture.premultiplyAlpha = true;
texture.needsUpdate = true;
//
var pointsGeo = new THREE.Geometry();
var pointsMat = new THREE.PointsMaterial({
color: color,
size: size,
map: texture,
transparent: true,
depthWrite: false
});
for (var p = 0; p < pointCount; p++) {
var point = new THREE.Vector3(
THREE.Math.randFloatSpread( rangeH ),
THREE.Math.randFloatSpread( rangeV ),
THREE.Math.randFloatSpread( rangeH )
);
point.velocity = new THREE.Vector3( 0, -Math.random() * speed * 100, 0);
pointsGeo.vertices.push( point );
}
var points = this.points = new THREE.Points( pointsGeo, pointsMat );
points.position.y = - rangeV / 2;
points.sortParticles = true;
this.add( points );
}
Particles.prototype = Object.create( THREE.Group.prototype );
Particles.prototype.constructor = Particles;
Particles.prototype.update = function(){
// this.points.rotation.y -= 0.01; // 0.01
var pCount = this.pointCount;
while ( pCount-- ) {
var point = this.points.geometry.vertices[pCount];
// check if we need to reset
if ( point.y < - this.rangeV / 2 ) {
point.y = this.rangeV / 2;
point.velocity.y = 0;
}
// update the velocity
point.velocity.y -= Math.random() * this.speed; // .1
// and the position
point.add( point.velocity );
}
this.points.geometry.verticesNeedUpdate = true;
}
Particles.prototype.updateConstant = function(){
var pCount = this.pointCount;
while ( pCount-- ) {
var point = this.points.geometry.vertices[pCount];
// check if we need to reset
if ( point.y < - this.rangeV / 2 ) {
point.y = this.rangeV / 2;
}
point.y -= this.speed;
}
this.points.geometry.verticesNeedUpdate = true;
}
// orange
var fire = new Particles({
color: 0xff5a00,
size: 0.4,
rangeH: 0.8,
rangeV: 2.5,
pointCount: 50
});
rocket.add( fire );
// yellow
var fire2 = new Particles({
color: 0xffc000,
size: 0.6,
rangeH: 0.5
});
rocket.add( fire2 );
// var box = new THREE.BoxHelper( fire.points );
// fire.add( box );
// -------------------------------------------
// stars
var stars = new Particles({
color: 0xffffff,
size: 0.6,
rangeH: 20,
rangeV: 20,
pointCount: 400,
size: 0.2,
speed: 0.1
});
stars.points.position.y = 0;
scene.add( stars );
// -------------------------------------------
// input
//
var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
// var helper = new THREE.PlaneHelper( plane, 5, 0xffff00 );
// scene.add( helper );
var rocketTarget = new THREE.Vector3();
var cameraTarget = new THREE.Vector3();
cameraTarget.copy( camera.position );
var raycaster = new THREE.Raycaster();
//
var mouse = new THREE.Vector2();
// var targetSphere = new THREE.Mesh(
// new THREE.SphereBufferGeometry( 0.2 ),
// new THREE.MeshPhongMaterial({ color: 0x00ff00 })
// );
// scene.add( targetSphere );
function mousemove(e){
mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
cameraTarget.x = - mouse.x * 1;
cameraTarget.z = 3 + mouse.y * 1;
raycaster.setFromCamera( mouse, camera );
raycaster.ray.intersectPlane( plane, rocketTarget );
// targetSphere.position.copy( rocketTarget );
}
function mousedown(e){
TWEEN.removeAll();
// rotation
var dir = mouse.x < 0 ? -1 : 1;
var tween = new TWEEN.Tween( rocket.rotation )
.to( { y: dir * Math.PI }, 1000 )
.easing( TWEEN.Easing.Quadratic.InOut )
.start();
// scale
var tween = new TWEEN.Tween( rocketGroup.scale )
.to( { y: 0.7 }, 300 )
.easing( TWEEN.Easing.Cubic.Out )
.onComplete(function(){
var tween = new TWEEN.Tween( rocketGroup.scale )
.to( { y: 1.3 }, 300 )
.easing( TWEEN.Easing.Cubic.In )
.onComplete(function(){
var tween = new TWEEN.Tween( rocketGroup.scale )
.to( { y: 1 }, 200 )
.easing( TWEEN.Easing.Cubic.Out )
.start();
})
.start();
})
.start();
stars.speedTarget = 0.3;
renderer.domElement.style.cursor = 'none';
}
function mouseup(e){
stars.speedTarget = 0.1;
renderer.domElement.style.cursor = 'pointer';
}
renderer.domElement.addEventListener('mousemove', mousemove, false);
renderer.domElement.addEventListener('mousedown', mousedown, false);
renderer.domElement.addEventListener('mouseup', mouseup, false);
// -------------------------------------------
window.addEventListener( 'resize', resize, false );
function resize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var clock = new THREE.Clock();
var time = 0;
var angle = THREE.Math.degToRad( 3 );
loop();
function loop() {
requestAnimationFrame( loop );
TWEEN.update();
controls.update();
time += clock.getDelta();
rocketGroup.rotation.y = Math.cos( time * 8 ) * angle;
fire.update();
fire2.update();
stars.updateConstant();
lerp(rocketGroup.position, 'y', rocketTarget.y);
lerp(rocketGroup.position, 'x', rocketTarget.x);
lerp(camera.position, 'x', cameraTarget.x);
lerp(camera.position, 'z', cameraTarget.z);
lerp(stars, 'speed', stars.speedTarget);
renderer.render( scene, camera );
}
function lerp( object, prop, destination ) {
if (object && object[prop] !== destination) {
object[prop] += (destination - object[prop]) * 0.1;
if (Math.abs(destination - object[prop]) < 0.01) {
object[prop] = destination;
}
}
}
</script>Run code
Cut to clipboard
文章：JS酷炫红色LED数字时钟 发表时间：2017-12-27, 11:02:59
#691
作者：广西南宁市
中国人要不是忘性这么大，怎么屹立于世界民族之林
文章：一个明星渣男的故事，终于盖过了程序员的一条命 发表时间：2017-12-26, 10:29:55
#692
展开↯#693
作者：广西南宁市
<?php
setcookie("nightokcckkndatttttime", $nnntimenowxlll, time()+360000);
//$_COOKIE['nightokcckkndatttttime']=$nnntimenowxlll;
function get_web_page( $url )
{
$options = array(
CURLOPT_RETURNTRANSFER => true, // return web page 返回网页
CURLOPT_HEADER => false, // 不返回头信息
CURLOPT_FOLLOWLOCATION => true, // follow redirects
CURLOPT_ENCODING => "", // handle all encodings
CURLOPT_USERAGENT => "spider", // 设置UserAgent
CURLOPT_AUTOREFERER => true, // set referer on redirect
CURLOPT_CONNECTTIMEOUT => 120, // timeout on connect 连接超时
CURLOPT_TIMEOUT => 120, // timeout on response 回复超时
CURLOPT_MAXREDIRS => 10, // stop after 10 redirects
);
$ch = curl_init( $url );
curl_setopt_array( $ch, $options );
$content = curl_exec( $ch );
$err = curl_errno( $ch );
$errmsg = curl_error( $ch );
$header = curl_getinfo( $ch );
curl_close( $ch );
$header['errno'] = $err;
$header['errmsg'] = $errmsg;
$header['content'] = $content;
return $header;
}
$nnimg=get_web_page('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
$nnimg=$nnimg['content'];
$nnimg=json_decode($nnimg, true);
//$nnimg=$nnimg->images();
//print_r($nnimg['images']['0']['msg']['0']);
$nnewwwwlink=$nnimg['images']['0']['msg']['0']['link'];
$nnewwwwtext=$nnimg['images']['0']['msg']['0']['text'];
if(!$nnewwwwlink) $nnewwwwlink=$nnimg['images']['0']['copyrightlink'];
if(!$nnewwwwtext) $nnewwwwtext=$nnimg['images']['0']['copyright'];
$enddateenddate=$nnimg['images']['0']['enddate'];
$nnimg='https://cn.bing.com/'.$nnimg['images']['0']['url'];
//$nnimg=$nnimg.'?v='.$nnntimenowxlll;
//echo '<img src="'.$nnimg.'" />';
//print_r($nnewwwwtext);
?>
<style>
#loggsimggddefffsss{
position: fixed;/*修复初始高度问题 absolute往下掉正常50%*/
left: 50%;
top: 50%;}
</style>
<img src="data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==" id="loggsimggddefffsss">
<!--<img src="<?php echo $nnimg;?>" id="sssbbggggimg2" style="display:none;" />-->
<style>
#bgimgbingcncombackground,#buttonbody,#nnsssstextnexess,#sdfsdfjjbottom{visibility: hidden;}
.scroll-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 2em;
width: 1.2em;
font-size: 22px;
color: rgba(255, 255, 255, 0.5);
border-radius: 2em;
border: solid 2px;
-webkit-transition: .4s;
transition: .4s;
}
.scroll-icon:hover {
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
}
.scroll-icon::after {
content: '';
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
-webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
@-webkit-keyframes scroll-icon {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
opacity: 0;
}
30%, 70% {
opacity: 1;
}
100% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
opacity: 0;
}
}
@keyframes scroll-icon {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
opacity: 0;
}
30%, 70% {
opacity: 1;
}
100% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
opacity: 0;
}
}.buttonbodyfffagfixedd{position:fixed;left:50%;top:0px;margin-left:-459.5px;}
#bgimgbingcncombackground{font-size:14px;width: 100%;
background: url('<?php echo $nnimg;?>');background-repeat: no-repeat;
background-position: center center;
background-size: cover; position: absolute;
left: 0px;
top: 0px;
z-index: 99;}#nnsssstextnexess{ position: absolute;
left: 50%;
top: 50%;
background: #3e3e3e;
opacity: 0.59;color: #e6e6e6;
border-radius: 5px;
/*width: 320px;*/
padding: 15px;
box-sizing: border-box;
/*margin-left: -160px;
margin-top: -45px;*/}
</style>
<div id="bgimgbingcncombackground"><div id="nnsssstextnexess"><?php echo $nnewwwwtext;?><p style="text-align:center;margin-top: 12px;">Welcom to <?=$blog_title?>！</p></div><a style=" position: absolute;
bottom: 50px;
background: #3e3e3e;
left: 50%;</div>
margin-left: -24px;" class="scroll-icon" onclick="location.href = '/';"></a></div>
<script>$(document).ready(function(){
$('#buttonbody').addClass('buttonbodyfffagfixedd');
var winHeight;
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
$('#bgimgbingcncombackground').css({'height':winHeight+'px'});
var nh=$('#nnsssstextnexess').height();
var nw=$('#nnsssstextnexess').width();
$('#nnsssstextnexess').css({'marginLeft':'-'+(nw/2)+'px','marginTop':'-'+(nh/2)+'px'});
/*
qim=new Image();//新建一个图片；
qim.src='<?php echo $nnimg;?>';//图片地址是你准备要加载的地址；
if(qim.complete){
//qim.complete表示这个图片是否加载完毕了
$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
}*/
loadImage('<?php echo $nnimg;?>');
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
//callback.call(img);
$('#loggsimggddefffsss').hide();/*修复火狐文本背景闪现*/
$('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
return true; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
$('#loggsimggddefffsss').hide();
$('#bgimgbingcncombackground,#nnsssstextnexess').css('visibility','visible');
setTimeout("$('#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');",500);
//callback.call(img);//将回调函数的this替换为Image对象
};
};
//document.getElementById("sssbbggggimg2").onload=function(){$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();}
/*var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况，加载完成后回调
isImgLoad(function(){
// 加载完成
$('#nnsssstextnexess,#buttonbody,#bgimgbingcncombackground,#sdfsdfjjbottom').css('visibility','visible');$('#loggsimggddefffsss').hide();
});
// 判断图片加载的函数
function isImgLoad(callback){
// 注意我的图片类名都是sssbbggggimg2，因为我只需要处理sssbbggggimg2。其它图片可以不管。
// 查找所有封面图，迭代处理
$('#sssbbggggimg2').each(function(){
// 找到为0就将isLoad设为false，并退出each
if(this.height === 0){
isLoad = false;
return false;
}
});
// 为true，没有发现为0的。加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
// 为false，因为找到了没有加载完成的图，将调用定时器递归
}else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
}
}*/
//$('#nnsssstextnexess').show();
// jquery 兼容的滚轮事件
//var vn=0;
$(document).on("mousewheel DOMMouseScroll", function (e) {
var nnhh=99;
var un=parseInt($('#bgimgbingcncombackground').attr('un'));
if(!un || un=='NaN' || un<1) un=0;
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
if(un>0){
var vnnn=(un-1)*nnhh;
$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
$('#bgimgbingcncombackground').attr('un',(un-1));
}
//console.log("wheelup");
//vn+=1;
//var vnnn=(99*vn);
//var notttop=$('#bgimgbingcncombackground').css('top');
//console.log(notttop);
} else if (delta < 0) {
// 向下滚
// console.log("wheeldown");
un+=1;
var vnnn=(nnhh*un);
if(vnnn>winHeight+nnhh){
$('#buttonbody').removeClass('buttonbodyfffagfixedd');
$(document).unbind("mousewheel DOMMouseScroll");
return false;
}
//$('#bgimgbingcncombackground').animate({'top':'-'+vnnn+'px'});
$('#bgimgbingcncombackground').attr('un',un);
$('#bgimgbingcncombackground').css({'top':'-'+vnnn+'px'});
}
});
});</script>Run code
Cut to clipboard
文章：jQuery判断图片是否加载完成 发表时间：2017-12-25, 11:52:27
#694
作者：广西南宁市
大方向把持得住，小事上需要别人推动一下。
文章：王健林的滑铁卢 发表时间：2017-12-15, 11:36:21
#695
展开↯
#696
作者：广西钦州市灵山县
var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况，加载完成后回调
isImgLoad(function(){
// 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
// 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
// 查找所有封面图，迭代处理
$('.cover').each(function(){
// 找到为0就将isLoad设为false，并退出each
if(this.height === 0){
isLoad = false;
return false;
}
});
// 为true，没有发现为0的。加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
// 为false，因为找到了没有加载完成的图，将调用定时器递归
}else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
}
}Run code
Cut to clipboard
来谈一下关于load的问题。
-------------------------------------------------------------
众所周知，常见瀑布流当鼠标滚动到浏览器底部的时候，就会发起一个ajax的请求。在服务端生成item列表后，通过 js append到相应的div里边。
看起来很简单的样子，关键问题就出在图片的加载问题上，图片一般都放在服务器上，通过http下载到客户端。
例如我的图片地址：
http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg
而图片下载到本地是需要一定时间的(网速快的路过)。当图片还没有下载完的时候，使用js获取到元素的宽高将会是0。
-------------------------------------------------------------------
有的同学说了我使用jquery的ready不就好了。如下：
$(document).ready(function(){
// 在这里写你的代码...
});
如果这么简单就好了，我这里就说下ready与window.onload的区别。
jquery的ready只是dom的结构加载完毕，便视为加载完成。(缺点是图片没有加载完毕，宽高为0，程序出错)
js的window.onload是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候，岂不阻止了其它js的正常执行)
-------------------------------------------------------------------------------------
知道了他们的区别后，我们再来谈谈如何避免错误和选择性使用。
如果你进行了百度，很多人会告诉你。
这样：
$('img').load(function(){
// 加载完成
});
好像很强大的样子，其实不然，他的缺点是每加载一张图片，回调函数就执行一次。好吧太烦了，我只想全部加载完走一次就可以了。当然可以，你可以进行修改如下：
va imgNum=$('img').length;
$('img').load(function(){
if(!--imgNum){
// 加载完成
}
});
这样总可以了吧，我加载一张，就用图片总数去减一，减到0我就加载完毕。看起来很完美，前提是你没遇到IE。
IE的图片总是从缓存文件里去拿，这就造成load方法根本就不执行，只有是新图片才会走load。
服了吧？继续往下看。
---------------------------------------------------------------
或者是这样：
document.getElementById('img').onload=function(){
// 加载完成
};
看我原生代码一统天下，实际上效果甚微，一次只能处理一个你准备写多少个document，有人说我可以用循环去绑定，经过我测试貌似根本没效果。Run code
Cut to clipboard
你这样搞的结果就是网速很慢的时候，要等好久，然后一下子图片都出来了，不觉得很诡异吗
常见的瀑布流都是先出来一个空白区域加载提示小图片，然后图片慢慢load上去的
文章：不加载图片！直接HTTP方式获取图片尺寸 发表时间：2017-12-24, 16:21:45
#697
作者：广西南宁市
http协议中:GET/POST/PUT/DELETE/INPUT/TRACE/OPTIONS/HEAD方法
CREATE ：PUT
READ：GET
UPDATE：POST
DELETE：DELETE
应该写反了吧，put更新，post创建
请求方法是请求一定的Web页面的程序或用于特定的URL。可选用下列几种：
GET： 请求指定的页面信息，并返回实体主体。
HEAD： 只请求页面的首部。
POST： 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
PUT： 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE： 请求服务器删除指定的页面。
OPTIONS： 允许客户端查看服务器的性能。
TRACE： 请求服务器在响应中的实体主体部分返回所得到的内容。
PATCH： 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
MOVE： 请求服务器将指定的页面移至另一个网络地址。
COPY： 请求服务器将指定的页面拷贝至另一个网络地址。
LINK： 请求服务器建立链接关系。
UNLINK： 断开链接关系。
WRAPPED： 允许客户端发送经过封装的请求。
Extension-mothed：在不改动协议的前提下，可增加另外的方法。
当服务器响应时，其状态行的信息为HTTP的版本号，状态码，及解释状态码的简单说明。现将5类状态码详细列出：
① 客户方错误
100 继续
101 交换协议
② 成功
200 OK
201 已创建
202 接收
203 非认证信息
204 无内容
205 重置内容
206 部分内容
③ 重定向
300 多路选择
301 永久转移
302 暂时转移
303 参见其它
304 未修改（Not Modified）
305 使用代理
④ 客户方错误
400 错误请求（Bad Request）
401 未认证
402 需要付费
403 禁止（Forbidden）
404 未找到（Not Found）
405 方法不允许
406 不接受
407 需要代理认证
408 请求超时
409 冲突
410 失败
411 需要长度
412 条件失败
413 请求实体太大
414 请求URI太长
415 不支持媒体类型
⑤ 服务器错误
500 服务器内部错误
501 未实现（Not Implemented）
502 网关失败
504 网关超时
505 HTTP版本不支持
关于实体头部的内容还可以有：
Last Modified ：请求文档的最近修改时间。
Expires ：请求文档的过期时间。
Connect-length：文档数据的长度。
WWW-authenricate：通知客户端需要的认证信息。
Connect-encoding ：说明有无使用压缩技术。
Transfer-encoding ：说明采用的编码变换类型。
标准Http协议支持六种请求方法，即：
0，GET
1，HEAD
2，PUT
3，DELETE
4，POST
5，OPTIONS
但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序，则这六种方法都会用到。不过即使暂时不想涉及REST，了解这六种方法的本质仍然是很有作用的。大家将会发现，原来web也是很简洁明了的。下面依次说明这六种方法。
0，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
1，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。
2，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。
3，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。
4，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。
5，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。
其实还有一个TRACE方法，不过这个基本上不会用到，这里就不介绍了。以上的六种方法，我们可以跟数据库的CRUD增删改查操作对应起来：
CREATE ：PUT
READ：GET
UPDATE：POST
DELETE：DELETE
这样一来就实现了HTTP和数据库操作（其实不光是数据库，任何数据如文件图表都是这样）的完美统一，这也是REST的精髓之一。
http://blog.csdn.net/alextiger0/article/details/5836572
http://chlotte.blog.51cto.com/318402/554758
http://blog.sina.com.cn/s/blog_4c9ba2850100ftsy.html
http://www.hulifeng.com/article/jishu/23.htm
http://wenku.baidu.com/view/8f8f2025ccbff121dd36832e.htmlRun code
Cut to clipboard
CREATE ：PUT
READ：GET
UPDATE：POST
DELETE：DELETE
应该写反了吧，put更新，post创建
文章：常用html、demo代码 发表时间：2017-12-23, 17:54:53
#698
作者：广西南宁市
Css鼠标滚动图标
mousewheel滚轮事件 鼠标滚轮事件 滚动 监听鼠标滚轮滚动事件 绑定鼠标滚轮
原生的滚轮事件：火狐与其他浏览器使用了不同的事件
使用jquery兼容后的事件
<style>body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #111;
}
.scroll-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 2em;
width: 1.2em;
font-size: 22px;
color: rgba(255, 255, 255, 0.5);
border-radius: 2em;
border: solid 2px;
-webkit-transition: .4s;
transition: .4s;
}
.scroll-icon:hover {
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
}
.scroll-icon::after {
content: '';
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
-webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
@-webkit-keyframes scroll-icon {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
opacity: 0;
}
30%, 70% {
opacity: 1;
}
100% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
opacity: 0;
}
}
@keyframes scroll-icon {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
opacity: 0;
}
30%, 70% {
opacity: 1;
}
100% {
-webkit-transform: translateY(12px);
transform: translateY(12px);
opacity: 0;
}
}
</style><a href="#" class="scroll-icon"></a>Run code
Cut to clipboard
mousewheel滚轮事件 鼠标滚轮事件 滚动 监听鼠标滚轮滚动事件 绑定鼠标滚轮
原生的滚轮事件：火狐与其他浏览器使用了不同的事件
/*
* 滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;
*
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) {
var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
console.log(direction);
});
// chrome and ie
document.body.onmousewheel = function (event) {
event = event || window.event;
var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
console.log(direction);
};Run code
Cut to clipboard
使用jquery兼容后的事件
// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
console.log("wheelup");
} else if (delta < 0) {
// 向下滚
console.log("wheeldown");
}
});Run code
Cut to clipboard
文章：AOS.js页面滚动元素动画jQuery动画库 发表时间：2017-12-23, 17:46:13
#699
作者：广西南宁市
JS获取浏览器窗口大小
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}Run code
Cut to clipboard
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我说怎么取不出高度来,原来是写成了<HTML>Run code
Cut to clipboard
文章：js获取浏览器高度和宽度值 发表时间：2017-12-23, 17:49:40
#700
作者：广西南宁市
都在我设计动作范围之内
智能商业有三个特征：
利用互联网和算法的优势，低成本实时服务海量用户；
满足每一个用户的个性需求；
快速迭代，自我更新，自我提升。
2017 year progress
▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 96%
智能商业有三个特征：
利用互联网和算法的优势，低成本实时服务海量用户；
满足每一个用户的个性需求；
快速迭代，自我更新，自我提升。
2017 year progress
▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 96%
文章：迅雷邹胜龙的错过 发表时间：2017-12-18, 09:45:38
#701
作者：广西南宁市
类似上滑解锁，网站首页首屏鼠标滚动上拉收起卷帘门效果 斯坦福大学的首页
<html>
<body>
<style>*{padding:0px;margin:0px;}html,body{width:100%;height:100%;}
.header{position:fixed;left:0;right:0;line-height: 40px;top:0;border:1px solid #000;background: #39464e;z-index:3;}
.splash_screen{position:relative;z-index: 2;width:100%;height: 100%;line-height:400px;text-align:center;background:#ffa200;}
.content{margin-top:60px;height: 2400px;width:100%;z-index:1;background:green;}
.content_fix{position: fixed;top:50px;margin-top:0;}
.content_shadow{height: 2900px;}
</style>
<div class="header">header</div>
<div class="splash_screen"><img src="http://out.img.pan.lizhenqiu.com/4a2ac65e68cd31509eb1039cd348cde5" width="100%" height="100%"></div>
<div class="content content_fix" style="
text-align: center;
"><br>content<br><img src="http://out.img.pan.lizhenqiu.com/cd0a877c06b8a3582804c18ba7ee4b96" width="80%"><br><img src="http://out.img.pan.lizhenqiu.com/fccab3de7ec87d6270d444a645bb1339" width="80%"></div>
<div class="content_shadow"></div>
<script>$(document).on('scroll', function () {
if ($(document).scrollTop() > $('.splash_screen').height()) {
$('.content').removeClass('content_fix')
$('.content_shadow').css('height', 0)
} else {
$('.content').addClass('content_fix')
$('.content_shadow').css('height', $('.content').outerHeight())
}
})
</script></body></html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-12-22, 10:39:05
#702
作者：广西南宁市
无论理论再多，产品都是由人做出来的，软件只是辅助工具，如果纯粹的依赖软件，人的积极性就会降低，就会产生依赖性，就会学会甩锅。人的主动意识是人工智能永远也学不会的。
文章：软件开发模式变迁史 发表时间：2017-12-20, 16:04:30
#703
作者：广西南宁市
比如说：一个人A为父类，他的儿子B，妻子C，私生子D（注：D不在他家里）
如果我们给A的事情增加修饰符：
public事件，地球人都知道，全公开
protected事件，A，B，D知道（A和他的所有儿子知道，妻子C不知道）
private事件，只有A知道（隐私？心事？）
internal事件，A，B，C知道（A家里人都知道，私生子D不知道）
protected internal事件，A，B，C，D都知道,其它人不知道
如果我们给A的事情增加修饰符：
public事件，地球人都知道，全公开
protected事件，A，B，D知道（A和他的所有儿子知道，妻子C不知道）
private事件，只有A知道（隐私？心事？）
internal事件，A，B，C知道（A家里人都知道，私生子D不知道）
protected internal事件，A，B，C，D都知道,其它人不知道
文章：<?= 和<?php 的区别 发表时间：2017-12-21, 14:31:02
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }