摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,只有一个元素居中显示定义容器的尺寸把容器左右两侧分别涂上不同的颜色在容器中画一个小球让小球在容器中往复移动再让小球在撞到两端时变色最后,让容器不停地旋转大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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,只有一个元素:
</>复制代码
居中显示:
</>复制代码
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);
}
}
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113469.html
摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,只有一个元素居中显示定义容器的尺寸把容器左右两侧分别涂上不同的颜色在容器中画一个小球让小球在容器中往复移动再让小球在撞到两端时变色最后,让容器不停地旋转大功告成 showImg(https://segmentfault.com/img/bVbb1Ul?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
阅读 2073·2021-11-16 11:45
阅读 573·2021-11-04 16:12
阅读 1376·2021-10-08 10:22
阅读 854·2021-09-23 11:52
阅读 4136·2021-09-22 15:47
阅读 3516·2021-09-22 15:07
阅读 488·2021-09-03 10:28
阅读 1734·2021-09-02 15:21