这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
一、网页介绍一、网页效果二、代码展示1.HTML代码
三、精彩专栏
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
body,html{
margin:0;padding:0;
overflow:hidden
}
.svoiceIcon{
animation-name:colorswitchs;
animation-duration: 3s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
}
@keyframes colorswitchs {
0% {
color: #0087C9
}
20% {
color: #EF4A53
}
40% {
color: #804cfa
}
60% {
color: #FFB463
}
80% {
color: #33D5D4
}
100% {
color: #0087C9
}
}
.star{
width: 100%;
position: fixed;
left: 0;
top: 40vh;
display:none;
z-index:9991
}
/*心跳开始 */
.heart{
width: 200px;
height: 200px;
background: #f00;
position: relative;
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
transform: rotate(45deg);
margin: 20px auto;
}
.heart{
animation-name:heartbeat;
animation-duration: 1s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
}
.heart:before, .heart:after{
content: "";
position: absolute;
width: 200px;
height: 200px;
background: #f00;
border-radius: 100px;
}
.heart:before{
left: -100px;
}
.heart:after{
left: 0;
top: -100px;
}
@keyframes heartbeat{
0%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
25%{transform: rotate(45deg) scale(1,1); opacity: 0.8;}
100%{transform: rotate(45deg) scale(0.8,0.8); opacity: 1;}
}
/* 心跳结束 */
.music{
position: fixed;
right: 4%;
top: 2%;
width: 120px;
height: 120px;
z-index: 999999;
opacity:0.5
}
.musicRotate{
animation-name:musicrotate;
animation-duration: 4s; /*动画时间*/
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari 和 Chrome */
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
}
@keyframes musicrotate{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
你知道吗,陪伴是最长情的告白♥
document.body.addEventListener('touchmove', function(e){
e.preventDefault();
}, { passive: false }); //passive 参数不能省略,用来兼容ios和android
function star(){
$('.star').fadeIn();
setTimeout(function(){
$('.star').fadeOut()
},1000)
}
function playMusic(obj) {
var player = $("#player")[0]; /*jquery对象转换成js对象*/
if (player.paused){ /*如果已经暂停*/
player.play(); /*播放*/
$(obj).addClass('musicRotate');
$(obj).attr('src','img/musicP.png')
}else {
player.pause();/*暂停*/
$(obj).removeClass('musicRotate');
$(obj).attr('src','img/musicS.png')
}
}
三、精彩专栏
看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。
文章链接
发表评论