Multiple ways to play CSS --- have you learned it?

Comrades, recently discovered some interesting CSS gameplay, if you are interested, please take it~~~


play one

have a cool loading

Show results:

Sample code:

HTML part

	<body>
		<main>
			<div class="cube">
				<span style="--i:1;"></span>
				<span style="--i:2;"></span>
				<span style="--i:3;"></span>
				<span style="--i:4;"></span>
				<span style="--i:5;"></span>
				<span style="--i:6;"></span>
				<span style="--i:7;"></span>
				<span style="--i:8;"></span>
				<span style="--i:9;"></span>
				<span style="--i:10;"></span>
				<span style="--i:11;"></span>
				<span style="--i:12;"></span>
				<span style="--i:13;"></span>
				<span style="--i:14;"></span>
				<span style="--i:15;"></span>
				<span style="--i:16;"></span>
				<span style="--i:17;"></span>
				<span style="--i:18;"></span>
				<span style="--i:19;"></span>
				<span style="--i:20;"></span>
			</div>
			<div class="loading">
				<p>loading</p>
			</div>

		</main>
	</body>

css part

<style>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	main {
		display: flex;
		background-color: #2c3a47;
		/*用于设置图像居中 */
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 1000px;
		animation: animate1 10s linear infinite;
	}

	/* 用于设置动画属性 其中filter用于做利镜其中的hue-rotate属性让图像运用色相旋转*/
	@keyframes animate1 {
		0% {
			filter: hue-rotate(0deg);
		}

		100% {
			filter: hue-rotate(360deg);
		}
	}

	main .cube {
		position: relative;
		height: 120px;
		width: 120px;
	}

	main .cube span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* 用于设置一个圆圈被分成几份 */
		transform: rotate(calc(18deg*var(--i)));
	}

	/* :before用于设置在给定的属性之前添加效果 */
	main .cube span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: aqua;
		box-shadow: 0 0 10px aqua, 0 0 20px aqua, 0 0 40px aqua, 0 0 80px aqua, 0 0 100px aqua;
		animation: animate 2s linear infinite;
		animation-delay: calc(0.1s*var(--i));
	}

	@keyframes animate {
		0% {
			transform: scale(1);
		}

		80%,
		100% {
			transform: scale(0);
		}
	}

	.loading {
		color: #fff;
		font-size: 20px;
		position: relative;
		top: 100px;
		right: 100px;
	}

	@media (min-width:765px) {}
</style>

play two

Make a rotating album collection that belongs only to her (him)

Show results:

Digression:

In this peaceful, beautiful and infinitely charming world, if you are a hard-working, nine-to-five wage earner looking for a rich and beautiful (high, rich and handsome), this kind of plot usually appears in idol dramas , so in order to experience the pain of love, what should you do, of course, is to try to find a way to capture his (her) heart~

 As a qualified programmer, of course you must know some romantic codes. Make a rotating photo album that only belongs to her (him) with your heart , and let the cold codes have emotional colors in minutes~~~

示例代码:

HTML part

<body>
		<div id="box">
			<img src="img/1-1.png" alt="">
			<img src="img/1-3.png" alt="">
			<img src="img/1.png" alt="">
			<img src="img/2-1 (1).png" alt="">
			<img src="img/3-1.png" alt="">
			<img src="img/4-1.png" alt="">
			<img src="img/5-1.png" alt="">
			<img src="img/6-1.png" alt="">
			<img src="img/3.png" alt="">
			<img src="img/4.png" alt="">
		</div>
	</body>

css part

<style>
	* {
		margin: 0;
		padding: 0;
	}

	body {
		height: 100%;
		/* background-image: url("img/1-1.png"); */
		background-color: #d7cdf3;
	}

	/* 动画时长:   例如:50s infinite 循环播放   每多少秒默认循环播放一次  
   infinite 循环播放     linear 默认循环一次 */
	/*指定嵌套元素,在3D空间中呈现 */
	#box {
		width: 280px;
		height: 400px;
		transform-style: preserve-3d;
		animation: go 280s linear infinite;
		margin: auto;
		position: fixed;
		left: 0px;
		right: 0px;
		top: 0;
		bottom: 0px;
	}

	#box img {
		width: 280px;
		height: 400px;
		/*绝对定位 */
		position: absolute;
		left: 0px;
		top: 0px;
	}

	/* 让图片向外推出,使用translateZ(650px);
rotateY(0deg):以Y轴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);
	}

	@keyframes go {
		0% {
			transform: rotateX(0deg) rotateY(0deg);
		}

		25% {
			transform: rotateX(20deg) rotateY(180deg);
		}

		50% {
			transform: rotateX(0deg) rotateY(360deg);
		}

		75% {
			transform: rotateX(0deg) rotateY(540deg);
		}

		100% {
			transform: rotateX(0deg) rotateY(720deg);
		}
	}
</style>

The code is here, take it quickly~~~

I hope everyone will be happy every day, and I wish you all lovers will get married in the end~~~

Guess you like

Origin blog.csdn.net/z_2183441353/article/details/126905504