HTML5动画

本文详细介绍了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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值