在中间想周围从远及近散射，手电筒类型的

最新推荐文章于 2024-11-07 10:38:40 发布

wsy157

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量129

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wsy157/article/details/118569661

版权

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        *{margin:0;padding:0}
        body{height:1080px;width:1920px;overflow: hidden;}
        .ct {
				position: absolute;
				top: 200px;
				left: 900px;
				width: 220px;
				height: 280px;
				transform-style: preserve-3d;
				perspective-origin: center 30vh;
				perspective: 1000px;
			}
			
			.ct .item {
				font-size: 100px;
				position: absolute;
				transform-origin: center;
				width: 100px;
				transform: translateZ(-10000px);
				opacity: 0;
				transition: opacity .5s linear;
				cursor: pointer;
				text-align: center;
			}
			
			
		</style>
</head>

<body>
    <div class="ct" >
		
        </div></div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        var list=[
            {"id":1},
            {"id":2},
            {"id":3},
            {"id":4},
            {"id":5},
            {"id":6},
            {"id":7},
            {"id":8},
            {"id":9},
            {"id":10},
            {"id":11},
            {"id":12},
            {"id":13},
            {"id":14},
            {"id":15},
            {"id":16},
            {"id":17},
        ]
        show();
        function show() {
            var htm="";
            for(var i=0;i<list.length;i++){
                
                htm += '<div class="item" data-i="' + i + '">'+list[i].id+'</div>'
            }
            $('.ct').html(htm);
            move()
        }
        function move() {
						for (let i = 0, len = list.length; i < len; i++) {
							if (i % 4 == 0) {
								$('.item').eq(i).css('top', -Number(Math.floor(Math.random() * 500) + 200) + 'px');
								$('.item').eq(i).css('left', -Number(Math.floor(Math.random() * 700) + 100) + 'px');
							} else if (i % 4 == 1) {
								$('.item').eq(i).css('top', -Number(Math.floor(Math.random() * 500) + 200) + 'px');
								$('.item').eq(i).css('left', Number(Math.floor(Math.random() * 700) + 100) + 'px');
							} else if (i % 4 == 2) {
								$('.item').eq(i).css('top', Number(Math.floor(Math.random() * 500) + 200) + 'px');
								$('.item').eq(i).css('left', -Number(Math.floor(Math.random() * 700) + 100) + 'px');
							} else {
								$('.item').eq(i).css('top', Number(Math.floor(Math.random() * 500) + 200) + 'px');
								$('.item').eq(i).css('left', Number(Math.floor(Math.random() * 700) + 100) + 'px');
							}
							$('.item').eq(i).attr('data-z', -10000)
							let delay = Math.floor(Math.random() * 10000)
							setTimeout(function() {
								let Z = ~~$('.item').eq(i).attr('data-z');
								timer = setInterval(function() {
									if (Z >= -9909) {
										$('.item').eq(i).css('opacity', 1)
									}
									if (Z >= -1000) {
										$('.item').eq(i).css('opacity', 0)
									}
									if (Z >= 1000) {
										Z = -10000
									}
									$('.item').eq(i).css('transform', 'translateZ(' + Z + 'px)')
									$('.item').eq(i).css('text-shadow', '10px 10px #888');
									Z += 10
								}, 5);
							}, delay)
						}
					}
    </script>
</body>

</html>