devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-02-21 23:57:19

赞

踩

程序员html表白

0a342333b2194e6f62d2a02360ad227d.png

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

也许程序猿不善言表，

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

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

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

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

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

5df1c7647e38da388976d13032234f48.png

话不多说，以下是HTML：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Pictures</title>
  8.     <link rel="stylesheet" href="css/demo.css">
  9. </head>
  10.  
  11. <body>
  12.     <div class="wrapper">
  13.         <ul>
  14.             <li>
  15.                 <div class='picBox'>
  16.                     <div class='show'>
  17.                         <img height='180px' width='180px' src='img/pic1.png'>
  18.                     </div>
  19.                     <div class='hide'>
  20.                         <h3>
  21.                            我❥
  22.                         </h3>
  23.                     </div>
  24.                 </div>
  25.             </li>
  26.             <li>
  27.                 <div class='picBox'>
  28.                     <div class='show'>
  29.                         <img height='180px' width='180px' src='img/pic2.png'>
  30.                     </div>
  31.                     <div class='hide'>
  32.                         <h3>
  33. 							好❥
  34.                         </h3>
  35.                     </div>
  36.                 </div>
  37.             </li>
  38.             <li>
  39.                 <div class='picBox'>
  40.                     <div class='show'>
  41.                         <img height='180px' width='180px' src='img/pic3.png'>
  42.                     </div>
  43.                     <div class='hide'>
  44.                         <h3>
  45.                            喜❥
  46.                         </h3>
  47.                     </div>
  48.                 </div>
  49.             </li>
  50.             <li>
  51.                 <div class='picBox'>
  52.                     <div class='show'>
  53.                         <image height='180px' width='180px' src='img/pic4.png'></image>
  54.                     </div>
  55.                     <div class='hide'>
  56.                         <h3>
  57.                            欢❥
  58.                         </h3>
  59.                     </div>
  60.                 </div>
  61.             </li>
  62.             <li>
  63.                 <div class='picBox'>
  64.                     <div class='show'>
  65.                         <image height='180px' width='180px' src='img/pic2-1.png'></image>
  66.                     </div>
  67.                     <div class='hide'>
  68.                         <h3>
  69.                             你❥
  70.                         </h3>
  71.                     </div>
  72.                 </div>
  73.             </li>
  74.             <li>
  75.                 <div class='picBox'>
  76.                     <div class='show'>
  77.                         <image height='180px' width='180px' src='img/pic2-2.png'></image>
  78.                     </div>
  79.                     <div class='hide'>
  80.                         <h3>
  81.                             跟❥
  82.                         </h3>
  83.                     </div>
  84.                 </div>
  85.             </li>
  86.             <li>
  87.                 <div class='picBox'>
  88.                     <div class='show'>
  89.                         <image height='180px' width='180px' src='img/pic2-3.png'></image>
  90.                     </div>
  91.                     <div class='hide'>
  92.                         <h3>
  93.                            我❥
  94.                         </h3>
  95.                     </div>
  96.                 </div>
  97.             </li>
  98.             <li>
  99.                 <div class='picBox'>
  100.                     <div class='show'>
  101.                         <image height='180px' width='180px' src='img/pic2-4.png'></image>
  102.                     </div>
  103.                     <div class='hide'>
  104.                         <h3>
  105.                           在❥
  106.                         </h3>
  107.                     </div>
  108.                 </div>
  109.             </li>
  110.             <li>
  111.                 <div class='picBox'>
  112.                     <div class='show'>
  113.                         <image height='180px' width='180px' src='img/pic3-1.png'></image>
  114.                     </div>
  115.                     <div class='hide'>
  116.                         <h3>
  117.                             一❥
  118.                         </h3>
  119.                     </div>
  120.                 </div>
  121.             </li>
  122.             <li>
  123.                 <div class='picBox'>
  124.                     <div class='show'>
  125.                         <image height='180px' width='180px' src='img/pic3-2.png'></image>
  126.                     </div>
  127.                     <div class='hide'>
  128.                         <h3>
  129.                             起❥
  130.                         </h3>
  131.                     </div>
  132.                 </div>
  133.             </li>
  134.             <li>
  135.                 <div class='picBox'>
  136.                     <div class='show'>
  137.                         <image height='180px' width='180px' src='img/pic3-3.png'></image>
  138.                     </div>
  139.                     <div class='hide'>
  140.                         <h3>
  141.                            好❥
  142.                         </h3>
  143.                     </div>
  144.                 </div>
  145.             </li>
  146.             <li>
  147.                 <div class='picBox'>
  148.                     <div class='show'>
  149.                         <image height='180px' width='180px' src='img/pic3-4.png'></image>
  150.                     </div>
  151.                     <div class='hide'>
  152.                         <h3>
  153.                             吗❥
  154.                         </h3>
  155.                     </div>
  156.                 </div>
  157.             </li>
  158.         </ul>
  159.     </div>
  160. 	
  161.     <script src="js/jquery.min.js"></script>
  162.     <script src="js/demo.js"></script>
  163. 	
  164. </body>
  165. </html>

