资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端每日实战：129# 视频演示如何用纯 CSS 和原生 JS 创作一个条纹错觉动画

前端每日实战：129# 视频演示如何用纯 CSS 和原生 JS 创作一个条纹错觉动画

flybywind / 965人阅读

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。接下来我们来揭秘真相。

效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom，容器中包含 2 个元素，分别代表 2 条轨道：

</>复制代码 
  2.     
  3.

居中显示：

</>复制代码 
  1. body {
  2.     margin: 0;
  3.     height: 100vh;
  4.     display: flex;
  5.     align-items: center;
  6.     justify-content: center;
  7.     background-color: #999;
  8. }

定义容器尺寸和子元素的布局方式：

</>复制代码 
  1. .container {
  2.     font-size: 30px;
  3.     width: calc(13em + 0.5em);
  4.     height: 8em;
  5.     display: flex;
  6.     flex-direction: column;
  7.     justify-content: space-between;
  8. }

定义 2 个色值，一个亮的和一个暗的：

</>复制代码 
  1. .container {
  2.     --dark: #222;
  3.     --light: #ffffd;
  4. }

画出 2 条轨道的轮廓：

</>复制代码 
  1. .track {
  2.     width: inherit;
  3.     height: 2em;
  4.     border: 1px solid var(--dark);
  5. }

为 2 条轨道的背景图案，图案是明暗相间的条纹，但第 2 条轨道要错半个格：

</>复制代码 
  1. .track {
  2.     background: linear-gradient(
  3.         90deg,
  4.         var(--dark) 50%,
  5.         var(--light) 50%
  6.     );
  7.     background-size: 1em;
  8. }
  9. .track:nth-child(2) {
  10.     background-position: 0.5em;
  11. }

用伪元素画出 2 个矩形：

</>复制代码 
  1. .track {
  2.     position: relative;
  3.     display: flex;
  4.     align-items: center;
  5. }
  6. .track::before {
  7.     content: "";
  8.     position: absolute;
  9.     width: 2em;
  10.     height: 0.8em;
  11.     background-color: var(--light);
  12. }

让这 2 个矩形在轨道上往复移动：

</>复制代码 
  1. .track::before {
  2.     animation: move 5s linear infinite alternate;
  3. }
  4. @keyframes move {
  5.     from {
  6.         left: 0;
  7.     }
  8.     
  9.     to {
  10.         left: calc(100% - 2em);
  11.     }
  12. }

此时，两个矩形看起来是一先一后地前进的，但实际上它们是在同一时刻开始并且以相同的速度在移动。接下来我们来揭秘真相。

在 dom 中增加一个子元素，作为按钮；

</>复制代码 
  2.     
  3.     
  4.     Show me the truth

设置按钮的样式：

</>复制代码 
  1. .toggle {
  2.     order: -1;
  3.     width: 10em;
  4.     height: 2em;
  5.     border: 2px solid var(--dark);
  6.     border-radius: 0.2em;
  7.     font-size: 0.5em;
  8.     font-family: sans-serif;
  9.     font-weight: bold;
  10.     color: black;
  11.     text-align: center;
  12.     line-height: 2em;
  13.     cursor: pointer;
  14.     user-select: none;
  15. }

为按钮设置与轨道风格类似的背景，以及鼠标悬停效果：

</>复制代码 
  1. .toggle {
  2.     background-image: linear-gradient(to right, #ffffd 50%, #999 50%);
  3.     background-size: 1em;
  4.     transition: 0.5s;
  5. }
  6. .toggle:hover {
  7.     background-position: 5em;
  8. }

增加一段点击按钮时触发的脚本，为轨道元素切换样式：

</>复制代码 
  1. let $toggle = document.getElementsByClassName("toggle")[0]
  2. let $tracks = Array.from(document.getElementsByClassName("track"))
  3. $toggle.addEventListener("click", function() {
  4.     $tracks.forEach(track => track.classList.toggle("highlights"))
  5. })

终于，谜底就在切换样式之后被揭晓了：

</>复制代码 
  1. .track::before {
  2.     box-sizing: border-box;
  3.     border: solid var(--dark);
  4.     border-width: 0;
  5. }
  6. .track.highlights::before {
  7.     background-color: white;
  8.     border-width: 0.1em;
  9. }

大功告成！

云服务器 GPU云服务器 如何用css js原生动画 js原生动画详解 如何用云服务器做一个个人网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97513.html

相关文章

  • 前端每日实战：129# 视频演示如何用纯 CSS 和原生 JS 创作一个条纹错觉动画

    摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。接下来我们来揭秘真相。 showImg(https://segmentfault.com/img/bVbgztX?w=400&h=293); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen...

    alexnevsky 评论0 收藏0

  • 前端每日实战 2018 年 9 月份项目汇总（共 26 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（...

    lavnFan 评论0 收藏0

  • 前端每日实战 2018 年 9 月份项目汇总（共 26 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（...

    whatsns 评论0 收藏0

发表评论

登陆后可评论

0条评论

flybywind

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<