HTML实现表白biu爱心特效 (程序员专属情人节表白网站)

一、网站介绍

基于html+css+js制作的表白网页代码，可以直接替换文字和图片即可使用

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/237875

(title-98-情人节爱你的代码)]

截图演示

---

三、 作品代码

HTML代码

        
        
        
        
        
        
        
        
        
        
        
        
               
        
        
        
        
        
        
        
        
        
        
        
        Th
        an
        ks
         for
          w
         atch
         ing!
    

    
        
        
        

            

                I Love You Forever
            
        

        
        

                _
        

            一时间不知道从哪说起,         

                真爱来了，我们要好好把    

                一时间不知道从哪说起,         

                真爱来了，我们要好好把握。不管面临多大的压力，

                不管前面的路如何崎岖.

                不管经历过什么,我仍坚信最浪漫的事就是和

                你一起慢慢变老.

                还记得否,曾经的点点滴滴，从相识到现在，

                从冷漠到关心,从谢绝到依赖，从生疏到相爱,

                一切似乎都是那么遥远,又似乎那么触手可及.

                正如某人说的那样,但求岁月静好,现世安稳.

                一生守候不是一句简单而苍白的山盟海誓，

                而是无数个平淡的日子同舟共济，相濡以沫.

                相信右下角的计时器,将永远继续下去,直至数据溢出.

                

                -----------------------Just for You, YaRu

        
        
        

        
        

            

            

            

            

            

            

          
        
        
        
        
        

            你的浏览器过时了,试试火狐吧!
        

        
        

            
            
        

    
    

CSS代码

/* Global properties ======================================================== */
body { 
    background:#6f599c;
    background-image:url(../images/bg.jpg) ;
    text-align:left;
}

/* Global Structure ============================================================= */
/* Header */
#header{
    position:absolute;
    left:0px;
    top:5px;
    overflow:hidden;
    height:70px;
    font-family:Microsoft YaHei;
    font-weight: 900;
    font-size:40px;
    padding-bottom:5px;
    width: 100%;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
}
    
#myContent{
    position:absolute;
    left:80px;
    top:130px;
    overflow:hidden;
    text-shadow: 2px 3px 3px #000; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-weight:500;
    font-size:20px;
    color:#CCCCCC;
}

#container{
    overflow:hidden;
    position:absolute;
    left:630px;
    top:220px;
    width:650px;
    opacity:0;
    filter:alpha(opacity=0.7)
}

#title{
    position:absolute;
    left:28%;
    top:0px;
    padding:10px;
    overflow:hidden;
    text-shadow: 2px 3px 3px #222; 
    color:#CCCCCC;
}

#footer {
    position:absolute;
    left:32%;
    top:91%;
    overflow:hidden;
    text-shadow: 2px 3px 3px #222; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-size:20px;
    color:#CCCCCC;
}



#time{
    position:absolute;
    left:750px;
    top:400px;
    overflow:hidden;
}

#show{
    color:#CCCCCC;
    text-shadow: 2px 3px 3px #222; 
    font-family:Microsoft YaHei;
    font-style:italic;
    font-size:20px;
}


#bg{
    overflow:hidden;
}

.roundabout-holder  { 
    width:600px;
    height:400px;
    margin:0 auto;
}
.roundabout-moveable-item {
    width: 350px;
    height: 222px;
    cursor: pointer;
    border:3px solid #ccc;
    border:3px solid rgba(0, 0, 0, 0.08);
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
.roundabout-moveable-item img{
    width:100%;
}
.roundabout-in-focus {
    border:3px solid rgba(0, 0, 0, 0.2);
}

ol, ul {
    list-style: none;
}

img {
    vertical-align:top; 
}

.spanstyle{
    color:#CCFF99;
    font-family:courier;
    text-shadow: 2px 2px 1px #222; 
    font-style:italic;
    font-weight:600;
    font-size:20px;
    position:absolute;      /* �对定� */
    top:-50px;
    overflow:hidden;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app