https://github.com/ramostear/newton-s-cradle
基于HTML和CSS @keyframes实现的牛顿摆特效
https://github.com/ramostear/newton-s-cradle
css html keyframes-animation newton-cradle
Last synced: 3 months ago
JSON representation
基于HTML和CSS @keyframes实现的牛顿摆特效
- Host: GitHub
- URL: https://github.com/ramostear/newton-s-cradle
- Owner: ramostear
- License: apache-2.0
- Created: 2020-07-03T03:29:40.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-03T03:49:33.000Z (almost 5 years ago)
- Last Synced: 2025-01-08T21:41:20.109Z (4 months ago)
- Topics: css, html, keyframes-animation, newton-cradle
- Language: CSS
- Homepage:
- Size: 1.65 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# HTML + CSS @keyframes实现牛顿摆特效
## HTML 代码
```html
Newton`s-Animation
```
## CSS 代码
```css
body{
padding: 0;
margin: 0;
box-sizing: border-box;
background-image: linear-gradient(to bottom,#333,#222);
background-size: cover;
width: 100%;
height: 100vh;
}
.newton-box{
position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-top: 8px solid #ddd;
border-left: 8px solid #ddd;
border-right: 8px solid #ddd;
padding: 0 50px 20px;
}
.newton-box .circle{
position: relative;
display: block;
width: 1px;
height: 600px;
background: #ddd;
margin: 0 100px;
transform-origin: top;
}
.circle:before{
content: '';
position: absolute;
bottom: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle at 80px 80px, #b4fef2, #757575);
border-radius: 50%;
left: -100px;
}
.circle:nth-child(1),.circle:nth-child(2){
animation: anim-1 2s linear infinite;
}
.circle:nth-child(4),.circle:nth-child(5){
animation: anim-2 2s linear infinite 1s;
}
.bottom-box{
position: absolute;
width: 1300px;
height: 60px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: -1;
}
.bottom-box:before{
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 50px;
background-color: #ddd;
transform-origin: left;
transform: skewX(-41deg);
z-index: -1;
}
@keyframes anim-1 {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(60deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes anim-2 {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(-60deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
```