模板化开发 前端 前端开发用模板吗 前端开发年终总结ppt模板 html 代码 <!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=”UTF-8″><br /> <title></title><br /> <style type=”text/css”></p> <p> div {margin: o; padding: 0;}<br /> div div {background: #A4CA39; position: relative;}</p> <p>.android{<br /> height: 404px; width: 334px;<br /> margin: 100px auto;</p> <p>}<br /> .head{<br /> width: 220px; height: 100px;<br /> top: 32px;</p> <p> border-radius: 110px 110px 0 0;<br /> -moz-border-radius: 110px 110px 0 0;<br /> -webkit-border-radius: 110px 110px 0 0;</p> <p> -webkit-transition: all 0.1s ease-in;<br /> }<br /> .l_eye, .r_eye {<br /> background: #fff;<br /> width: 20px; height: 20px;<br /> position: absolute; top: 42px;</p> <p> border-radius: 10px;<br /> -moz-border-radius: 10px;<br /> -webkit-border-radius: 10px;<br /> }<br /> .l_eye {left: 50px;}<br /> .r_eye {right: 50px;}</p> <p>.l_ant, .r_ant{<br /> width: 6px; height: 50px;<br /> position: absolute; top: -34px;</p> <p> border-radius: 3px;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> }</p> <p>.r_ant {<br /> right: 50px;<br /> transform: rotate(30deg);<br /> -webkit-transform: rotate(30deg);<br /> -moz-transform: rotate(30deg);<br /> }</p> <p>.body{<br /> width: 220px; height: 184px;<br /> top: 40px;</p> <p> border-radius: 0 0 25px 25px;<br /> -webkit-border-radius: 0 0 25px 25px;<br /> -moz-border-radius: 0 0 25px 25px;<br /> }</p> <p>.l_arm, .r_arm, .l_leg, .r_leg {<br /> width: 50px; position: absolute;<br /> -webkit-transition: all 0.1s ease-in;<br /> }</p> <p>.l_arm {left: -58px;}<br /> .r_arm {right: -58px;}<br /> .l_leg {left: 45px;}<br /> .r_leg {right: 45px;}</p> <p>.head:hover {<br /> -webkit-transform: rotate(-5deg) translate(-4px, -8px);<br /> -transform: rotate(-5deg) translate(-4px, -8px);<br /> -moz-transform: rotate(-5deg) translate(-4px, -8px);<br /> }<br /> .l_arm:hover{<br /> -webkit-transform: rotate(15deg) translate(-14px, 0);<br /> -transform: rotate(15deg) translate(-14px, 0);<br /> -moz-transform: rotate(15deg) translate(-14px, 0);<br /> }<br /> .r_arm:hover{<br /> -webkit-transform: rotate(-30deg) translate(30px, 0);<br /> -transform: rotate(-30deg) translate(30px, 0);<br /> -moz-transform: rotate(-30deg) translate(30px, 0);<br /> }</p> <p>body {<br /> background: #000;<br /> margin: 0;<br /> }</p> <p>canvas {<br /> cursor: crosshair;<br /> display: block;<br /> }<br /> </style><br /> </head><br /> <body><br /> <canvas id=”canvas”>Canvas is not supported in your browser.</canvas><br /> </div><br /> <script type=”text/javascript”><br /> window.requestAnimFrame = ( function() {<br /> return window.requestAnimationFrame ||<br /> window.webkitRequestAnimationFrame ||<br /> window.mozRequestAnimationFrame ||<br /> function( callback ) {<br /> window.setTimeout( callback, 1000 / 60 );<br /> };<br /> })();</p> <p>// now we will setup our basic variables for the demo<br /> var canvas = document.getElementById( ‘canvas’ ),<br /> ctx = canvas.getContext( ‘2d’ ),<br /> // full screen dimensions<br /> cw = window.innerWidth,<br /> ch = window.innerHeight,<br /> // firework collection<br /> fireworks = [],<br /> // particle collection<br /> particles = [],<br /> // starting hue<br /> hue = 120,<br /> // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks<br /> limiterTotal = 5,<br /> limiterTick = 0,<br /> // this will time the auto launches of fireworks, one launch per 80 loop ticks<br /> timerTotal = 80,<br /> timerTick = 0,<br /> mousedown = false,<br /> // mouse x coordinate,<br /> mx,<br /> // mouse y coordinate<br /> my;</p> <p>// set canvas dimensions<br /> canvas.width = cw;<br /> canvas.height = ch;</p> <p>// now we are going to setup our function placeholders for the entire demo</p> <p>// get a random number within a range<br /> function random( min, max ) {<br /> return Math.random() * ( max – min ) + min;<br /> }</p> <p>// calculate the distance between two points<br /> function calculateDistance( p1x, p1y, p2x, p2y ) {<br /> var xDistance = p1x – p2x,<br /> yDistance = p1y – p2y;<br /> return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );<br /> }</p> <p>// create firework<br /> function Firework( sx, sy, tx, ty ) {<br /> // actual coordinates<br /> this.x = sx;<br /> this.y = sy;<br /> // starting coordinates<br /> this.sx = sx;<br /> this.sy = sy;<br /> // target coordinates<br /> this.tx = tx;<br /> this.ty = ty;<br /> // distance from starting point to target<br /> this.distanceToTarget = calculateDistance( sx, sy, tx, ty );<br /> this.distanceTraveled = 0;<br /> // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails<br /> this.coordinates = [];<br /> this.coordinateCount = 3;<br /> // populate initial coordinate collection with the current coordinates<br /> while( this.coordinateCount– ) {<br /> this.coordinates.push( [ this.x, this.y ] );<br /> }<br /> this.angle = Math.atan2( ty – sy, tx – sx );<br /> this.speed = 2;<br /> this.acceleration = 1.05;<br /> this.brightness = random( 50, 70 );<br /> // circle target indicator radius<br /> this.targetRadius = 1;<br /> }</p> <p>// update firework<br /> Firework.prototype.update = function( index ) {<br /> // remove last item in coordinates array<br /> this.coordinates.pop();<br /> // add current coordinates to the start of the array<br /> this.coordinates.unshift( [ this.x, this.y ] );</p> <p> // cycle the circle target indicator radius<br /> if( this.targetRadius < 8 ) {<br /> this.targetRadius += 0.3;<br /> } else {<br /> this.targetRadius = 1;<br /> }</p> <p> // speed up the firework<br /> this.speed *= this.acceleration;</p> <p> // get the current velocities based on angle and speed<br /> var vx = Math.cos( this.angle ) * this.speed,<br /> vy = Math.sin( this.angle ) * this.speed;<br /> // how far will the firework have traveled with velocities applied?<br /> this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );</p> <p> // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached<br /> if( this.distanceTraveled >= this.distanceToTarget ) {<br /> createParticles( this.tx, this.ty );<br /> // remove the firework, use the index passed into the update function to determine which to remove<br /> fireworks.splice( index, 1 );<br /> } else {<br /> // target not reached, keep traveling<br /> this.x += vx;<br /> this.y += vy;<br /> }<br /> }</p> <p>// draw firework<br /> Firework.prototype.draw = function() {<br /> ctx.beginPath();<br /> // move to the last tracked coordinate in the set, then draw a line to the current x and y<br /> ctx.moveTo( this.coordinates[ this.coordinates.length – 1][ 0 ], this.coordinates[ this.coordinates.length – 1][ 1 ] );<br /> ctx.lineTo( this.x, this.y );<br /> ctx.strokeStyle = ‘hsl(‘ + hue + ‘, 100%, ‘ + this.brightness + ‘%)’;<br /> ctx.stroke();</p> <p> ctx.beginPath();<br /> // draw the target for this firework with a pulsing circle<br /> ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );<br /> ctx.stroke();<br /> }</p> <p>// create particle<br /> function Particle( x, y ) {<br /> this.x = x;<br /> this.y = y;<br /> // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails<br /> this.coordinates = [];<br /> this.coordinateCount = 5;<br /> while( this.coordinateCount– ) {<br /> this.coordinates.push( [ this.x, this.y ] );<br /> }<br /> // set a random angle in all possible directions, in radians<br /> this.angle = random( 0, Math.PI * 2 );<br /> this.speed = random( 1, 10 );<br /> // friction will slow the particle down<br /> this.friction = 0.95;<br /> // gravity will be applied and pull the particle down<br /> this.gravity = 1;<br /> // set the hue to a random number +-20 of the overall hue variable<br /> this.hue = random( hue – 20, hue + 20 );<br /> this.brightness = random( 50, 80 );<br /> this.alpha = 1;<br /> // set how fast the particle fades out<br /> this.decay = random( 0.015, 0.03 );<br /> }</p> <p>// update particle<br /> Particle.prototype.update = function( index ) {<br /> // remove last item in coordinates array<br /> this.coordinates.pop();<br /> // add current coordinates to the start of the array<br /> this.coordinates.unshift( [ this.x, this.y ] );<br /> // slow down the particle<br /> this.speed *= this.friction;<br /> // apply velocity<br /> this.x += Math.cos( this.angle ) * this.speed;<br /> this.y += Math.sin( this.angle ) * this.speed + this.gravity;<br /> // fade out the particle<br /> this.alpha -= this.decay;</p> <p> // remove the particle once the alpha is low enough, based on the passed in index<br /> if( this.alpha <= this.decay ) {<br /> particles.splice( index, 1 );<br /> }<br /> }</p> <p>// draw particle<br /> Particle.prototype.draw = function() {<br /> ctx. beginPath();<br /> // move to the last tracked coordinates in the set, then draw a line to the current x and y<br /> ctx.moveTo( this.coordinates[ this.coordinates.length – 1 ][ 0 ], this.coordinates[ this.coordinates.length – 1 ][ 1 ] );<br /> ctx.lineTo( this.x, this.y );<br /> ctx.strokeStyle = ‘hsla(‘ + this.hue + ‘, 100%, ‘ + this.brightness + ‘%, ‘ + this.alpha + ‘)’;<br /> ctx.stroke();<br /> }</p> <p>// create particle group/explosion<br /> function createParticles( x, y ) {<br /> // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though<br /> var particleCount = 30;<br /> while( particleCount– ) {<br /> particles.push( new Particle( x, y ) );<br /> }<br /> }</p> <p>// main demo loop<br /> function loop() {<br /> // this function will run endlessly with requestAnimationFrame<br /> requestAnimFrame( loop );</p> <p> // increase the hue to get different colored fireworks over time<br /> hue += 0.5;</p> <p> // normally, clearRect() would be used to clear the canvas<br /> // we want to create a trailing effect though<br /> // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely<br /> ctx.globalCompositeOperation = ‘destination-out’;<br /> // decrease the alpha property to create more prominent trails<br /> ctx.fillStyle = ‘rgba(0, 0, 0, 0.5)’;<br /> ctx.fillRect( 0, 0, cw, ch );<br /> // change the composite operation back to our main mode<br /> // lighter creates bright highlight points as the fireworks and particles overlap each other<br /> ctx.globalCompositeOperation = ‘lighter’;</p> <p> // loop over each firework, draw it, update it<br /> var i = fireworks.length;<br /> while( i– ) {<br /> fireworks[ i ].draw();<br /> fireworks[ i ].update( i );<br /> }</p> <p> // loop over each particle, draw it, update it<br /> var i = particles.length;<br /> while( i– ) {<br /> particles[ i ].draw();<br /> particles[ i ].update( i );<br /> }</p> <p> // launch fireworks automatically to random coordinates, when the mouse isn’t down<br /> if( timerTick >= timerTotal ) {<br /> if( !mousedown ) {<br /> // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen<br /> fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );<br /> timerTick = 0;<br /> }<br /> } else {<br /> timerTick++;<br /> }</p> <p> // limit the rate at which fireworks get launched when mouse is down<br /> if( limiterTick >= limiterTotal ) {<br /> if( mousedown ) {<br /> // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target<br /> fireworks.push( new Firework( cw / 2, ch, mx, my ) );<br /> limiterTick = 0;<br /> }<br /> } else {<br /> limiterTick++;<br /> }<br /> }</p> <p>// mouse event bindings<br /> // update the mouse coordinates on mousemove<br /> canvas.addEventListener( ‘mousemove’, function( e ) {<br /> mx = e.pageX – canvas.offsetLeft;<br /> my = e.pageY – canvas.offsetTop;<br /> });</p> <p>// toggle mousedown state and prevent canvas from being selected<br /> canvas.addEventListener( ‘mousedown’, function( e ) {<br /> e.preventDefault();<br /> mousedown = true;<br /> });</p> <p>canvas.addEventListener( ‘mouseup’, function( e ) {<br /> e.preventDefault();<br /> mousedown = false;<br /> });</p> <p>// once the window loads, we are ready for some fireworks!<br /> window.onload = loop;<br /> </script><br /> <script src=”https://qiyukf.com/script/b93b7d7d248c20c6bfce92f74170c94f.js” defer async></script><br /> </body><br /> </html> 前端开发实训心得万能模板 前端开发项目的模板 前端模板化开发
评论前必须登录!
注册