html代码表白_学会这个你还没对象？程序员浪漫表白代码（JS+CSS+HTML）附带源码...

最新推荐文章于 2024-08-11 17:47:06 发布
最新推荐文章于 2024-08-11 17:47:06 发布
阅读量2.9k 收藏 8
点赞数 1
文章标签： html代码表白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42126274/article/details/113077589
版权

0a342333b2194e6f62d2a02360ad227d.png

感谢键盘，十年如一日的守护我的双手！

也许程序猿不善言表，

温情藏匿于外冷内热之中，

但那些看起来冰冷的代码，

也能组合成最浪漫优美的情话，

今天我们就来看看程序员是如何把情话放进浪漫的代码。

下面这是最终效果静态展示，试试有惊喜哦！

5df1c7647e38da388976d13032234f48.png

话不多说，以下是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pictures</title>
    <link rel="stylesheet" href="css/demo.css">
</head>

<body>
    <div class="wrapper">
        <ul>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <img height='180px' width='180px' src='img/pic1.png'>
                    </div>
                    <div class='hide'>
                        <h3>
                           我❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <img height='180px' width='180px' src='img/pic2.png'>
                    </div>
                    <div class='hide'>
                        <h3>
							好❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <img height='180px' width='180px' src='img/pic3.png'>
                    </div>
                    <div class='hide'>
                        <h3>
                           喜❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic4.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                           欢❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic2-1.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                            你❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic2-2.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                            跟❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic2-3.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                           我❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic2-4.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                          在❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic3-1.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                            一❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic3-2.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                            起❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic3-3.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                           好❥
                        </h3>
                    </div>
                </div>
            </li>
            <li>
                <div class='picBox'>
                    <div class='show'>
                        <image height='180px' width='180px' src='img/pic3-4.png'></image>
                    </div>
                    <div class='hide'>
                        <h3>
                            吗❥
                        </h3>
                    </div>
                </div>
            </li>
        </ul>
    </div>
	
    <script src="js/jquery.min.js"></script>
    <script src="js/demo.js"></script>
	
</body>
</html>

以下是CSS：

*{
    margin:0;
}
body{
	background-color: #2F2F2F;
}
.wrapper{
    max-width:900px;
    margin:80px auto;
}
.wrapper li{
    position: relative;
    width: 180px;
    height: 180px;
    list-style:none;
    margin: 5px;
    display: inline-block;
    perspective: 300px;
  }
  .picBox{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -90px;
    animation: 200ms ease-out 0ms 1 normal forwards;
  }

