专栏首页前端博客:https://alili.tech前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

抱歉,你查看的文章已删除

前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

效果预览

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

https://codepen.io/comehope/pen/jKVbyE点击预览

可交互视频教程

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

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

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

源代码下载

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

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

代码解读

定义 dom,只有一个元素:

<div class="loader"></div>

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定义容器的尺寸:

.loader {
    width: 10em;
    height: 3em;
    border: 0.3em solid silver;
    border-radius: 3em;
    font-size: 20px;
}

把容器左右两侧分别涂上不同的颜色:

.loader {
    border-left-color: hotpink;
    border-right-color: dodgerblue;
}

在容器中画一个小球:

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: dodgerblue;
}

让小球在容器中往复移动:

.loader::before {
    animation: shift 3s linear infinite;
}

@keyframes shift {
    50% {
        left: 7em;
    }
}

再让小球在撞到两端时变色:

.loader::before {
    animation:
        shift 3s linear infinite,
        change-color 3s linear infinite;
}

@keyframes change-color {
    0%, 55% {
        background-color: dodgerblue;
    }

    5%, 50% {
        background-color: hotpink;
    }
}

最后,让容器不停地旋转:

.loader {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

大功告成!

原文标题

前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

原文链接

https://segmentfault.com/a/1190000015221260

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Extreme Learning Machines 极限学习机

    最近在看教授很久之前的一篇 Paper ,里面有提到极限学习机(ELM),所以查找资料了解了一下。在查找的过程中,发现很多人抨击 ELM,说其是夸大了贡献,连 ...

    caoqi95
  • Docker 部署 SpringCloud 微服务(docker-compose 编排微服务高可用案例)

    前面的一篇文章,通过对每个项目建立单独的 Dockerfile,可以实现对单个项目生成 Docker 镜像,然后单独启动容器,可以实现简单连接,达到部署的目的。

    子乾建建-Jeff
  • 聊聊图数据库和图数据库的小知识 Vol.02

    2000 年前后热门的是 信息检索 和 分析 ,主要是 Google 的带动,以及 Amazon 的 e-commerce 所用的协同过滤推荐,当时 colla...

    NebulaGraph
  • 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒...

    okaychen
  • 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

    okaychen
  • 迷你ASP服务器 - 服务器一键开通神器

    Youngxj

扫码关注云+社区

领取腾讯云代金券