当前位置：网站首页>七夕专属程序员的浪漫

七夕专属程序员的浪漫

2022-08-04 05:36:00 【somnus_小凯】

七夕节，又称七巧节、七姐节、女儿节、乞巧节、七娘会、七夕祭、牛公牛婆日、巧夕等，是中国民间的传统节日。七夕节由星宿崇拜衍化而来，为传统意义上的七姐诞，因拜祭“七姐”活动在七月七晩上举行，故名“七夕”。

视频预览

Video_2022-08-02_130525

代码展示

<!DOCTYPE html>
<html>
<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>七夕——专属程序员的浪漫</title>
    <style type="text/css">
			*{
     margin:0; padding:0;}
			body{
    
				background:#000;
				overflow:hidden;
			}
			#perspective{
    
				perspective:800px;
			}
			#wrap{
    
				width:120px;  /*133:200  4:6  */
				height:180px;
				margin:0 auto;
				position:relative;
				transform-style:preserve-3d;
				transform:rotateX(-10deg) rotateY(0deg);
				
			}
			#wrap img{
    
				width:100%;
				height:100%;
				position:absolute;
				 border-radius: 5px;
            box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/
            -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
			}
			#wrap p{
    
				width:1200px;
				height:1200px;
				background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
				border-radius:100%;
				position:absolute;
				left:50%;
				top:102%;
				margin-left:-600px;
				margin-top:-600px;
				transform:rotateX(90deg);
			}
		</style>
</head>
<body>
<div id="perspective">
<div id='wrap'>
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img0.baidu.com/it/u=1047318194,3625598277&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />
<img src="https://img1.baidu.com/it/u=2253934746,2736777711&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" />

 
<p></p>
</div>
</div>
 
  <script type="text/javascript">
			window.onload = function(){
    
				var oWrap = document.getElementById('wrap');
				var oImg = oWrap.getElementsByTagName('img');
				var oImgLength = oImg.length;
				var Deg = 360 / oImgLength;
				var nowX , nowY , lastX , lastY , minusX = 0, minusY = 0;
				var roY = 0 , roX = -10;
				var timer;
 
				for ( var i=0;i<oImgLength;i++ )
				{
    
					oImg[i].style.transform = 'rotateY('+ i*Deg +'deg) translateZ(350px)';
					oImg[i].style.transition = 'transform 1s '+ (oImgLength-1-i)*0.1 +'s';
 
				}
 
				mTop();
 
				window.onresize = mTop;
 
				function mTop(){
    
					var wH = document.documentElement.clientHeight;
					oWrap.style.marginTop = wH / 2 - 180 + 'px';
				}
				document.onmousedown = function(ev){
    
					ev = ev || window.event;
					lastX = ev.clientX;
					lastY = ev.clientY;
					this.onmousemove = function(ev){
    
						ev = ev || window.event;
						clearInterval( timer );
						nowX = ev.clientX;
						nowY = ev.clientY;
						minusX = nowX - lastX; 
						minusY = nowY - lastY;
						roY += minusX*0.2; // roY = roY + minusX*0.2;
						roX -= minusY*0.1;
						oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
						lastX = nowX;
						lastY = nowY;
 
					}
					this.onmouseup = function(){
    
						this.onmousemove = null;
						timer = setInterval(function(){
    
							minusX *= 0.95;
							minusY *= 0.95;
							roY += minusX*0.2; // roY = roY + minusX*0.2;
							roX -= minusY*0.1;
							oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
 
							if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 )
							{
    
								clearInterval( timer );
							}
							console.log( minusX );
						},13);
					}
					return false;
				}
			}
		</script>
</body>
</html>