.show,
.hide{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
.hide{
    color:#fff;
    background-color:#000;
    text-align:center;
    line-height:180px;
    transform: translate3d(0,0,-1px);
    /* 3D空间内移动一个元素的位置 */
}


.in-top .hide,
.out-top .hide
 {
    transform-origin: 0% 100%;
    transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{
    animation-name: in-top;
    animation-play-state: running;
}
.out-top .picBox{
    animation-name: out-top;
    animation-play-state: running;
}
@keyframes in-top {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(-1,0,0,90deg)}
} 

@keyframes out-top {
    from {transform: rotate3d(-1,0,0,90deg)}
    to   {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {
          transform-origin: 0% 0%;
          transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{
    animation-name: in-right;
    animation-play-state: running;
}
.out-right .picBox{
    animation-name: out-right;
    animation-play-state: running;
}
@keyframes in-right {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(0,-1,0,90deg)}
}

@keyframes out-right {
    from  {transform: rotate3d(0,-1,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}

.in-bottom .hide,
.out-bottom .hide {
          transform-origin: 0% 0%;
          transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{
    animation-name: in-bottom;
    animation-play-state: running;
}
.out-bottom .picBox{
    animation-name: out-bottom;
    animation-play-state: running;
}
@keyframes in-bottom {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {
    from  {transform: rotate3d(1,0,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {
          transform-origin: 100% 0;
          transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {
    from  {transform: rotate3d(0,1,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{
          animation-name: in-left;
          animation-play-state: running;
}
.out-left .picBox{
          animation-name: out-left;
          animation-play-state: running;
}

在这里推荐下python的学习交流平台，欢迎大家一起进步

正在跳转​jq.qq.com
zhang james
关注
学会这个你还没对象？程序员浪漫表白代码（JS+CSS+HTML）附带源码
weixin_46737755的博客
01-05 2963
感谢键盘，十年如一日的守护我的双手！ 也许程序猿不善言表， 温情藏匿于外冷内热之中， 但那些看起来冰冷的代码， 也能组合成最浪漫优美的情话， 今天我们就来看看程序员是如何把情话放进浪漫的代码。 下面这是最终效果静态展示，试试有惊喜哦！ 很多人学习python，不知道从何学起。 很多人学习python，掌握了基本语法过后，不知道在哪里寻找案例上手。 很多已经做案例的人，却不知道如何去学习更加高深的知识。 那么针对这三类人，我给大家提供一个好的学习平台，免费领取视频教程，电子书籍，以及课程的源代码！ QQ群
使用html+css+js实现一个静态页面（含源码）
qq_38515380的博客
04-08 534
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》
02-02
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》 可以玩的网页 节日送给女朋友 礼物【修正版】 打开网页 会出现心形排列的字母 用鼠标移动字母 从左到右排列成 MerryChristmas 会有奇迹出现 点开试试吧 定会让你的女生感动不已 PS：里面的文字和照片是鄙人和我女友的，亲们记得换成自己想说的话和想要的照片，祝福每对情侣开心幸福！
Html5源码--程序员向女友表白专用代码
05-10
Html5程序员表白专用代码 很漂亮的花环爱心界面，绝对让不善于表达的你 敢于用代码表达爱 ，给女朋友一个惊喜吧（浏览器必须是用的HTML5才能正常显示）
HTML——表白（效果+代码）
最新发布
2401_85835599的博客
08-11 360
moustime++;document.getElementById(“world”).innerHTML = “曾经沧海难为水，除却巫山不是云”;moveon();;moveon();;}, 2000);});script.jsspeed = 5,//速度定义//大小定义_s = _s/10;x:_x,y:_y,
❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-15 5515
情人节/520/七夕/ html+css+js 流星雨3D相册(程序员表白必备/含音乐)制作教程来啦! ❤七夕情人节表白,520/七夕情人节/求婚/ 3D相册 程序员也可以很浪漫哦❤ ❤520创意表白网站，让女友对你死心塌地。女神轻松领回家❤ Html+css 实现3d旋转相册-包含音乐,(生日送女友,表白,撩妹)，动态生成效果, 抖音很火的旋转相册,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦! ❤旋转3D流星相
html表白代码
酷酷的馫博客
11-26 2万+
html表白代码
程序员表白专用HTML5网页代码
04-20
整理版，删除不必要的链接与一些冗余代码。 程序猿表白专用的HTML5动画特效网页。左侧的文字是类似打字效果的动画形式，右侧是恋爱计时。 因IE9以前的浏览器不支持HTML5,所以你在查看本效果的时候，最好使用火狐Firefox浏览器或Chrome浏览器。
HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-22 3万+
HTML期末大作业~制作简单漫画网页设计6个页面(HTML+CSS+JavaScript) 学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板 HTML网页设计制作大作业-供包含注册 登录 首页 动漫电影 日本动漫 国产动漫 OVA版 排行榜 等 8个页面 网页制作介绍 关于动漫的HTML网页制作，，HTML期末作业大作业A+水平！！主要特色：附带音效，8个网页8个风格。每个都有不同的美感~ 随着动漫产业，动漫文化的不断发展，动漫已经从过去的
七夕情人节送花告白动画(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-21 3346
七夕情人节送花告白动画(HTML+CSS+JavaScript) HTML5七夕情人节送花动画是一款七夕情人节男士买花送给女士的动画短片，代码附带详细中文注释，供大家参考，方便使用。 文章目录七夕情人节送花告白动画(HTML+CSS+JavaScript)效果演示代码目录代码实现做好的网页效果,如何通过发链接给别人看?1.1解决部署上线~> 部署上线工具(永久免费使用)1.1部署流程1.2 哇~ 部署成功前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)源码获取更
程序员表白程序 源码开放性 第一辑 不断更新（程序之爱系列第一辑）
06-18
【程序员表白程序 源码开放性 第一辑 不断更新（程序之爱系列第一辑）】 本项目是一份特别的编程作品，旨在通过代码来传达情感，将程序员的浪漫与技术结合，形成了一种独特的表白方式。源码开放性的特点意味着任何...
html浪漫告白网页
10-28
爱情都是从告白开始的！告白是必须迈出的第一步。独属于IT民工的告白方式！内容文字方便替换！
程序员表白html
02-06
程序员表白html，真的很好哦，想要泡妹子的，那你就快来下载吧！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
HTML 程序员表白源码
04-22
程序员表白源码
浪漫页面表白（附代码）
05-21
此代码支持修改，页面的浪漫性极高，是表白的不二之选。
表白HTML源代码
08-02
表白用的HTML源代码，内容可自行修改。
html表白_七夕，程序员的表白代码
weixin_39576294的博客
12-01 3311
本专栏的目的是收集全网最优秀的文章，供Java程序员成长，若有侵权，请联系我们删除。七夕快到了，表白素材赶紧先准备好。。。0、委婉的表白Python 代码：import stringl = string.ascii_letterss = []s.append(l[34])s.append(l[11])s.append(l[14])s.append(l[21])s.append(l[4])s.app...
用HTML写一段表白代码
weixin_35755562的博客
12-20 790
你好！ 如果你想用 HTML 写一段表白代码，可以这样写： <div> <p>亲爱的，</p> <p>我一直都在你身边，看着你成长，看着你变得越来越美。我想对你说，我喜欢你。</p> <p>我知道，我不是你最理想的对象，但是我会努力变得更好，成为你能够依靠的人。</p> <p>希望你能给...
html表白_程序员浪漫起来没文科生什么事：HTML制作表白爱心-无需编程基础
weixin_39948210的博客
12-01 691
都说程序员是大大的直男，但是一旦程序员浪漫起来，他们会用他们狂拽酷炫吊的技能展现自己的罗曼蒂克实力，那时候就真的没文科男什么事啦！下面我就跟大家分享如何用简单的html制作一个网页版的爱心表白，不管你是不是程序员都能用，手机就可展示。先来看下效果：后面会提供给大家源代码，在这里先交大家怎么去根据自己的实际情况去改这个文件。复制源代码首先大家将我后面的源代码复制下来并且粘贴进一个txt文件就可以。j...
程序员表白神器：125款HTML+CSS+JS表白网站代码
本资源是一份关于HTML、CSS和JavaScript结合的程序员专属表白网站集合，旨在帮助技术爱好者在情人节等特殊场合向心仪的对象表达情感。这份125款精选的表白网站代码涵盖了HTML结构、CSS样式和JavaScript交互，使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值