css cubic-bezier,CSS3 cubic-bezier 函数功能演示
CSS
语言:
CSSSCSS
确定
body {
font: normal 15px/1.9em 'Merriweather', Georgia, serif;
width: 100vw;
height: 100vh;
text-align: center;
background-color: #f4f4f6;
}
.post-demo-content {
padding: 2em 2em 2em 4em;
}
.mnc-demo-container {
height: 100px;
width: 100px;
}
.mnc-demo-container-inline {
display: inline-block;
position: relative;
margin-right: 60px;
margin-bottom: 30px;
margin-top: 15px;
text-align: left;
}
.mnc-demo-container-inline:last-child {
margin-right: 0;
}
.mnc-demo-label {
position: absolute;
bottom: -38px;
color: #666;
font-size: 11px;
text-align: center;
width: 100%;
}
.mnc-demo-grid {
overflow: hidden;
border: 2px solid rgba(0, 0, 0, 0.2);
height: 100%;
width: 100%;
}
.mnc-demo-line {
width: 100%;
height: 2px;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.mnc-demo-line-vertical {
width: 2px;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.mnc-demo-dot {
will-change: transform;
-webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
position: absolute;
bottom: -10px;
left: -10px;
}
.mnc-demo-dot:after {
content: '';
display: block;
will-change: transform;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #fff;
-webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
.mnc-demo-dot-final::after {
-webkit-animation: none;
animation: none;
}
.mnc-demo-container-inline .mnc-demo-dot:after {
background-color: #333;
}
.mnc-demo-dot-final-x {
-webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.mnc-demo-dot-final-y {
-webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
@-webkit-keyframes xAxis {
50% {
-webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
@keyframes xAxis {
50% {
-webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
@-webkit-keyframes yAxis {
50% {
-webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
@keyframes yAxis {
50% {
-webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
css cubic-bezier,CSS3 cubic-bezier 函数功能演示相关推荐
- css参考手册css3手册_CSS手册:面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
- css中变形,css3中变形处理
transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
- java画bezier曲面_计算机图形学上机实验4-实现Bezier曲线和Bezier曲面的绘制
<计算机图形学上机实验4-实现Bezier曲线和Bezier曲面的绘制>由会员分享,可在线阅读,更多相关<计算机图形学上机实验4-实现Bezier曲线和Bezier曲面的绘制(9页珍 ...
- CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- CSS提高和CSS3新增
(二)CSS高级技巧 (序号接上一篇)CSS基础 十八.精灵图 1.为什么需要精灵图 一个网页中往往会应用很多小背景图作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求 ...
- CSS3动画——steps函数
CSS3动画中应用的定时函数(timing function)常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, st ...
- 函数功能MATLAB
近期一直在查找函数功能之类的题问,现在正好有机会和大家享共一下. 百科名片 录目 简介 开展程历 要主功能 新特性 版本分析 特色 优势 开展 简介 开展程历 要主功能 新特性 版本分析 特色 优势 ...
- R语言计算dataframe数据列中各分类的计数(类似pandas value_counts函数功能)
R语言计算dataframe数据列中各分类的计数(类似pandas value_counts函数功能) 目录 R语言计算dataframe数据列中各分类的计数(类似pandas value
最新文章
- SDWebImage的使用及图片不改变问题的解决
- 克隆真人语音只要1句话,AI问诊超96.4%全科医生!科大讯飞年度黑科技大秀,余承东都来了...
- 一起谈.NET技术,ASP.NET MVC3 Service Location
- OPPM 一页纸项目管理 One-Page Project Management
- mysql explain理解
- ae 创建图像等高线 蒙版_如何用AE创建简单的UI动效
- sonar 分析的质量数据在数据库表中的存储和质量维度数值的研究
- CodeForces 560A,B,C
- 广州技术沙龙第 2、3 期参会者twitter、blog、兴趣大合集
- Nodejs学习笔记(七)——接口API
- 计算机rank函数怎么用积分排名,excelrank函数积分排名
- Deep Learning for 3D Recognition
- react 类暴露_react如何将组件内部的方法暴露给外部
- 把RDD简单的转换成DataFrames
- AcWing 852. spfa判断负环(spfa or bellman)
- 编解码格式 -- H264
- JavaScript中怪异现象true和false
- Python的学习心得和知识总结(十二)|Python图形用户接口编程(Graphical User Interface编程 一)
- java图片蒙版,在javafx中创建图像叠加蒙版
- 那些一味顺从领导,不与领导顶嘴的人最后结局都怎么样了?