本文介绍了一个使用CSS实现的动态效果——斐波那契方块。通过精巧的CSS布局与动画设置，该效果展示了不同大小的方块按照斐波那契数列排列并旋转，营造出一种独特的视觉体验。
CSS
语言：
CSSSCSS
确定
.fibonacci-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #9c00b5;
overflow: hidden;
}
.fibonacci-squares {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 126px;
height: 204px;
}
.fibonacci-squares .square {
box-sizing: border-box;
position: absolute;
border: 1px solid yellow;
background-color: transparent;
}
.fibonacci-squares .square.square-1 {
width: 126px;
height: 126px;
bottom: 0;
-webkit-animation-name: none;
animation-name: none;
}
.fibonacci-squares .square.square-2 {
width: 78px;
height: 78px;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
top: -78px;
right: 0;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-3 {
width: 48px;
height: 48px;
-webkit-transform-origin: top right;
transform-origin: top right;
top: 0;
left: -48px;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-4 {
width: 30px;
height: 30px;
-webkit-transform-origin: top left;
transform-origin: top left;
bottom: -30px;
left: 0;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-5 {
width: 18px;
height: 18px;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
bottom: 0;
right: -18px;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-6 {
width: 12px;
height: 12px;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
top: -12px;
right: 0;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-7 {
width: 6px;
height: 6px;
-webkit-transform-origin: top right;
transform-origin: top right;
top: 0;
left: -6px;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
.fibonacci-squares .square.square-8 {
width: 6px;
height: 6px;
-webkit-transform-origin: top left;
transform-origin: top left;
bottom: -6px;
left: 0;
-webkit-animation: square-rotate 8s infinite;
animation: square-rotate 8s infinite;
}
@-webkit-keyframes square-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes square-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
扫一扫
7187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
