HTML5最让人新奇的要属动画这一块了，因为这里的好多样式都是非常的炫酷；让你真正见识到前端的魅力所在，做出的效果往往都是让人：哇！！哇！！赞不绝口的。不信你接着往下看；

CSS3动画效果共3大部分：变形，过度，动画。。。

（1）CSS3变形；

　　css变形我们可以通过transform这个属性来实现文字或图像的的各种变形效果，如位移translate、缩放scale、旋转rotate、倾斜skew等。

 (1)transform：translate(x位移,y位移)；可以接收单个值；单独设置x轴用translateX同理translateY，也接收负值；<style type="text/css">/*设置原始元素样式*/#origin{margin:100px auto;/*水平居中*/width:200px;height:100px;border:1px dashed silver;}/*设置当前元素样式*/#current{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transform:translate(20px,20px);-webkit-transform:translate(20px,20px);  /*兼容-webkit-引擎浏览器*/-moz-transform:translate(20px,20px);     /*兼容-moz-引擎浏览器*/}</style>
</head>
<body><div id="origin"><div id="current"></div></div>
</body>


（2）transform：scale（x轴缩放，y轴缩放），但是scale具有放大和缩小两种功能；当scale值等于几时就是放大几倍；也可以单独设置某一轴的缩放；也可以接收负数；<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>CSS3缩放scale()方法</title><style type="text/css">/*设置原始元素样式*/#origin{margin:100px auto;/*水平居中*/width:200px;height:100px;border:1px dashed gray;}/*设置当前元素样式*/#current{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transition:1s;}#current:hover{transform:scale(0.5,1);}</style>
</head>
<body><div id="origin"><div id="current"></div></div>
</body>
</html>


（3）transform：rotate(30deg);旋转；接收的是角度值；也可以接收负值，往相反的方向旋转；<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>CSS3旋转rotate()方法</title><style type="text/css">/*设置原始元素样式*/#origin{margin:100px auto;/*水平居中*/width:200px;height:100px;border:1px dashed gray;}/*设置当前元素样式*/#current{width:200px;height:100px;line-height:100px;background-color: #0FF;text-align:center;transition:1s;}#current:hover{transform:rotate(30deg);    }</style>
</head>
<body><div id="origin"><div id="current">顺时针旋转30度</div></div>
</body>
</html>


（4）transform：skew(x轴角度，y轴角度)；当skewX时逆时针倾斜，当skewY是顺时针倾斜；也可以接收一个值，默认围绕中心点倾斜，接收负值往相反的方向倾斜；skewX()方法会保持高度、宽度，沿着X轴与Y轴倾斜；skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>CSS3倾斜skew()方法</title><style type="text/css">/*设置原始元素样式*/#origin{margin:100px auto;/*水平居中*/width:200px;height:100px;border:1px dashed silver;}/*设置当前元素样式*/#current{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transition:2s;}#current:hover{transform:skew(10deg,20deg); }</style>
</head>
<body><div id="origin"><div id="current"></div></div>
</body>
</html>

(5)transform-origin:left/left center/50px 60px/50% 50%、等值；默认变形中心为中心；单独设置某个方向也是当前方向的中心位置移动；<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>CSS3中心原点transform-origin属性</title><style type="text/css">/*设置原始元素样式*/#origin{margin:100px auto;/*水平居中*/width:200px;height:100px;border:1px dashed gray;}#current{width:200px;height:100px;color:white;background-color: #3EDFF4;text-align:center;transition:2s;transform-origin:right center;}#current:hover{transform:rotate(30deg);}</style>
</head>
<body><div id="origin"><div id="current"></div></div>
</body>
</html>

（2）CSS3过渡；

（3）CSS3动画；

转载于:https://www.cnblogs.com/milx/p/6250557.html

html5+css3动画学习总结相关推荐

  1. html5 css动画效果代码,超酷震撼 8个HTML5/CSS3动画应用及源码

    原标题:超酷震撼 8个HTML5/CSS3动画应用及源码 HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼 ...

  2. HTML5+CSS3的学习(一)

    HTML5+CSS3的学习(一) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

  3. HTML5+CSS3的学习(五)

    HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

  4. HTML5+CSS3的学习(四)

    HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

  5. html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习

    本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...

  6. HTML5+CSS3的学习(六)

    HTML5+CSS3的学习(六) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

  7. HTML5+CSS3的学习(二)

    HTML5+CSS3的学习(二) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

  8. CSS3动画学习（过渡，旋转，缩小，倾斜）

    CSS3动画学习(过渡,旋转,缩小,倾斜) 过渡transition perspective 透视 设置元素被查看位置的视图 过渡transition 为了添加某种效果可以从一种样式转变到另一个的时候 ...

  9. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

最新文章

  1. ArcGIS Engine 编辑介绍
  2. linux 跟踪链接 超时,Linux：跟踪netstat -s“连接尝试失败”的来源
  3. python第三方库文件传输_python3 post方式上传文件。
  4. bzoj 3343 教主的魔法 分块
  5. java writablesheet_jxl加边框，jxl合并单元格,单元格的设置，单元格居中
  6. 进阶学习js中的执行上下文
  7. aws dynamodb_如何使用AWS Lambda将DynamoDB集成到您的API中
  8. python分数由高至低排序_python之数据库
  9. JSK-398 字符$出现的次数【入门】
  10. 数据探查与可视化平台 Caravel
  11. win10休眠_这样设置以后，WIN10比WIN7运行更流畅
  12. node.js 实现udp传输_nodejs实现UDP组播示例方法
  13. FFMPEG 的学习
  14. 【使用教程】面向回家编程-12306智能刷票，订票
  15. 关于中值滤波算法，以及C语言实现
  16. Nginx是如何处理一个HTTP请求的
  17. 自己打羽毛球的若干问题
  18. 利用MediaRecorder录制视频切片上传到ftp服务器
  19. linux停止编译进程,linux – 如何继续编译？
  20. python简单程序实例-python简单项目实例

热门文章

  1. Feature pyramid networks for object detection
  2. EfficientNet细节
  3. Java求1到任意一个数的阶乘和
  4. 服务器安装 accessdatabaseengine_.net IIS 服务器环境配置
  5. 批量拷贝文件到服务器,Syncovery(数据备份工具)如何在windows下远程访问服务器批量拷贝文件?Syncovery图文教...
  6. mysql删除root链接_删除mysql中root用户恢复方法
  7. vue获取input焦点事件_vue获取input焦点，弹框后自动获取input焦点
  8. 快手活跃用户预测_哈工大团队解决方案
  9. 基于评论、新闻的情感倾向分析作商品的价格预测
  10. 战斗服务器响应超时是否尝试重连,刺激战场：教你，从开伞到落地瞬间技巧