Comrades, recently discovered some interesting CSS gameplay, if you are interested, please take it~~~
Table of contents
Make a rotating album collection that belongs only to her (him)
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~~~