旋转de盒子

最新推荐文章于 2024-07-24 13:45:34 发布

隔音liu.

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量54

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_50892208/article/details/127721961

版权

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8" />
		<title>关于我们</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body,
			html {
				height: 100%;
			}
			/* 背景图片在这里设置 */
			body {
				background-image: url("images/11.jpg");
				background-size: 100% 100%;
			}
			#box {
				width: 280px;
				height: 400px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg);
				animation: go 30s linear infinite;
			}
			#box img {
				width: 280px;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
			}
			#box img:nth-child(1) {
				transform: rotateY(0deg) translateZ(650px);
			}
			#box img:nth-child(2) {
				transform: rotateY(36deg) translateZ(650px);
			}
			#box img:nth-child(3) {
				transform: rotateY(72deg) translateZ(650px);
			}
			#box img:nth-child(4) {
				transform: rotateY(108deg) translateZ(650px);
			}
			#box img:nth-child(5) {
				transform: rotateY(144deg) translateZ(650px);
			}
			#box img:nth-child(6) {
				transform: rotateY(180deg) translateZ(650px);
			}
			#box img:nth-child(7) {
				transform: rotateY(216deg) translateZ(650px);
			}
			#box img:nth-child(8) {
				transform: rotateY(252deg) translateZ(650px);
			}
			#box img:nth-child(9) {
				transform: rotateY(288deg) translateZ(650px);
			}
			#box img:nth-child(10) {
				transform: rotateY(324deg) translateZ(650px);
			}
			#MyCanvas {
				border: 1px solid lightblue;
				background: url(images/16.JPG) no-repeat;
			}
			div{
				width: 500px;
			}
			@keyframes go {
				0% {
					transform: rotateX(0deg) rotateY(0deg);
				}
				25% {
					transform: rotateX(20deg) rotateY(180deg);
				}
				50% {
					transform: rotateX(0deg) rotateY(360deg);
				}
				75% {
					transform: rotateX(-20deg) rotateY(540deg);
				}
				100% {
					transform: rotateX(0deg) rotateY(720deg);
				}
			}
			.box{
			    width: 200px;
			    height: 400px;
			    position: relative;
			    margin-top: 170px;
				margin-left: 130px;
			    transform: all 0.5s;
				
			}
			@keyframes moves{
			    from{box-shadow: 0 0 0 transparent;}
			    30%{box-shadow: 0 0 50px rgb(236, 57, 57);}
			    60%{box-shadow: 0 0 80px rgb(241, 97, 97);}
			}
			.box>div{
			    animation: moves 1s infinite;
			    transition-delay: 1s;
			}
			.box_1{
			    width: 100px;
			    height: 100px;
			    border-radius: 50%;
			    background: red;
			    border-bottom: 0;
				
			}
			div:nth-child(2){
			    position: absolute;
			    top: 0;
			    left:80px;
			}
			.box_2{
			    width: 100px;
			    height: 130px;
			    background: red;
			    transform: rotateZ(57deg);
			   
			}
			.box>div:nth-child(3){
			    position: absolute;
			    top: 2px;
			    right: 31px;
			    background-color: red;
			    border-radius: 50% 50% 0% 0;
			    box-shadow: 0 0 0 transparent !important;
			}
			.box>div:last-child{
			    position: absolute;
			    top: 4px;
			    left: 12px;
			    transform: rotateZ(122deg);
			    border-radius: 0 0% 50% 50%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="images/1.jpg" />
			<img src="images/2.jpg" />
			<img src="images/3.jpg" />
			<img src="images/4.jpg" />
			<img src="images/5.jpg" />
			<img src="images/6.jpg" />
			<img src="images/7.jpg" />
			<img src="images/8.jpg" />
			<img src="images/9.jpg" />
			<img src="images/15.jpg" />
			<div>
				<p style="text-align: center;">你是我的全部呀</p>
				<div class="box">
				    <div class="box_1"></div>
				    <div class="box_1"></div>
				    <div class="box_2"></div>
				    <div class="box_2"></div>
				</div>
			</div>
			<canvas id="MyCanvas" width="600" height="450"></canvas>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var ctx = document.getElementById("MyCanvas").getContext("2d");
				ctx.width = document.documentElement.clientWidth-20;
				ctx.height = document.documentElement.clientHeight-20;
				var r = 4;
			
				function drawHeart() {
					var num = 40; //分割为360个点绘制
					var redian;
					var startRedian = Math.PI;
					var redianDecrement;
					var i = 0;
					var time = 100;
					ctx.strokeStyle = "black";
					ctx.lineWidth = 2;
					redian = startRedian;
					redianDecrement = 2 * Math.PI / num;
					ctx.moveTo(getX(redian), getY(redian));
					var intervalId = setInterval(function(){
						redian += redianDecrement;
						ctx.lineTo(getX(redian), getY(redian));
						i++;
						ctx.stroke();
						if (i >= num) {
							clearInterval(intervalId);
						}
					}, time);
					ctx.font = "20px 宋体";
					ctx.strokeText("ai", 120, 222);
					ctx.strokeText("ni", 400, 222);
					ctx.strokeText("起点是你，终点亦是你", 150, 50);
					ctx.strokeText("漫漫长路，携手共进！", 150, 90);
				}
				function getX(t) {
					return 300 + r * (16 * Math.pow(Math.sin(t), 3));
				}
				
				function getY(t) {
					return 200 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
				}
			drawHeart();
			}
		</script>
	</body>
</html>