过山车css动画,如何使用CSS实现过山车loader的动画效果
本篇文章给大家带来的内容是关于如何使用CSS实现过山车loader的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
代码解读
定义 dom,容器中包含 3 个元素,代表 3 个圆点:
居中显示:body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, silver, teal);
}
定义摩天轮的直径,其他长度均以此值为基本尺度:.loader {
--diameter: 10em;
}
定义容器尺寸,宽是高的2倍:.loader {
--width: calc(var(--diameter) * 2);
width: var(--width);
height: var(--diameter);
}
定义伪元素的共享属性:.loader {
position: relative;
}
.loader::before,
.loader::after {
content: '';
position: absolute;
bottom: 0;
}
画出底部的轨道,同时定义了一个表示线粗细的变量:.loader {
--stroke-width: calc(var(--diameter) / 40);
color: white;
}
.loader::before {
width: inherit;
height: var(--stroke-width);
background-color: currentColor;
}
画出中部的圆形轨道:.loader::after {
box-sizing: border-box;
width: var(--diameter);
height: var(--diameter);
border: var(--stroke-width) solid;
border-radius: 50%;
left: 25%;
}
画出一个圆点,同时定义了一个表示圆点直径的变量:.loader {
--dot-diameter: calc(var(--diameter) / 10);
}
.loader span {
position: absolute;
width: var(--dot-diameter);
height: var(--dot-diameter);
background-color: currentColor;
border-radius: 50%;
bottom: var(--stroke-width);
left: calc((var(--width) - var(--dot-diameter)) / 2);
}
为圆点增加沿圆形轨道旋转的动画效果:.loader span {
animation:
rotating 2s linear infinite;
--vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
transform-origin: 50% var(--vertical-center);
}
@keyframes rotating {
0%, 10% {
transform: rotate(0deg);
}
60%, 100% {
transform: rotate(-1turn);
}
}
为圆点增加移动的动画效果:.loader span {
animation:
run 2s linear infinite,
rotating 2s linear infinite;
}
@keyframes run {
0% {
left: calc(var(--dot-diameter) * -1);
}
10%, 60% {
left: calc((var(--width) - var(--dot-diameter)) / 2);
}
70%, 100% {
left: calc(var(--width));
}
}
为另外 2 个圆点设置动画延时,使 3 个圆点看起来像是紧挨着的 3 个车厢:.loader span:nth-child(1) {
animation-delay: 0.075s;
}
.loader span:nth-child(2) {
animation-delay: 0.15s;
}
最后,隐藏容器外的内容:.loader {
overflow: hidden;
}
相关文章推荐:
css实现导航切换的代码实例
如何使用纯CSS实现一头绿猪的效果
css3实现会动的菜单按钮(menu)效果
过山车css动画,如何使用CSS实现过山车loader的动画效果相关推荐
- css 加载动画如何生效,CSS 加载动画
CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
- html+fadein动画,使用Animate.css制作超炫的CSS3动画
如何使用 首先引入animate css文件. 然后给指定的元素加上指定的动画class样式名. 这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式.第二 ...
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- 前端动画大全:css的transition、css3的animation、Jquery的animate、js的setInterval
前端制作动画的几种方式(css3,js,jquery) 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总 ...
- 反向的css动画,反向使用CSS动画(通过重置状态?)
小编典典 不,没有办法单独使用CSS重新启动动画.您必须使用JavaScript从元素中删除动画,然后将其重新应用到元素(经过延迟)以重新启动. 以下是[W3C的CSS3动画规范说的(在不同的上下文中 ...
- 实现太阳系行星公转动画实例(CSS+HTML5 源码)
实现太阳系行星公转动画实例(CSS+HTML5 源码) 效果图 源代码(CSS+HTML5) 效果图 源代码(CSS+HTML5) <html> <head> <styl ...
- animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画 和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
- css动画结束闪烁,CSS秘密花园: 闪烁动画
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
最新文章
- 复数混频发射机原理与仿真
- go gorm框架一对多查询代码示例
- dart与java互调_Dart与Java不同的地方
- 基于bootstrap的 按钮-隐藏 案例
- Laravel核心技术解析(1)—— Composer 组件管理与自动加载
- Kmalloc申请内存源码分析
- 数据库交易记录--如何添加审计信息到闪回归档数据以替换操作日志表
- 命令行查看ubuntu版本号
- centos 6.9部署svn服务器和客户端(客户端含windows、linux版本)
- 微信小程序——简单饮食推荐(一)
- java早餐点餐外卖网站系统
- windows上的TFTP服务器的安装
- 凯云水利水电工程造价管理系统 技术解析(七) 机械单价(二)
- gitlab中国官方网站
- 质因子分解(Java)
- linux新下载的源码或者官方提供的内核查看具体的内核版本
- 机器学习常见问题 - 类别变量处理
- 未能加载文件或程序集“xxx”或它的某一个依赖项
- java集合示例_Java集合的addAll()方法和示例
- 傅里叶变换光谱仪(FTS)中的相干性和能量关系