• 七夕到了——属于程序员的浪漫

    七夕节，又称七巧节、七姐节、女儿节、乞巧节、七娘会、七夕祭、牛公牛婆日、巧夕等，是中国民间的传统节日。七夕节由星宿崇拜衍化而来，为传统意义上的七姐诞，因拜祭“七姐”活动在七月七晩上举行，故名“七夕”。拜七姐，祈福许愿、乞求巧艺、坐看牵牛织女星、祈祷姻缘、储七夕水等，是七夕的传统习俗。经历史发展，七夕被赋予了“牛郎织女”的美丽爱情传说，使其成为了象征爱情的节日，从而被认为是中国最具浪漫色彩的传统节日，在当代更是产生了“中国情人节”的文化含义。

    创意代码表白

    以程序员的方式撒狗粮，专业浪漫，值得拥有！

    目录

    1、效果演示

    2、制作步骤/过程

    1、效果演示

    2、制作步骤/过程

    将代码里面的图片替换成你自己照片即可。

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>七夕到了——属于程序员的浪漫title>>
    6.     <style type="text/css">
    7. 			*{ margin:0; padding:0;}
    8. 			body{
    9. 				background:#000;
    10. 				overflow:hidden;
    11. 			}
    12. 			#perspective{
    13. 				perspective:800px;
    14. 			}
    15. 			#wrap{
    16. 				width:120px;  /*133:200  4:6  */
    17. 				height:180px;
    18. 				margin:0 auto;
    19. 				position:relative;
    20.  
    21. 				/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
    22. 				transform-style:preserve-3d;
    23. 				transform:rotateX(-10deg) rotateY(0deg);
    24. 				
    25. 			}
    26. 			#wrap img{
    27. 				width:100%;
    28. 				height:100%;
    29. 				position:absolute;
    30. 				
    31. 				 border-radius: 5px; /*加上圆角*/
    32.             box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/
    33.             -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
    34. 			}
    35. 			#wrap p{
    36. 				width:1200px;
    37. 				height:1200px;
    38. 				background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
    39. 				border-radius:100%;
    40. 				position:absolute;
    41. 				left:50%;
    42. 				top:102%;
    43. 				margin-left:-600px;
    44. 				margin-top:-600px;
    45. 				transform:rotateX(90deg);
    46. 			}
    47. 		style>
    48. head>
    49. <body>
    50. <div id="perspective">
    51. <div id='wrap'>
    52. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    53. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    54. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    55. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    56. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    57. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    58. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    59. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    60. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    61. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    62. <img src="https://img2.baidu.com/it/u=1653438158,1807707050&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=540" />
    63.  
    64. <p>p>
    65. div>
    66. div>
    67.  
    68.   <script type="text/javascript">
    69. 			window.onload = function(){
    70. 				var oWrap = document.getElementById('wrap');
    71. 				var oImg = oWrap.getElementsByTagName('img');
    72. 				var oImgLength = oImg.length;
    73. 				var Deg = 360 / oImgLength;
    74. 				var nowX , nowY , lastX , lastY , minusX = 0, minusY = 0;
    75. 				var roY = 0 , roX = -10;
    76. 				var timer;
    77.  
    78. 				for ( var i=0;i
    79. 				{
    80. 					oImg[i].style.transform = 'rotateY('+ i*Deg +'deg) translateZ(350px)';
    81. 					oImg[i].style.transition = 'transform 1s '+ (oImgLength-1-i)*0.1 +'s';
    82.  
    83. 				}
    84.  
    85. 				mTop();
    86.  
    87. 				window.onresize = mTop;
    88.  
    89. 				function mTop(){
    90. 					var wH = document.documentElement.clientHeight;
    91. 					oWrap.style.marginTop = wH / 2 - 180 + 'px';
    92. 				}
    93. 				
    94. 				// 拖拽：三个事件-按下 移动 抬起
    95. 				//按下
    96. 				document.onmousedown = function(ev){
    97. 					ev = ev || window.event;
    98.  
    99. 					//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
    100. 					lastX = ev.clientX;
    101. 					lastY = ev.clientY;
    102. 					
    103. 					//移动
    104. 					this.onmousemove = function(ev){
    105. 						ev = ev || window.event;
    106.  
    107. 						clearInterval( timer );
    108.  
    109. 						nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
    110. 						nowY = ev.clientY; // clientY ………………………………顶部………………
    111.  
    112. 						//当前坐标和前一点坐标差值
    113. 						minusX = nowX - lastX; 
    114. 						minusY = nowY - lastY;
    115. 						
    116. 						//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
    117. 						roY += minusX*0.2; // roY = roY + minusX*0.2;
    118. 						roX -= minusY*0.1;
    119. 	 
    120. 						oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
    121. 						
    122. 						/*
    123. 						//生成div，让div跟着鼠标动
    124. 						var oDiv = document.createElement('div');
    125. 						oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
    126. 						this.body.appendChild(oDiv);
    127. 						*/
    128. 						
    129. 						//前一点的坐标
    130. 						lastX = nowX;
    131. 						lastY = nowY;
    132.  
    133. 					}
    134. 					//抬起
    135. 					this.onmouseup = function(){
    136. 						this.onmousemove = null;
    137. 						timer = setInterval(function(){
    138. 							minusX *= 0.95;
    139. 							minusY *= 0.95;
    140. 							roY += minusX*0.2; // roY = roY + minusX*0.2;
    141. 							roX -= minusY*0.1;
    142. 							oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
    143.  
    144. 							if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 )
    145. 							{
    146. 								clearInterval( timer );
    147. 							}
    148. 							console.log( minusX );
    149. 						},13);
    150. 					}
    151. 					return false;
    152. 				}
    153. 			}
    154.  
    155. 		script>
    156. body>
    157. html>
  • 相关阅读:
    有意识的神经网络之对比网络层和后意识层
    【docker】配置深度学习环境
    java基础之：聊ThreadLocal类，以及其解决内存泄漏做法
    第十四章第一节：Java集合框架之ArrayList
    目标检测算法——3D公共数据集汇总（附下载链接）
    阿基米德签证小程序管理系统功能清单
    【Java】Java核心API概述
    滴滴可观测平台 Metrics 指标实时计算如何实现了又准又省？
    js操作数组的方法
    计算机网络-----IP地址分配
  • 原文地址：https://blog.csdn.net/qq_19309473/article/details/126096909