这篇博客介绍了如何使用CSS3创建一个在X轴上旋转80度的平铺网格效果。通过设置背景颜色、渐变、平铺大小和位置，以及应用透视和旋转变换，实现了视觉上的立体感。此外，还添加了一个文字元素，使用动画使其仿佛穿过网格空间，增加了动态效果。
CSS
语言：
CSSSCSS
确定
body {
background-color: #313640;
overflow: hidden;
}
.grid {
top: -400px;
bottom: -400px;
left: -400px;
right: -400px;
position: absolute;
background-color: #313640;
background-image: -webkit-linear-gradient(#ff0092 1px, transparent 2px), -webkit-linear-gradient(0deg, #ff0092 1px, transparent 2px);
background-image: linear-gradient(#ff0092 1px, transparent 2px), linear-gradient(90deg, #ff0092 1px, transparent 2px);
background-size: 3% 3%, 3% 3%;
background-position: 0 0, 0 0;
-webkit-transform: perspective(300px) rotateX(80deg);
transform: perspective(300px) rotateX(80deg);
}
.eightys-text {
color: #ff0092;
font-family: 'Audiowide', cursive;
font-size: 30px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
height: 80px;
margin: auto;
text-shadow: 0 0 12px rgba(186, 1, 255, 0.8);
}
label {
font-family: 'Audiowide', cursive;
color: #ff0092;
text-shadow: 0 0 12px rgba(186, 1, 255, 0.8);
}
input:checked ~ .grid {
-webkit-animation: throughSpace 2s linear;
animation: throughSpace 2s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes throughSpace {
0% {
-webkit-transform: perspective(300px) rotateX(80deg) translateY(0%);
transform: perspective(300px) rotateX(80deg) translateY(0%);
}
100% {
-webkit-transform: perspective(300px) rotateX(80deg) translateY(5.8%);
transform: perspective(300px) rotateX(80deg) translateY(5.8%);
}
}
@keyframes throughSpace {
0% {
-webkit-transform: perspective(300px) rotateX(80deg) translateY(0%);
transform: perspective(300px) rotateX(80deg) translateY(0%);
}
100% {
-webkit-transform: perspective(300px) rotateX(80deg) translateY(5.8%);
transform: perspective(300px) rotateX(80deg) translateY(5.8%);
}
}
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