以下是CSS：

  1. *{
  2.     margin:0;
  3. }
  4. body{
  5. 	background-color: #2F2F2F;
  6. }
  7. .wrapper{
  8.     max-width:900px;
  9.     margin:80px auto;
  10. }
  11. .wrapper li{
  12.     position: relative;
  13.     width: 180px;
  14.     height: 180px;
  15.     list-style:none;
  16.     margin: 5px;
  17.     display: inline-block;
  18.     perspective: 300px;
  19.   }
  20.   .picBox{
  21.     position: absolute;
  22.     top: 0;
  23.     right: 0;
  24.     bottom: 0;
  25.     left: 0;
  26.     transform-style: preserve-3d;
  27.     transform-origin: 50% 50% -90px;
  28.     animation: 200ms ease-out 0ms 1 normal forwards;
  29.   }
  30.  
  31. .show,
  32. .hide{
  33.     position: absolute;
  34.     top: 0;
  35.     right: 0;
  36.     bottom: 0;
  37.     left: 0;
  38.   }
  39. .hide{
  40.     color:#fff;
  41.     background-color:#000;
  42.     text-align:center;
  43.     line-height:180px;
  44.     transform: translate3d(0,0,-1px);
  45.     /* 3D空间内移动一个元素的位置 */
  46. }
  47.  
  48.  
  49. .in-top .hide,
  50. .out-top .hide
  51.  {
  52.     transform-origin: 0% 100%;
  53.     transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
  54. }
  55. .in-top .picBox{
  56.     animation-name: in-top;
  57.     animation-play-state: running;
  58. }
  59. .out-top .picBox{
  60.     animation-name: out-top;
  61.     animation-play-state: running;
  62. }
  63. @keyframes in-top {
  64.     from  {transform: rotate3d(0,0,0,0deg)}
  65.     to    {transform: rotate3d(-1,0,0,90deg)}
  66. } 
  67.  
  68. @keyframes out-top {
  69.     from {transform: rotate3d(-1,0,0,90deg)}
  70.     to   {transform: rotate3d(0,0,0,0deg)}
  71. }
  72. .in-right .hide,
  73. .out-right .hide {
  74.           transform-origin: 0% 0%;
  75.           transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
  76. }
  77. .in-right .picBox{
  78.     animation-name: in-right;
  79.     animation-play-state: running;
  80. }
  81. .out-right .picBox{
  82.     animation-name: out-right;
  83.     animation-play-state: running;
  84. }
  85. @keyframes in-right {
  86.     from  {transform: rotate3d(0,0,0,0deg)}
  87.     to    {transform: rotate3d(0,-1,0,90deg)}
  88. }
  89.  
  90. @keyframes out-right {
  91.     from  {transform: rotate3d(0,-1,0,90deg)}
  92.     to    {transform: rotate3d(0,0,0,0deg)}
  93. }
  94.  
  95. .in-bottom .hide,
  96. .out-bottom .hide {
  97.           transform-origin: 0% 0%;
  98.           transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
  99. }
  100. .in-bottom .picBox{
  101.     animation-name: in-bottom;
  102.     animation-play-state: running;
  103. }
  104. .out-bottom .picBox{
  105.     animation-name: out-bottom;
  106.     animation-play-state: running;
  107. }
  108. @keyframes in-bottom {
  109.     from  {transform: rotate3d(0,0,0,0deg)}
  110.     to    {transform: rotate3d(1,0,0,90deg)}
  111. }
  112. @keyframes out-bottom {
  113.     from  {transform: rotate3d(1,0,0,90deg)}
  114.     to    {transform: rotate3d(0,0,0,0deg)}
  115. }
  116. .in-left .hide,
  117. .out-left .hide {
  118.           transform-origin: 100% 0;
  119.           transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
  120. }
  121. @keyframes in-left {
  122.     from  {transform: rotate3d(0,0,0,0deg)}
  123.     to    {transform: rotate3d(0,1,0,90deg)}
  124. }
  125. @keyframes out-left {
  126.     from  {transform: rotate3d(0,1,0,90deg)}
  127.     to    {transform: rotate3d(0,0,0,0deg)}
  128. }
  129. .in-left .picBox{
  130.           animation-name: in-left;
  131.           animation-play-state: running;
  132. }
  133. .out-left .picBox{
  134.           animation-name: out-left;
  135.           animation-play-state: running;
  136. }

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

正在跳转​jq.qq.com
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/127418
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号