HTML浪漫动态表白代码+音乐(附源码)
HTML浪漫表白求爱(附源码)，内含4款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。
直接上源码吧
一.红色爱心
1.效果
实际效果是动态的哦
2.源码
复制粘贴即可运行哦
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="Keywords" content="关键字,关键词"><meta name="Description" content="描述和简介"><title>Title</title><style type="text/css">*{margin:0;padding:0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}a{text-decoration:none;color: inherit;}img{display: block;border:none;}ol,ul{list-style:none;}.clearfix:after {content: "";display: block;clear: both;}.fl{ float: left;}.fr{ float: right;}html{height: 100%;background: -webkit-radial-gradient(center,#153170,#000);}.heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);animation: move 2s infinite alternate ;}.heart div{ position: absolute; width: 200px; height: 200px; background: red;}.heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}.heart .left{ left: 0; bottom: 0; border-radius: 50%;}.heart .right{ top: 0; right: 0;border-radius: 50%;}.heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}.heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}@-webkit-keyframes move{10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }}</style>
</head>
<body><div class="heart"><div class="left"></div><div class="middle"></div><div class="right"></div><p>I Love You</p></div>
</body>
</html>
二.粉色爱心
1.效果
实际效果是动态的哦
2.源码
文字部分只需改这一块即可哦
<div id="child"><h4>
HTML浪漫动态表白代码+音乐(附源码)相关推荐
- html实现浪漫的爱情日记（附源码）
文章目录 1.设计来源 1.1 主界面 1.2 遇见 1.3 相熟 1.4 相知 1.5 相念 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 代码结构 源码下载 更多爱情表白源码 作者:x ...
- 程序员如何用“心“表白（结尾附源码）
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 生成对抗网络（GANs）的资料小结，另附：资源|17类对抗网络经典论文及开源代码（附源码）
1.GANs的一些资料链接 ************************************************** *********************************** ...
- java计算机毕业设计web唐院寻人表白系统（附源码、数据库）
java计算机毕业设计web唐院寻人表白系统(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclis ...
- 520表白网站（附源码与修改教程）
520网站(附源码与修改教程) 一.前言 二.作品简介 三.表白小网站的修改 四.总结及其获取方式 一.前言 马上520了,有男朋友或者女朋友的小伙伴呢,可能又带来一个烦恼了,又是一个烦人的520,我 ...
- 百度离线地图示例之十三：动态运行轨迹实现(附源码)
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
- 李峋同款爱心代码（附源码，前端代码，python代码）
Hello 大家好 如何浪漫的表白,作为程序员出身的小编,今天就带你实现热播剧<点燃我,温暖你>中超火的李峋同款爱心代码!前面是教程,怕麻烦的朋友可以直接划到文末,下载现成的,下载完成后打 ...
- html div初始隐藏点击可见_3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载...
这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计.这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果. 使用方法 H ...
- 福利！Python制作动态字符画（附源码）
字符画,一种由字母.标点.汉字或其他字符组成的图画.简单的字符画是利用字符的形状代替图画的线条来构成简单的人物.事物等形象,它一般由人工制作而成:复杂的字符画通常利用占用不同数量像素的字符代替图画上不 ...
最新文章
- RabbitMQ 消费端限流、TTL、死信队列
- 【Java 注解】自定义注解 ( 使用注解实现简单测试框架 )
- Linux下oracle数据库启动和关闭操作
- 都说不要装箱，那装箱到底带来了什么开销?
- 2020年高考数学试题难吗？历史上最难数学卷不是2003！
- [JavaWeb-HTTP]request对象继承体系结构
- IOS 定义手势监听器详解，利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
- html不支持js,解决Firefox不支持Js的InnerHtml问题
- java entitybuilder_Java MultipartEntityBuilder.setContentType方法代码示例
- 地图比例尺与空间分辨率之间的关系_航高、分辨率与比例尺的关系
- K-Means（聚类）
- 【Seen看世界】:像高智商人群看齐
- PTA 7-1 奇偶数判断
- 进击的UI----------------(常见快捷键的使用)
- 密码学0930大作业
- 微信号码检测软件是什么？2016年全新升级的微信开通状态检测
- 【bzoj3687】简单题
- 使用ffmpeg 命令行解码并显示像素格式为.raw图像
- adc0832工作原理详解_单片机ADC的工作原理
- Vue人资中台--公司的员工管理(数据处理)
热门文章