HTML+CSS+JS制作爱心表白代码 520情人节源码HTML 七夕情人节表白代码制作 生日祝福代码
<h2 style="color: black; text-align: left; margin-bottom: 10px;">❉ html+css+javascript制作爱心表白代码(卡通<span style="color: black;">名人</span>爱心表白-爱心形状浮动特效 )备</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">引用了CSS3的动画效果来<span style="color: black;">表示</span>，视觉效果相当不错！得此表白神器，程序猿<span style="color: black;">亦</span><span style="color: black;">能够</span>很浪漫！快去追你的女神吧！~~</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. PC(电脑端)演示</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">在线演示<span style="color: black;">位置</span></a> </p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-fd76a76f637554ec79151aad686ec84c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2. H5 手机端</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/v2-42d459dd3d125cc16e5dbbf6e99236b9_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>(代码实现) </h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE html></span>
<span style="color: black;"><</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">link</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"favicon.ico"</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"shortcut icon"</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"icon-love"</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"images/x-ico"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">link</span> <span style="color: black;">rel</span><span style="color: black;">=</span><span style="color: black;">"stylesheet"</span> <span style="color: black;">href</span><span style="color: black;">=</span><span style="color: black;">"css/love.css"</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"container"</span> <span style="color: black;">onselectstart</span><span style="color: black;">=</span><span style="color: black;">"return false;"</span> <span style="color: black;">unselectable</span><span style="color: black;">=</span><span style="color: black;">"on"</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"-moz-user-select:none;"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"body_left"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">img</span> <span style="color: black;">src</span><span style="color: black;">=</span><span style="color: black;">"images/biubiubiu.gif"</span> <span style="color: black;">alt</span><span style="color: black;">=</span><span style="color: black;">""</span> <span style="color: black;">ondragstart</span><span style="color: black;">=</span><span style="color: black;">return false;</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"body_center love"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"block"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"div1"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"div2"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"div3"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"div4"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"footer"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"border"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"border-top"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"border-bottom"</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">script</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/javascript"</span> <span style="color: black;">src</span><span style="color: black;">=</span><span style="color: black;">"js/love.js"</span><span style="color: black;">></</span><span style="color: black;">script</span><span style="color: black;">></span>... 可关注下方↓ 公众号获取源码<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">js</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">blocks</span> <span style="color: black;">=</span> <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementsByClassName</span><span style="color: black;">(</span><span style="color: black;">"block"</span><span style="color: black;">),</span>
<span style="color: black;">block</span> <span style="color: black;">=</span> <span style="color: black;">blocks</span><span style="color: black;">[</span><span style="color: black;">0</span><span style="color: black;">],</span>
<span style="color: black;">love</span> <span style="color: black;">=</span> <span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementsByClassName</span><span style="color: black;">(</span><span style="color: black;">"love"</span><span style="color: black;">)[</span><span style="color: black;">0</span><span style="color: black;">],</span>
<span style="color: black;">timer</span> <span style="color: black;">=</span> <span style="color: black;">null</span><span style="color: black;">,</span>
<span style="color: black;">index</span> <span style="color: black;">=</span> <span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">//记录拼接爱心的动画<span style="color: black;">过程</span>
</span> <span style="color: black;">clone_b</span>
</div>
论坛是一个舞台，让我们在这里尽情的释放自己。 对于这个问题，我有不同的看法...
页:
[1]