如何利用 CSS 的动画原理,创作一个乒乓球对打动画

简介: 效果预览 在线演示按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/rvgLzK 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
+关注继续查看

img_db24d56e14d5589dbf760ffd606832d5.png

效果预览


在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。


https://codepen.io/comehope/pen/rvgLzK


可交互视频教程


此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。


请用 chrome, safari, edge 打开观看。


https://scrimba.com/p/pEgDAM/cW7gZfb


源代码下载


本地下载

每日前端实战系列的全部源代码请从 github 下载:


https://github.com/comehope/front-end-daily-challenges


代码解读


定义 dom,容器中包含左拍、小球和右拍:

<div class="court">
    <div class="left-paddle"></div>
    <div class="ball"></div>
    <div class="right-paddle"></div>
</div>

居中显示:

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(silver, dimgray);
}

调整盒模型:

* {
    box-sizing: border-box;
}

画出球案:

.court {
    width: 20em;
    height: 20em;
    color: white;
    border: 1em solid currentColor;
}

画出左拍:

.court {
    position: relative;
}

.left-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
}

让左拍动起来:

.left-paddle {
    animation: left-moving 1s linear infinite alternate;
}

@keyframes left-moving {
    to {
        transform: translateY(100%);
    }
}

类似地,画出右拍:

.right-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 1em;
    right: 1em;
}

类似地,让右拍动起来:

.right-paddle {
    animation: right-moving 1s linear infinite alternate;
}

@keyframes right-moving {
    to {
        transform: translateY(-100%);
    }
}

画出小球:

.ball {
    width: 100%;
    height: 1em;
    border-left: 1em solid currentColor;
    position: absolute;
    left: 2em;
    top: calc(50% - 1.5em);
}

让小球动起来:

.ball {
    animation: bounce 1s linear infinite alternate;
}

@keyframes bounce {
    to {
        left: calc(100% - 3em);
    }
}

最后,重构一下左右拍的代码,合并共有属性:

.left-paddle,
.right-paddle {
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    animation: 1s linear infinite alternate;
}

.left-paddle {
    top: 1em;
    left: 1em;
    animation-name: left-moving;
}

.right-paddle {
    bottom: 1em;
    right: 1em;
    animation-name: right-moving;
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015002553

相关文章
|
18小时前
|
前端开发 JavaScript 内存技术
CSS动画@animationend
CSS 中的动画类似于 flash 中的逐帧动画,表现细腻并且非常灵活,使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。
5 0
|
16天前
|
前端开发
CSS就是个装饰?不能做动画,那我来试试吧!
CSS就是个装饰?不能做动画,那我来试试吧!
17 1
|
29天前
css3实现动画无限循环
要在CSS3中实现动画的无限循环,你可以使用animation 属性和 infinite 关键字。以下是一个示例:
|
1月前
|
机器学习/深度学习
CSS3 如何实现飘动的云朵动画
CSS3 如何实现飘动的云朵动画
23 0
|
1月前
|
前端开发
【CSS动画05--闪亮的玻璃图标悬浮效果】
【CSS动画05--闪亮的玻璃图标悬浮效果】
|
1月前
|
前端开发
【CSS动画04--input输入动画】
【CSS动画04--input输入动画】
|
1月前
|
前端开发
【CSS动画03--伸缩式导航栏/手机原子组件】
【CSS动画03--伸缩式导航栏/手机原子组件】
|
1月前
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】
|
1月前
|
前端开发 JavaScript
【CSS动画01--登录】
【CSS动画01--登录】
|
1月前
|
前端开发 JavaScript
CSS动画篇之炫酷时钟之时钟墙
CSS动画篇之炫酷时钟之时钟墙
22 1