HTML5动画_html5简单动画-CSDN博客

本文链接：https://blog.csdn.net/TsuiXh/article/details/52745973

本文详细介绍了HTML5中的2D和3D转换，包括移动、旋转、缩放和倾斜效果，并通过代码示例展示了如何实现。接着，文章探讨了CSS3过渡效果，利用transition属性实现元素样式的平滑变化。此外，还展示了如何创建CSS3动画，通过@keyframes定义关键帧来控制元素动态行为。最后，文章讲解了多列布局，利用column-count、column-gap和column-rule属性进行布局设计。

摘要由CSDN通过智能技术生成

Html5动画效果

这篇文章涉及到的内容有：

2D,3D的转换
过度效果
动画
多列

1.2D,3D转化

2D,3D转化是指对元素的外观进行一些操作，例如：

移动元素
旋转
缩放
倾斜
3D转换

接下来以代码来演示如何进行2D,3D平面的一些转换。

准备工作

我们先准备一个标准的html页面，并在其中添加两个相同大小的div元素，方便进行对比。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div>这是一个初始效果</div>
    <br>
    <div class="div2">准备改变的div</div>
</body>
</html>

建立对应的样式表，并给两个div设置相同的样式：

div {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

在浏览器中预览（我用的是Chrome浏览器），可以看到未进行变换的效果：

初始效果图

移动变换：

.div2 {
    /*移动效果*/
    transform: translate(100px, 100px);
    -webkit-transform: translate(100px, 100px); /*safari chrome*/
    -ms-transform: translate(200px, 100px); /*IE*/
    -o-transform: translate(200px, 100px); /*Opera*/
    -moz-transform: translate(200