CSS3牛顿摇摆球动画特效

原创已于 2025-06-27 13:16:13 修改 · 869 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-11 14:41:28 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3牛顿摇摆球动画特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #1e3c72, #2a5298);
font-family: Arial, sans-serif;
overflow: hidden;
}

.container {
text-align: center;
position: relative;
}

.title {
color: white;
font-size: 2.5em;
margin-bottom: 50px;
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.newtons-cradle {
--uib-size: 300px;
--uib-speed: 1.2s;
--uib-color: #fff;

position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--uib-size);
height: var(--uib-size);
margin: 0 auto;
}

.newtons-cradle__dot {
position: relative;
display: flex;
align-items: center;
height: 100%;
width: 25%;
transform-origin: center top;
}

.newtons-cradle__dot::after {
content: '';
display: block;
width: 100%;
height: 25%;
border-radius: 50%;
background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
animation: swing2 var(--uib-speed) linear infinite;
}

.stand {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: #333;
border-radius: 5px;
}

.strings {
position: absolute;
top: 10px;
left: 0;
right: 0;
height: 150px;
display: flex;
justify-content: space-around;
}

.string {
width: 2px;
height: 100%;
background: #fff;
transform-origin: top center;
}

.string:nth-child(1) {
animation: swing-string var(--uib-speed) linear infinite;
}

.string:nth-child(5) {
animation: swing2-string var(--uib-speed) linear infinite;
}

.link {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
}

.link a {
color: white;
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}

.link a:hover {
background: rgba(255,255,255,0.3);
}

@keyframes swing {
0% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
25% {
transform: rotate(30deg);
animation-timing-function: ease-in;
}
50% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}

@keyframes swing2 {
0% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
50% {
transform: rotate(0deg);
animation-timing-function: ease-in;
}
75% {
transform: rotate(-30deg);
animation-timing-function: ease-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}

@keyframes swing-string {
0% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
25% {
transform: rotate(30deg);
animation-timing-function: ease-in;
}
50% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}

@keyframes swing2-string {
0% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
50% {
transform: rotate(0deg);
animation-timing-function: ease-in;
}
75% {
transform: rotate(-30deg);
animation-timing-function: ease-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">牛顿摇摆球动画</h1>

<div class="newtons-cradle">
<div class="stand"></div>
<div class="strings">
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
</div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
</div>

<div class="link">

</div>
</div>
</body>
</html>