css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation
matrix 在 CSS3 中用于制作对象的矩阵效果,把处于不同的状态的矩阵连接起来就变成了动画。单用 matrix 制作动画尽管变化形式不多,但组合合理一样可以制作出新颖的动画。
以下就用 matrix 制作了四个动画实例,分别为双板划水、快速拉伸、摇板和打板动画效果;尽管它们都是在几个状态之间转化,却是完全不一样的动画效果,下面分别看这几个实例是如何制作的。
一、matrix双板划水动画
html代码:
CSS样式:
.matrixdiv{width:300px;height:20px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}
.matrixsa{animation:matrix-animation 2s ease-out infinite forwards;}
.matrixsb{animation:matrix-animation 2s ease-out infinite forwards;}
@keyframes matrix-animation{
0%{transform:matrix(0,1,1,1,10,10);}
10%{transform:matrix(2,1,1,1,10,10);}
20%{transform:matrix(0,3,1,1,10,10);}
30%{transform:matrix(0,1,1,2,10,10);}
40%{transform:matrix(0,1,1,3,10,10);}
50%{transform:matrix(0,1,1,5,10,10);}
60%{transform:matrix(0,1,1,3,10,10);}
100%{transform:matrix(2,1,3,1,10,10);}
}
效果图:
matrix-animation
matrix-animation 双板划水动画效果
效果图是两块板齐步运动,从斜变直,来回往复,就像两板块同步划水一般。
二、matrix快速拉伸动画
html代码:
CSS样式:
.matrixls{animation:matrixls-animation 2s ease-out infinite forwards;width:160px;height:100px; margin:1000px 0 0 100px;}
@keyframes matrixls-animation{
0%{transform:matrix(0,1,1,1,10,10);}
5%{transform:matrix(0,1,2,1,10,10);}
10%{transform:matrix(0,1,3,1,10,10);}
15%{transform:matrix(0,1,4,1,10,10);}
20%{transform:matrix(0,1,5,1,10,10);}
25%{transform:matrix(0,2,1,1,10,10);}
30%{transform:matrix(0,3,1,1,10,10);}
35%{transform:matrix(0,4,1,1,10,10);}
40%{transform:matrix(0,5,1,1,10,10);}
45%{transform:matrix(2,1,1,1,10,10);}
50%{transform:matrix(3,1,1,1,10,10);}
55%{transform:matrix(4,1,1,1,10,10);}
60%{transform:matrix(5,1,1,1,10,10);}
65%{transform:matrix(0,1,1,2,10,10);}
70%{transform:matrix(0,1,1,3,10,10);}
75%{transform:matrix(0,1,1,4,10,10);}
80%{transform:matrix(0,1,1,5,10,10);}
85%{transform:matrix(3,1,1,2,10,10);}
90%{transform:matrix(0,2,1,3,10,10);}
95%{transform:matrix(0,3,1,4,10,10);}
100%{transform:matrix(0,4,5,5,10,10);}
}
效果图:
matrix-animation 快速拉伸动画效果
动画在 matrix 平面的几种状态之间来回往复变化,不断的拉长又缩短,拉宽又变窄。
三、matrix 摇板动画实例
html代码:
CSS样式:
.matrixst{animation:matrixst-animation 2s ease-out infinite forwards;width:240px;height:60px; margin:1000px 0 0 100px;}
@keyframes matrixst-animation{
0%{transform:matrix(0,4,5,5,10,10);}
40%{transform:matrix(3,4,5,5,50,10);}
80%{transform:matrix(0,4,5,1,10,10);}
100%{}
}
效果图:
matrix-animation 平素摇板动画效果
四、matrix 打板动画实例
html代码:
CSS样式:
.matrixqk{animation:matrixqk-animation 2s ease-out infinite forwards;width:270px;height:100px; margin:1000px 0 0 100px;}
@keyframes matrixqk-animation{
0%{transform:matrix(0,1,1,1,10,10);}
5%{transform:matrix(4,1,1,1,10,10);}
10%{transform:matrix(0,4,1,1,10,10);}
15%{transform:matrix(0,1,5,1,10,10);}
20%{transform:matrix(0,1,1,5,10,10);}
55%{transform:scale(1.8);}
100%{transform:scale(1);}
}
效果图:
matrix-animation 快节奏打板动画效果
css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation相关推荐
- html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
- css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
CSS 语言: CSSSCSS 确定 body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; backgr ...
- css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
- html 人物行走动画,CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复.大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势. 当我们需要用计算机来模拟人类这个最简单的动作时,通 ...
- android圆形变方形动画,CSS3 简单的圆形/方形变形动画
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; background-color: #221e40; } *, *:after, ...
- android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果
CSS 语言: CSSSCSS 确定 html { font-size: 1.2vh; } body { margin: 0; height: 100vh; width: 100vw; backgro ...
- CSS3动画 - title下划线的拉伸效果
类似于 加载条 1. 效果图 2. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
最新文章
- 漫画:5分钟弄懂分治算法!它和递归算法的关系!
- 英国推6.5亿英镑网络安全战略 强化安全屏障
- python做啥用-你都用 Python 来做什么?
- fov视场角计算_图像传感器集成计算功能,赋能机器视觉技术
- post怎么用php,$_POST[''];怎么用
- SSM框架之多数据源配置
- 洛谷——P2006 赵神牛的游戏
- 网站后端_Python+Flask.0003.FLASK快速入门之Hello Word?
- HP服务器连接显示器怎么连,笔记本如何外接显示器 外接显示器连接步骤【详解】...
- js 判断3D空间中 三点共线
- 手把手教你用Java实现一个“网易云音乐”
- 字母x在css中的角色
- 电费折扣充值cps接口
- ICML 2022 | 基于有偏不对称对比学习的长尾分布外检测
- 最后一次作业-- 总结报告
- 99. 中高级开发面试必问的Redis,看这篇就够了
- 条码打印软件如何批量打印Excel中的指定数据
- 真实世界的Haskell(影印版)
- 最先进的微型计算机,微型计算机中的先进计算机技术.ppt
- 弱监督学习 weakly supervised learning 笔记