css3小球坠落,CSS3 圆球体内的小球碰撞运动
CSS
語言：
CSSSCSS
確定
body {
background: #f9fbe7;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 10rem;
height: 10rem;
margin-top: -5rem;
margin-left: -5rem;
background: #bbdefb;
border-radius: 100%;
}
.circle-container {
position: absolute;
top: 0;
left: 50%;
width: 1rem;
height: 10rem;
margin-left: -0.5rem;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.circle-container:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 1rem;
height: 1rem;
background: #fff3e0;
border-radius: 50%;
}
@-webkit-keyframes there-back {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(9rem);
transform: translateY(9rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes there-back {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(9rem);
transform: translateY(9rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.circle-container-0 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-container-0:before {
-webkit-animation: there-back 2s infinite 0s ease-in-out;
animation: there-back 2s infinite 0s ease-in-out;
}
.circle-container-1 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle-container-1:before {
-webkit-animation: there-back 2s infinite 0.1s ease-in-out;
animation: there-back 2s infinite 0.1s ease-in-out;
}
.circle-container-2 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle-container-2:before {
-webkit-animation: there-back 2s infinite 0.2s ease-in-out;
animation: there-back 2s infinite 0.2s ease-in-out;
}
.circle-container-3 {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.circle-container-3:before {
-webkit-animation: there-back 2s infinite 0.3s ease-in-out;
animation: there-back 2s infinite 0.3s ease-in-out;
}
.circle-container-4 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-container-4:before {
-webkit-animation: there-back 2s infinite 0.4s ease-in-out;
animation: there-back 2s infinite 0.4s ease-in-out;
}
.circle-container-5 {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.circle-container-5:before {
-webkit-animation: there-back 2s infinite 0.5s ease-in-out;
animation: there-back 2s infinite 0.5s ease-in-out;
}
.circle-container-6 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle-container-6:before {
-webkit-animation: there-back 2s infinite 0.6s ease-in-out;
animation: there-back 2s infinite 0.6s ease-in-out;
}
.circle-container-7 {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.circle-container-7:before {
-webkit-animation: there-back 2s infinite 0.7s ease-in-out;
animation: there-back 2s infinite 0.7s ease-in-out;
}
.circle-container-8 {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.circle-container-8:before {
-webkit-animation: there-back 2s infinite 0.8s ease-in-out;
animation: there-back 2s infinite 0.8s ease-in-out;
}
總結
以上是生活随笔為你收集整理的css3小球坠落,CSS3 圆球体内的小球碰撞运动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大学生创业交流会计算机二级,我校召开第三
- 下一篇： css中float详解,CSS浮动属性F