热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML怎么实现复杂动画和变形

这篇“HTML怎么实现复杂动画和变形”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值

这篇“HTML怎么实现复杂动画和变形”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML怎么实现复杂动画和变形”文章吧。

1、复杂动画

(1)涉及到的属性:

animation-name:动画名称;

animation-duration:单次动画总时长;

animation-timing-function:时间函数;

animation-delay:播放前延时的时长;

animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;

animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。

(2)书写方式

@keyframes 名字(自己取一个名字){   ——>定义一个动画

}

 HTML怎么实现复杂动画和变形

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
 9 
10 
54 
55 
56     
57         动画练习
58         
59     
60  61  62 

效果如下:

HTML怎么实现复杂动画和变形

2、盒子变形

(1)  变形:通过变形可以改变盒子的视觉效果,变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响。

(2)  变形的类型

Translate(移动)

Scale(缩放,1以下是缩小,1以上是扩大)

Skew(倾斜,单位deg)

Rotate(旋转,默认是沿着Z轴旋转,单位deg)

(3)  定义原点

Transform-origin:设置盒子的中心点。

(4)  其他属性

背面可见性:backface-visibility

visible:默认值,背面可见

hidden:背面不可见

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
 9 
10 
51 
52 
53     
54         正面
55         反面
56      57  58  59 

以上就是关于“HTML怎么实现复杂动画和变形”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程笔记行业资讯频道。


推荐阅读
author-avatar
七楼居民_651
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有