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

感想:纯属动画

HTML代码:

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

CSS代码:

html, body {
margin:;
padding:;
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
/* silver: 银色; dimgray: 暗灰色 */
background: linear-gradient(silver, dimgray);
}
/* 调整盒模型 */
*{
box-sizing: border-box;
}
/* 画出球案 */
.court{
position: relative;
width: 20em;
height: 20em;
color: white;
border: 1em solid currentColor;
}
.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;
}
@keyframes left-moving{
to{
transform: translateY(100%);
}
}
.right-paddle{
bottom: 1em;
right: 1em;
animation-name: right-moving;
}
@keyframes right-moving {
to {
transform: translateY(-100%);
}
}
/* 画出小球 */
.ball{
position: absolute;
left: 2em;
top: calc(50% - 1.5em);
width: 100%;
height: 1em;
border-left: 1em solid currentColor;
animation: bounce 1s linear infinite alternate;
}
@keyframes bounce{
to{
left: calc(100% - 3em);
}
}

31.用 CSS 的动画原理,创作一个乒乓球对打动画的更多相关文章

  1. 前端每日实战:31# 视频演示如何利用 CSS 的动画原理,创作一个乒乓球对打动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rvgLzK 可交互视频教程 此视频 ...

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

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rvgLzK 可交互视频教 ...

  3. 42.纯 CSS 创作一个均衡器 loader 动画

    原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...

  4. 如何用纯 CSS 创作一个菱形 loader 动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教 ...

  5. 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...

  6. 51.纯 CSS 创作一个雷达扫描动画

    原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...

  7. 45.纯 CSS 创作一个菱形 loader 动画

    原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...

  8. 如何用纯 CSS 创作一个变色旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...

  9. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

随机推荐

  1. !important强制此css最强,其它被覆盖

    有时我们引用别人写的插件不知道某个样式在哪儿,或者想要覆盖其它样式,就要用到 !importan; 例如以下是引用boostrap,默认bootstrap都是圆边框,我们不想用,例子中同一样式也出现多 ...

  2. 协程与多路io复用epool关系

    linux上其实底层都基于libevent.so模块实现的,所以本质一样 gevent更关注于io和其它 epool只是遇到io就切换,而gevent其它等待也切换

  3. c# .net WebRequest 始终报域名无法解析

    更改本机DNS,flushdns也没效果. 最后通过改.config 禁用代理后正常. (或:WebRequest.Proxy=null;)

  4. InfluxDB中文文档

    来源:https://github.com/jasper-zhang/influxdb-document-cn InfluxDB中文文档 InfluxDB是一个用于存储和分析时间序列数据的开源数据库. ...

  5. CentOS 7.4 初次手记:第二章 CentOS安装步骤

    第二章 CentOS安装步骤... 18 第一节 下载... 18 第二节 分区参考... 18 第三节 安装... 19 I Step 1:引导... 19 II Step 2:配置... 20 I ...

  6. php 测试 程序执行时间,内存使用情况

    memory_get_usage 可以分析内存占用空间. microtime 函数就可以分析程序执行时间. 上栗子: echo '开始内存:'.memory_get_usage(), ''; $tmp ...

  7. g++编译后中文显示乱码解决方案(c++)

    g++编译后中文显示乱码解决方案   环境:Windows 10 专业版 GCC版本:5.3.0 测试代码: 1 #include <iostream> 2 using namespace ...

  8. Reg2Bat_By Slore(生成同名bat文件,支持XP WIN7 WIN7X64).vbs

    原文http://slore.blogbus.com/logs/52627038.htmlSlore编写的这个reg文件转换为bat文件,是逐句转换的,不是通过批处理生成临时reg文件然后导入的方法, ...

  9. Spring-boot+Spring-batch+hibernate+Quartz简单批量读文件写数据用例

    本文程序集成了Spring-boot.Spring-batch.Spring-data-jpa.hibernate.Quartz.H2等.完整代码在Github上共享,地址https://github ...

  10. 使用jquery.mCustomScrollbar自定义滚动条(3)callback onCreate

    碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...