一、📚网站介绍

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

二、🔗作品效果

▶️视频演示

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

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

🧩 截图演示

三、💒 作品代码

🧱HTML代码

Th
        an
        ks
         for
          w
         atch
         ing!
    

    
        

🏠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