码迷,mamicode.com
首页 > 其他好文 > 详细

形变和动画

时间:2018-12-16 10:58:15      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:设置   nim   animation   比例   nsf   translate   ota   次数   -o   

一. 形变
# 1.形变参考点:三轴交界点
# transfrom-origin:x轴 y轴坐标
# 2.旋转 rotate deg
# transfrom:rotate(720deg);
# 3.偏移 translate px
# translateX(200px) translateY(200px)
# 4.缩放 scale 无单位
# transfrom:scale(X轴比例,Y轴比例)
# 注:可以多形变,空格隔开书写在一条transfrom属性中,顺序一般会影响形变结果
# 形变不改变盒子布局,只拿形变做动画

# 二. 动画
# 实现动画:
# 1.设置动画体
# @keyframes 动画名 {
# 多种状态的动画体
# }
# 举例:
# @keyframes hehe {
# /*起点可以省略,采用的是起始状态*/
# 0%{}
# 33.3%{
# margin-left: 800px;
# margin-top: 50px;
# }
# 66.6%{
# margin-left: 500px;
# /*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
# margin-top: 300px;
# }
# /*终点需要设置*/
# 100%{margin-top: 50px;
# margin-left: 200px;}
# }
#
# 2.设置动画属性
# .box {
# /*animation:动画名 时间 运动次数(无限次infinite) 运动曲线*/
# animation: hehe 2s infinite linear
# }

形变和动画

标签:设置   nim   animation   比例   nsf   translate   ota   次数   -o   

原文地址:https://www.cnblogs.com/yanhui1995/p/10125582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!