网站模板建站公司,包装设计制作流程有哪些,视频网站 阿里云,品牌网站建设定制别具一格#xff0c;原创唯美浪漫情人节表白专辑#xff0c;
(复制就可用)#xff08;html5,css3,svg)表白爱心代码(1) 一、 前言 回眸之间#xff0c;丰盈了岁月#xff0c;涟漪了思绪#xff0c;轻轻落笔#xff0c;不写伤痕#xff0c;不写仇怨#xff0c;只写岁月…别具一格原创唯美浪漫情人节表白专辑
(复制就可用)html5,css3,svg)表白爱心代码(1) 一、 前言 回眸之间丰盈了岁月涟漪了思绪轻轻落笔不写伤痕不写仇怨只写岁月经历领悟后的感恩与体会。 说来有点尴尬我一个奶奶级别的却从来没有交过男朋友也从来没有做过任何不应该做的事情。 每个人的天分不一样经历也不一样。我一直很安静很乖的等着我生命中的唯一来找我由他带我走向生命中的另一段旅程。因世事变迁很遗憾我确认他不会出现了。但我依然会尊重自己不论遭遇什么多少岁了我依然会是他心中的那个好女孩。 所以情人节或平日里看到别人双双对对我并不会感到任何……因为我的心一直是满的。 有些人无论身份是什么在岁月的流转中悄悄从你生命中退出但在与不在都会在你岁月中留下了华美的荏苒。不需太多仅仅是一句话一点面具后的恻隐那份隐而不说的不舍一句发自真切的关心话在你落难时没有随大流狠踩一脚的义气……岁月静好念起便是温暖。点点滴滴如缕缕阳光温暖迷雾中的前程。 经历过的风景有黑有白装点着生活的诗意叠加着光阴的故事如果带着一份感激的心态去领悟便是携了一款时光宝盒将生命的本真化作阳光雨露……心情低落时拿出来重新感受一下可以驱散心中的阴霾。 一句温暖的话我可以记一辈子。因为我知道生活不易还能给与别人温暖并不是一件容易的事。正如我现在一直在经历着一些我不愿意经历的事情但我还是在努力做着一些我能做到的事情当中的滋味只有自己心里清楚。 最近96岁星云法师因病辞世他有句话以金相交金耗则忘以利相交利尽则散以势相交势去则倾以权相交权失则弃以情相交情逝人伤唯心相交静行致远。 这世间有很多无奈有很多让人心寒的事其实我和所有人一样心中也有迷茫受伤也曾想放弃为什么他们可以忍心这样做可生活总要继续如果我们只记得别人给与的伤害除了让自己心灰意冷之外还会把本应属于你的阳光拒之门外。因为当你低着头忙着数伤痕时会忘了抬头看看天空白天阳光很温暖夜晚会有月亮就算是看不见月亮了还会有星星她们依然在那里闪烁温暖着每一个心情低落的人。。。 缘分向来可遇不可求如果遇见了自己喜欢的就不要苛求而是多给彼此一些包容和欣赏如此这份情才能长长久久余生才能拥有真正的岁月静好。每个人的相处模式不一样最重要是想清楚你要的是什么寻找你想要的找到了就要好好珍惜记住多体谅一下别人不要以自己的标准去评价衡量别人。 立场不同、所处环境不同的人很难真正了解对方的感受每个人都要学会习惯源于生命深处的孤独没有谁能够永远陪着谁孤单的滋味谁都要面对。因此对别人的失意、挫折、伤痛不要幸灾乐祸而应以宽容之心待之大家都有各自的不容易。不要随便去伤害任何人因为你的一言一行有可能就成为压死骆驼的最后一根稻草所有人都是平等的不论财富多少。 世界变化很大我一直在学着把这世上最令人恐惧的东西视为生命的前提去接受相信自己的为人坚持做最初的自己只要不是自己主动愿意去。。。那么无论发生什么还会是原来的那个自己纯洁而美好。菩提本无树明镜亦非台。本来无一物何处惹尘埃。在这一生中学会与自己相处与世界博弈好奇而温暖地活着守护着身边能够守护到的人。。。看得懂的互勉。 最好的余生是有彼此相爱之人陪伴你在漫长的未来一起看看日出日落静赏云卷云舒一起读书学习对抗平庸一起面对各种突如其来的意外一起。。。。。。一起人间烟火一起面对生老病死患难与共不离不弃。愿你们早日遇见这样可以相信的人共度余生。 下面这几款是我2023年2月新做的页面专为送给世间所有有情之人而准备我放在我这个唯一博客上csdn博客名逆境清醒有缘看到的只管拿去送给你自己喜欢的人免费是全部的完整源代码拷贝复制后简单修改即可用为防我无法控制的意外发生下载后请自行查杀毒。我一直觉得情人节是属于彼此相爱之人的节日能遇到真心对你好的人不容易无论婚否有什么想跟他她说的趁这个机会向他她表达一下。好好珍惜彼此的缘分。 “2023唯美浪漫情人节表白专辑” 页面是我设计制作的主体js代码来源于网络我按需做了修改。复制后简单修改名字和表白文字就可使用希望在这个情人节能帮你们更好地向你所喜欢的人表达内心的感受能遇到一个真心。 请勿将此几款情人节表白页面用作任何商业用途只赠给那些有情之人作表白用途。 2023年2.12 二、效果图预览
款式一 款式二 款式三 款式四 三、如何使用常见问题说明 1、电脑桌面新建一个txt文本文档鼠标右击然后点击新建文本文档 2、在我的博客挑选一种你喜欢的情人节表白款式然后点击该款式所相应的源代码右侧的复制按钮复制所有代码
3、进入刚才在桌面建立的txt文档点击【编辑】--【粘贴】把代码复制进记事本。 4、点击【文件】--【保存】 5、点击【退出】关闭记事本。 6、桌面上选中刚才的文本文件右键点击修改文件名为index. ,此时会有改名提示点击【是】按钮。 7、如果有.js文件请按上面方法建立js文件夹将js后缀的文件放于此文件夹中。如果有图片请建立img文件夹将图片保存到此文件夹中。 8、双击index.html文件打开即可看到效果。 9、修改表白文字。右键点击html文件选择打开方式为记事本即可。如果你有编译器的话还可以导入这个文件就可以看到并修改代码了。每款的修改方法我会在该款展示中做说明。
10、怎么发给自己喜欢的人看如果你喜欢的这个代码只是单独的一个html文件那么直接发html文件给她他即可让她他用系统自带的浏览器打开。 如果这个代码除了html文件还有其他的文件夹比如js文件图片音频等等那就需要把整个文件夹压缩然后把压缩包发给她。这个压缩包解压后打开html文件即可看到效果。 四、各款式完整源代码
款式一心形图片跳动爱心款 动态局部图 适用手里有所喜欢的人的大头像可写表白文字可长可短。
修改使用方法
1、拷贝完整源代码。
保存成index.html文件。具体方法见本文“三、如何使用常见问题说明”部分的介绍。 2、设置跳动爱心上显示的图片
将自己喜欢人的头像图片保存在\img目录下文件名为t1.jpg 3、修改表白文字
用记事本打开index.html文件找到 修改【有你在真好。。。。。张爱玲】这一段的文字这是显示在头像旁边的心形环绕文字注意文字字数不能超46个包括标点符号否则显示效果不佳。 修改【即使忘记了他的声音。。。。。郭敬明】这一段的文字 修改【岁月悄悄的流转。。。。。念起便是温暖。】这一段的文字 修改【经历过的风景。。。。。体味生命本真。】这一段的文字 修改【一条路。。。。。“种着”梦想。】这一段的文字 修改【表白文字】这一段的文字
这是显示在表白框里的文字
注意【pnbsp;nbsp;nbsp;nbsp;】这几句不要动可以显示段前缩进2个中文字的宽度。 4、检验修改表白内容后的效果
双击运行index.html文件或用浏览器打开index.html文件即可显示表白效果。 5、打包发送
将你的文件打包成.zip\.rar等通用压缩格式index.html和img目录一起发给你喜欢的人让她他解压压缩包后运行index.html文件即可。 6、完整源代码
index.html文件完整源代码
!DOCTYPE html
html langen
headmeta http-equivContent-Type contenttext/html; charsetUTF-8meta 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相片跳动爱心----设计by逆境清醒---/titlelink relstylesheet href.cssstylebody {font-family: consolas;color: white;background-repeat: no-repeat;background-attachment: fixed;background-image: -webkit-linear-gradient(#e66465, #9198e5);background-image: -moz-linear-gradient(#e66465, #9198e5);background-image: -ms-linear-gradient(#e66465, #9198e5);background-image: -o-linear-gradient(#e66465, #9198e5);background-image: linear-gradient(#e66465, #9198e5);top: 80px;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}.maindiv {transform: 50%,50%;display: flex;justify-content: center;margin: 80px,auto;display: flex;}svg {width: 110vmin;display: block;position: relative;margin: 80px,auto;z-index: 1;justify-content: center;}text {fill: white;font-family: consolas;font-size: 9px}.say {position: relative;z-index: 2;width: 110vmin;top: 580px;background-color: silver;padding: 20px;line-height: 40px;margin: 0;color: black;font-size: 18px;background: #c1d5eb;font-family: kaiti,microsoft yahei;text-shadow: 0px 1px 0px #f2f2f2;top: 0px;justify-content: center;border-style: double;border-radius: 20px;border: 5px solid #9198e5;}/**//style/head
bodydiv classmaindivsvg idtheSvg viewBox-120 -30 240 180 enable-backgroundnew 0 0 174 148 xml:spacepreservedefsfilter idf filterUnitsuserSpaceOnUse x-120 y-30 width120% height120%feGaussianBlur inSourceAlpha stdDeviation5 resultblur/feGaussianBlurfeOffset inblur dx3 dy5 resultshadow/feOffsetfeFlood flood-color#4d0014 resultcolor/feFloodfeComposite incolor in2shadow operatorin/feCompositefeComposite in2SourceGraphic/feComposite/filterpath idshape dM0, 21.054 C0, 21.054 24.618, -15.165 60.750, 8.554 C93.249, 29.888 57.749, 96.888 0, 117.388 C-57.749, 96.888 -93.249, 29.888 -60.750, 8.554 C-24.618, -15.165 -0, 21.054 -0, 21.054z/pathpath idpartialPath dM0, 21.054 C0, 21.054 24.618, -15.165 60.750, 8.554 C93.249, 29.888 57.749, 96.888 0, 117.388 C-57.749, 96.888 -93.249, 29.888 -60.750, 8.554 -24.618000000002304,-15.164999999998484 -3.147704319417244e-12,21.053999999995362 -3.0171089725444906e-25,21.054 /path/defsdefsclipPath idclippath dM0, 21.054 C0, 21.054 24.618, -15.165 60.750, 8.554 C93.249, 29.888 57.749, 96.888 0, 117.388 C-57.749, 96.888 -93.249, 29.888 -60.750, 8.554 -24.618000000002304,-15.164999999998484 -3.147704319417244e-12,21.053999999995362 -3.0171089725444906e-25,21.054 /path/clipPathlinearGradient idlinear x10.3 y10.3 x2.7 y2.7 spreadMethodreflectstop offset0 stop-color#00F/stopstop offset1 stop-color#FF0/stop/linearGradient
/defs
!-- --text dy-2 filterurl(#f)textPath xlink:href#partialPath startOffset12 strokewhite stroke-width.5有你在真好我想让你知道这个世界上总会有人在等你无论何时何地总有这样的人。--张爱玲/textPath/textuse iduseThePath xlink:href#partialPath strokewhite stroke-width1.5 stroke-opacity.5 fillred styledisplay: block; background-image: radial-gradient(circle,#f79e9e, #9b0202) /useset attributeNamex attributeTypeXML to60 begin8s /animateTransform attributeNametransform typescale from1 to0.8 begin8s dur1s repeatCountindefinite xlink:href#useThePath /image idtuimage xlink:href./img/t1.jpg x-75 y-8 width148 preserveAspectRationone styleclip-path: url(#clip) opacity.5animateTransform attributeNametransform typescale from1 to0.8 begin8s dur1s repeatCountindefinite xlink:href#tuimage //image
/svgscript languagejavascriptlet rid null; const SVG_NS http://www.w3.org/2000/svg;const pathlength shape.getTotalLength();let t 0; let lengthAtT pathlength * t;let d shape.getAttribute(d);let n d.match(/C/gi).length; let pos 0; class subPath {constructor(d) {this.d d;this.get_PointsRy();this.previous subpaths.length 0 ? subpaths[subpaths.length - 1] : null;this.measurePath();this.get_M_Point(); this.lastCubicBezier;this.get_lastCubicBezier();}get_PointsRy() {this.pointsRy [];let temp this.d.split(/[A-Z,a-z\s,]/).filter(v v); // remove empty elementstemp.map(item {this.pointsRy.push(parseFloat(item));}); }measurePath() {let path document.createElementNS(SVG_NS, path);path.setAttributeNS(null, d, this.d);this.pathLength path.getTotalLength();}get_M_Point() {if (this.previous) {let p this.previous.pointsRy;let l p.length;this.M_point [p[l - 2], p[l - 1]];} else {let p this.pointsRy;this.M_point [p[0], p[1]];}}get_lastCubicBezier() {let lastIndexOfC this.d.lastIndexOf(C);let temp this.d.substring(lastIndexOfC 1).split(/[\s,]/).filter(v v);let _temp [];temp.map(item {_temp.push(parseFloat(item));});this.lastCubicBezier [this.M_point];for (let i 0; i _temp.length; i 2) {this.lastCubicBezier.push(_temp.slice(i, i 2));}}}let subpaths [];for (let i 0; i n; i) {let newpos d.indexOf(C, pos 1);if (i 0) {let sPath new subPath(d.substring(0, newpos));subpaths.push(sPath);}pos newpos;}subpaths.push(new subPath(d));let index;for (index 0; index subpaths.length; index) {if (subpaths[index].pathLength lengthAtT) {break;}}function get_T(t, index) {let T;lengthAtT pathlength * t;if (index 0) {T (lengthAtT - subpaths[index].previous.pathLength) /(subpaths[index].pathLength - subpaths[index].previous.pathLength);} else {T lengthAtT / subpaths[index].pathLength;}return T;}let T get_T(t, index);let newPoints getBezierPoints(T, subpaths[index].lastCubicBezier);drawCBezier(newPoints, partialPath, index);function getBezierPoints(t, points) {let helperPoints [];for (let i 1; i 4; i) {let p lerp(points[i - 1], points[i], t);helperPoints.push(p);}helperPoints.push(lerp(helperPoints[0], helperPoints[1], t));helperPoints.push(lerp(helperPoints[1], helperPoints[2], t));helperPoints.push(lerp(helperPoints[3], helperPoints[4], t));let firstBezier [points[0],helperPoints[0],helperPoints[3],helperPoints[5]];return firstBezier;}function lerp(A, B, t) {let ry [(B[0] - A[0]) * t A[0], //x(B[1] - A[1]) * t A[1] //y];return ry;}function drawCBezier(points, path, index) {let d;if (index 0) {d subpaths[index].previous.d;} else {d M${points[0][0]},${points[0][1]} C;}for (let i 1; i 4; i) {d ${points[i][0]},${points[i][1]} ;}partialPath.setAttributeNS(null, d, d);}t 0.025;function Typing() {rid window.requestAnimationFrame(Typing);if (t 1) {window.cancelAnimationFrame(rid);rid null;} else {t 0.0025;}lengthAtT pathlength * t;for (index 0; index subpaths.length; index) {if (subpaths[index].pathLength lengthAtT) {break;}}T get_T(t, index);newPoints getBezierPoints(T, subpaths[index].lastCubicBezier);drawCBezier(newPoints, partialPath, index);}Typing();theSvg.addEventListener(click, () {if (rid) {window.cancelAnimationFrame(rid);rid null;} else {if (t 1) {t 0.025;}rid window.requestAnimationFrame(Typing);}});cb.addEventListener(input, () {if (cb.checked) {useThePath.style.display block;} else {useThePath.style.display none;}});; console.log(2023年逆境清醒 );/script/divdiv classsaypnbsp;nbsp;nbsp;nbsp;即使忘记了他的声音忘记了他的微笑忘记了他的脸有些人总会被铭刻在他们的记忆中但是当你想到他时这种感觉永远不会改变。------郭敬明/ppnbsp;nbsp;nbsp;nbsp;岁月悄悄的流转有些人在与不在都在岁月中留下了华美的荏苒。岁月静好念起便是温暖。/ppnbsp;nbsp;nbsp;nbsp;经历过的风景装点着生活的诗意叠加着的光阴故事带着一份感激去记得。携一缕阳光体味生命本真。/ppnbsp;nbsp;nbsp;nbsp;一条路人烟稀少孤独难行。却不得不坚持前行。因为它的尽头“种着”梦想。/ppnbsp;nbsp;nbsp;nbsp;表白文字/ppnbsp;nbsp;nbsp;nbsp;表白文字/p/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环境详细
