前端日常实践：50#视频演示如何用纯CSS制作永动机牛顿摆
时间：2023-04-05 01:10:21
HTML5
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/qKmGaJ互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cPpkyUK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含5个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:beige;}绘制小球的挂线：.loader{position:absolute;显示：弹性；宽度：12em；字体大小：10px；证明内容：空间之间；}.loader跨度{位置：相对；宽度：0.2em；高度：10em；：黑色的;transform-origin:top;}绘制球：.loaderspan::before{content:'';位置：绝对；底部：0；宽度：3em；高度：3em；边界半径：50%；背景色：黑色；left:-1.4em;}画出牛顿摆的衣架：.loader{border-style:solid;边界-c颜色：黑色；边框宽度：0.4em0.1em4em0.1em；padding:04em2em4em;}让最左边的摆线摇动：.loaderspan:first-child{animation:moving-up0.75scubic-bezier(0.215,0.61,0.355,1)无限交替；--direction:1;}@keyframesmoving-up{0%{transform:rotate(0deg);}50%{变换：旋转（0度）；}100%{变换：旋转（计算（45deg*var（--direction）））；}}最后，让最右边的摆线摆动：.loaderspan:last-child{animation:moving-up0.75scubic-bezier(0.215,0.61,0.355,1)infinitealternate-reverse;--direction:-1;}大功告成！
