顶棒 技术支持 东莞网站建设,芜湖先锋网站两学一做,网络推广营销方案100例,阿里云网站怎么做别具一格,独此一家#xff0c;原创唯美浪漫情人节表白专辑
不一样的惊喜哦~#xff01;#xff08;html5,css3,svg)表白爱心代码#xff08;复制就可用#xff09;#xff08;4#xff09; 目录
款式四#xff1a;时光的记忆款
1、拷贝完整源代码
2、更新时光盒所…别具一格,独此一家原创唯美浪漫情人节表白专辑
不一样的惊喜哦~html5,css3,svg)表白爱心代码复制就可用4 目录
款式四时光的记忆款
1、拷贝完整源代码
2、更新时光盒所显示的相片
3、写上简短的表白文字
4、检验修改表白内容后的效果
5、打包发送
6、完整源代码 款式四时光的记忆款 动态图 适用相片回忆精简的几句表白文字。
修改使用方法
1、拷贝完整源代码
保存成index.html文件。具体方法见 原创唯美浪漫情人节表白专辑1的介绍。 2、更新时光盒所显示的相片
准备12张图片大小为500px*500px
挑选6张显示在最外面的图片
将文件名改为w1.jpg、w2.jpg、w3.jpg、w4.jpg、w5.jpg、w6.jpg。
挑选6张显示在最里面的图片
将文件名改为i1.jpg、i2.jpg、i3.jpg、i4.jpg、i5.jpg、i6.jpg。
将所有图片拷贝到名字为img的目录中。 3、写上简短的表白文字 修改【有一种路叫做浪漫。。。美好的未来】这几个字----》为你想表白的简短文字
此部分是修改以下显示内容 4、检验修改表白内容后的效果
双击运行index.html文件或用浏览器打开index.html文件即可显示表白效果。 5、打包发送
将你的文件打包成.zip\.rar等通用压缩格式index.html和img目录一起发给你喜欢的人让她他解压压缩包后运行index.html文件即可。 6、完整源代码
!DOCTYPE htmlhtml langen xmlnshttp://www.w3.org/1999/xhtml
headmeta charsetutf-8 /link relapple-touch-icon typeimage/png hrefhttps://.png /link relshortcut icon typeimage/x-icon hrefhttps://.ico /link relmask-icon typeimage/x-icon hrefhttps://.svg color#111 /meta name逆境清醒2023情人节专辑 content逆境清醒2023情人节专辑title时光的记忆款旋转相册 逆境清醒/titlelink relstylesheet href.cssstylehtml {background: #000;height: 100%;}.body {position: absolute;background: #000;height: 100%;}.axdiv {align-items: center;justify-content: center;position: relative;}.saysomething {position: relative;height: 80px;padding-top: 30px;background-image: linear-gradient(to top, #3ab5b0 0%, #3d99be 31%, #56317a 100%);color: white;text-align: center;align-items: center;justify-content: center;border: 5px solid white;}canvas {position: absolute;}* {margin: 0;padding: 0;color: #FFF;}canvas#canvas {display: block;background: #000;}ul#navigation {position: absolute;height: 100%;top: 0;right: 0;text-align: center;margin-right: 1.6rem;font-size: 0.8rem;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}ul#navigation li {display: inline-block;}.wrap {width: 10px;height: 10px;margin: 200px 400px;position: relative;align-items: center;justify-content: center;}.cube {width: 1000px;height: 400px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotatecube 20s infinite;animation-timing-function: linear;align-items: center;justify-content: center;}-webkit-keyframes rotatecube {from {transform: rotateX(0deg) rotateY(0deg)}to {transform: rotateX(360deg) rotateY(360deg)}}.cube div {position: absolute;width: 300px;height: 300px;//opacity: .8;opacity: 1;transition: all .4s;padding: 20px;border: 10px solid white;}.pic {width: 300px;height: 300px;}.img {}.cube .out_front {transform: rotateY(0deg) translateZ(180px)}.cube .out_back {transform: translateZ(-180px) rotateY(180deg)}.cube .out_left {transform: rotateY(90deg) translateZ(180px)}.cube .out_right {transform: rotateY(-90deg) translateZ(180px)}.cube .out_top {transform: rotateX(90deg) translateZ(180px)}.cube .out_bottom {transform: rotateX(-90deg) translateZ(180px)}.cube span {display: bloack;width: 200px;height: 200px;position: absolute;top: 50px;left: 50px}.cube .in_pic {width: 200px;height: 200px}.cube .in_front {transform: rotateY(0deg) translateZ(100px)}.cube .in_back {transform: translateZ(-100px) rotateY(180deg)}.cube .in_left {transform: rotateY(90deg) translateZ(100px)}.cube .in_right {transform: rotateY(-90deg) translateZ(100px)}.cube .in_top {transform: rotateX(90deg) translateZ(100px)}.cube .in_bottom {transform: rotateX(-90deg) translateZ(100px)}.cube:hover .out_front {transform: rotateY(0deg) translateZ(400px)}.cube:hover .out_back {transform: translateZ(-400px) rotateY(180deg)}.cube:hover .out_left {transform: rotateY(90deg) translateZ(400px)}.cube:hover .out_right {transform: rotateY(-90deg) translateZ(400px)}.cube:hover .out_top {transform: rotateX(90deg) translateZ(400px)}.cube:hover .out_bottom {transform: rotateX(-90deg) translateZ(400px)}/stylescript
(function () {use strict;window.addEventListener(load, function () {var canvas document.getElementById(canvas);if (!canvas || !canvas.getContext) {return false;}/********************Random Number********************/function rand(min, max) {return Math.floor(Math.random() * (max - min 1) min);}/********************Var********************/var ctx canvas.getContext(2d);var X canvas.width window.innerWidth;var Y canvas.height window.innerHeight;var mouseX X / 2;var mouseY Y / 2;var shapes [];var shapeNum 100;var angle 360 / 2;var radian angle * Math.PI / 180;var hsl rand(0, 360);/********************Animation********************/window.requestAnimationFrame window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||function(cb) {setTimeout(cb, 17);};/********************Shape********************/function Shape(ctx, x, y, i) {this.ctx ctx;this.init(x, y, i);}Shape.prototype.init function(x, y, i) {this.x x;this.y y;this.i i;this.r 15 * i;this.a 1 * i;this.rad this.a * Math.PI / 180;};Shape.prototype.draw function() {var ctx this.ctx;ctx.save();ctx.strokeStyle hsl( hsl , (100 - this.i) %, (100 - this.i) %;;ctx.lineWidth 0.4;ctx.translate(this.x, this.y);ctx.rotate(Math.sin(this.rad * 3));ctx.translate(-this.x, -this.y);ctx.beginPath();ctx.moveTo(Math.sin(this.rad) * 100 Math.sin(radian * 1) * this.r this.x, Math.cos(this.rad) * 100 Math.cos(radian * 1) * this.r this.y);ctx.lineTo(Math.sin(this.rad) * 100 Math.sin(radian * 2) * this.r this.x, Math.cos(this.rad) * 100 Math.cos(radian * 2) * this.r this.y);ctx.lineTo(Math.sin(this.rad) * 100 Math.sin(radian * 3) * this.r this.x, Math.cos(this.rad) * 100 Math.cos(radian * 3) * this.r this.y);ctx.closePath();ctx.stroke();ctx.restore();};Shape.prototype.updateParams function() {this.a 1;this.rad this.a * Math.PI / 180;};Shape.prototype.resize function() {this.x X / 2;this.y Y / 2;};Shape.prototype.render function(i) {this.updateParams();this.draw();};for (var i 0; i shapeNum; i) {var s new Shape(ctx, X / 2, Y / 2, i);shapes.push(s);}/********************Render********************/function render() {//ctx.clearRect(0, 0, X, Y);ctx.globalCompositeOperation darken;ctx.globalAlpha 0.05;ctx.fillStyle rgb(0,0,0);ctx.fillRect(0, 0, X, Y);ctx.globalCompositeOperation source-over;ctx.globalAlpha 1;for (var i 0; i shapes.length; i) {shapes[i].render(i);}requestAnimationFrame(render);}render();/********************Color********************/function changeColor() {var time rand(1000, 5000);hsl rand(0, 360);setTimeout(changeColor, time);}changeColor();/********************Event********************/function onResize() {X canvas.width window.innerWidth;Y canvas.height window.innerHeight;for (var i 0; i shapes.length; i) {shapes[i].resize();}}window.addEventListener(resize, function(){onResize();});canvas.addEventListener(wheel, function(e){for (var i 0; i shapes.length; i) {shapes[i].r e.deltaY / 10;}}, false);var touchStartY;var touchMoveY;var touchEndY;canvas.addEventListener(touchstart, function(e) {var touch e.targetTouches[0];touchStartY touch.pageY;}, false);canvas.addEventListener(touchmove, function(e) {var touch e.targetTouches[0];touchMoveY touch.pageY;touchEndY touchStartY - touchMoveY;for (var i 0; i shapes.length; i) {shapes[i].r - touchEndY / 10;}}, false);canvas.addEventListener(touchend, function(e) {touchStartY null;touchMoveY null;touchEndY null;}, false);});// Authorconsole.log(File Name / eyesight.js\nCreated Date / Jun 28, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo);
})();
/script
/head
bodycanvas idcanvas width1519 height746/canvasdiv classaxdivdiv classsaysomethingh1有一种路叫做浪漫那里有你给我美好的未来。/h1/div/divdiv classwrapdiv classcubediv classout_frontimg srcimg/w1.jpg classpic //divdiv classout_backimg srcimg/w2.jpg classpic/divdiv classout_leftimg srcimg/w3.jpg classpic/divdiv classout_rightimg srcimg/w4.jpg classpic/divdiv classout_topimg srcimg/w5.jpg classpic/divdiv classout_bottomimg srcimg/w6.jpg classpic/divspan classin_frontimg srcimg/i1.jpg classin_pic/spanspan classin_backimg srcimg/i2.jpg classin_pic/spanspan classin_leftimg srcimg/i3.jpg classin_pic/spanspan classin_rightimg srcimg/i4.jpg classin_pic/spanspan classin_topimg srcimg/i5.jpg classin_pic/spanspan classin_bottomimg srcimg/i6.jpg classin_pic/span/div/div/body
/html
原创唯美浪漫情人节表白专辑1原创唯美浪漫情人节表白专辑2原创唯美浪漫情人节表白专辑3原创唯美浪漫情人节表白专辑4推荐阅读 原创唯美浪漫情人节表白专辑(复制就可用)html5,css3,svg)更好的向你所喜欢的人表达内心的感受。 2023年春节祝福第二弹——送你一只守护兔让它温暖每一个你【html5 css3】画会动的小兔子25 2023春节祝福系列第一弹放飞祈福孔明灯祝福大家身体健康附完整源代码及资源免费下载24 HTMLCSSsvg绘制精美彩色闪灯圣诞树HTMLCSSJs实时新年时间倒数倒计时(附源代码) 23 草莓熊python绘图春节版圣诞倒数雪花版附源代码 22 【程序人生】卡塔尔世界杯元素python海龟绘图附源代码世界杯主题前端特效5个附源码 21 python爱心源代码集锦20 巴斯光年python turtle绘图__附源代码19 Three.js实例详解___旋转的精灵女孩(附完整代码和资源)18 草莓熊python turtle绘图玫瑰花版附源代码 17 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 16 皮卡丘python turtle海龟绘图电力球版附源代码 15 【CSDN云IDE】个人使用体验和建议含超详细操作教程python、webGL方向) 14 草莓熊python turtle绘图风车版附源代码 13 用代码过中秋python海龟月饼你要不要尝一口 12 《 Python List 列表全实例详解系列》__系列总目录 11 用代码写出浪漫__合集python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心 10 Python函数方法实例详解全集(更新中...) 9 matplotlib 自带绘图样式效果展示速查28种全 8 手机屏幕坏了____怎么把里面的资料导出18种方法 7 2023年1月多家权威机构____编程语言排行榜__薪酬状况 6 Python中Print()函数的用法___实例详解(全例多 5 色彩颜色对照表300种颜色(16进制、RGB、CMYK、HSV、中英文名) 4 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程超详细 3 Tomcat 启动闪退问题解决集八大类详细 2 Tomcat端口配置详细 1 Tomcat10 安装Windows环境详细
