[评论送书]html+css+js制作旋转爱心
Posted 静Yu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[评论送书]html+css+js制作旋转爱心相关的知识，希望对你有一定的参考价值。
💛作者主页：静Yu
🧡简介：CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家，前端知识交流社区创建者
💛社区地址：前端知识交流社区
🧡多种源码领取：福利社区
效果视频
爱心
html部分代码
又到了每周一个小浪漫的时刻了，这周的作品是一个跟随鼠标移动的爱心，中间是个大大的LOVE，中间的文字，自己完全可以修改。比如写上自己女朋友的名字。在此部分就可以修改，非常简单。
<!DOCTYPE html>
<html lang="en">
<head>
<title>爱心</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
</style>
</head>
<body>
<script src="js/nb.js"></script>
<script src="js/Projector.js"></script>
<script src="js/CanvasRenderer.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/Sparks.js"></script>
<!-- load the font file from canvas-text -->
<script src="js/helvetiker_regular.typeface.js"></script>
</body>
</html>
js部分代码
html中引入了六个<script src="js/XXX.js"></script>，图中这六个，代码数过多不再一一列举。需要源代码的朋友，在文章开头有领取方式。
/**
* @author mrdoob / http://mrdoob.com/
*/
THREE.SpriteCanvasMaterial = function ( parameters )
THREE.Material.call( this );
this.type = 'SpriteCanvasMaterial';
this.color = new THREE.Color( 0xffffff );
this.program = function ( context, color ) ;
this.setValues( parameters );
;
THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
THREE.SpriteCanvasMaterial.prototype.clone = function ()
var material = new THREE.SpriteCanvasMaterial();
THREE.Material.prototype.clone.call( this, material );
material.color.copy( this.color );
material.program = this.program;
return material;
;
//
THREE.CanvasRenderer = function ( parameters )
console.log( 'THREE.CanvasRenderer', THREE.REVISION );
var smoothstep = THREE.Math.smoothstep;
parameters = parameters || ;
var _this = this,
_renderData, _elements, _lights,
_projector = new THREE.Projector(),
_canvas = parameters.canvas !== undefined
? parameters.canvas
: document.createElement( 'canvas' ),
_canvasWidth = _canvas.width,
_canvasHeight = _canvas.height,
_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
_viewportX = 0,
_viewportY = 0,
_viewportWidth = _canvasWidth,
_viewportHeight = _canvasHeight,
pixelRatio = 1,
_context = _canvas.getContext( '2d',
alpha: parameters.alpha === true
),
_clearColor = new THREE.Color( 0x000000 ),
_clearAlpha = parameters.alpha === true ? 0 : 1,
_contextGlobalAlpha = 1,
_contextGlobalCompositeOperation = 0,
_contextStrokeStyle = null,
_contextFillStyle = null,
_contextLineWidth = null,
_contextLineCap = null,
_contextLineJoin = null,
_contextLineDash = [],
_camera,
_v1, _v2, _v3, _v4,
_v5 = new THREE.RenderableVertex(),
_v6 = new THREE.RenderableVertex(),
_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
_color = new THREE.Color(),
_color1 = new THREE.Color(),
_color2 = new THREE.Color(),
_color3 = new THREE.Color(),
_color4 = new THREE.Color(),
_diffuseColor = new THREE.Color(),
_emissiveColor = new THREE.Color(),
_lightColor = new THREE.Color(),
_patterns = ,
_image, _uvs,
_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
_clipBox = new THREE.Box2(),
_clearBox = new THREE.Box2(),
_elemBox = new THREE.Box2(),
_ambientLight = new THREE.Color(),
_directionalLights = new THREE.Color(),
_pointLights = new THREE.Color(),
_vector3 = new THREE.Vector3(), // Needed for PointLight
_centroid = new THREE.Vector3(),
_normal = new THREE.Vector3(),
_normalViewMatrix = new THREE.Matrix3();
// dash+gap fallbacks for Firefox and everything else
if ( _context.setLineDash === undefined )
_context.setLineDash = function ()
this.domElement = _canvas;
this.autoClear = true;
this.sortObjects = true;
this.sortElements = true;
this.info =
render:
vertices: 0,
faces: 0
评论区送书
这次为大家带来的是一本Vue.js全家桶，本书贯穿入门准备实操、基础核心案例、中级进阶实战、综合进阶项目进行讲解，循序渐进、环环相扣，通俗易懂，并分析为什么这样使用，让你知其所以然。包含的主要技术：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、拦截器、组件通信、跨域问题、上线部署等。
本书适合有 HTML、CSS、javascript 基础的 Vue.js 零基础小白、前端开发人员、后端开发人员。同时，也适合以下人员阅读：在校生，需要掌握流行的新技术，做到与职场同步；在职人员，工作中需要学习使用Vue；有基础学员，需要系统、全面、高效使用 Vue 技术。
有需要的小伙伴可以自行购买：
京东自营购买链接
https://item.jd.com/13441784.html
当当自营购买链接
http://product.dangdang.com/29303081.html
注意事项
1.抽奖方式：评论区抽奖
2.开奖时间：2021.12.24，本周五
3.中奖前，记得添加微信：Kcyu68，大家一定要关注开奖时间，记得领奖
以上是关于[评论送书]html+css+js制作旋转爱心的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️
恋爱交友情侣表白网站模板HTML+CSS+JS制作一个爱心表白网站