宽高变化动画代码，旋转动画代码（HTML5）
這個圖片是動態的，可以把代碼復制下來看效果：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
? ? <title>動畫</title>
? ? <style type="text/css">
? ? ? ? /* 上面的旋轉動畫代碼 */
? ? ? ? /* 定義動畫，動畫名：animat_rotate，可以取任意名字 */
? ? ? ? /* 使用方式：animation: run 6s linear; */
? ? ? ? @keyframes animat_rotate {
? ? ? ? ? ? from {
? ? ? ? ? ? ? ? /* 動畫剛開始，角度 */
? ? ? ? ? ? ? ? transform: rotate(0deg);
? ? ? ? ? ? }
? ? ? ? ? ? to {
? ? ? ? ? ? ? ? /* 動畫結束時，角度 */
? ? ? ? ? ? ? ? transform: rotate(360deg);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */
? ? ? ? /* 下面的寬高變化動畫代碼 */
? ? ? ? /* 定義動畫，動畫名：animat_changeWH，可以取任意名字 */
? ? ? ? /* 使用方式：animation: animat_changeWH 6s linear; */
? ? ? ? @keyframes animat_changeWH {
? ? ? ? ? ? 0% {
? ? ? ? ? ? ? ? /* 動畫剛開始，div的寬高 */
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? }
? ? ? ? ? ? 50% {
? ? ? ? ? ? ? ? /* 動畫執行一半時，div的寬高 */
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? }
? ? ? ? ? ? 100% {
? ? ? ? ? ? ? ? /* 動畫執行完畢時，div的寬高 */
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
<!-- animat_rotate：動畫名；6s：總執行時間；linear：平滑；infinite：無限重復（去了，只執行一次）-->
<div style="animation: animat_rotate 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>
<!-- animat_changeWH：動畫名；6s：總執行時間；linear：平滑；infinite：無限重復（去了，只執行一次）-->
<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的宽高变化动画代码，旋转动画代码（HTML5）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： User does not have t
- 下一篇： 2017年html5行业报告,云适配发布