宽高变化动画代码，旋转动画代码（HTML5）
這個(gè)圖片是動(dòng)態(tài)的，可以把代碼復(fù)制下來(lái)看效果：
代碼如下：
<!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>動(dòng)畫(huà)</title>
? ? <style type="text/css">
? ? ? ? /* 上面的旋轉(zhuǎn)動(dòng)畫(huà)代碼 */
? ? ? ? /* 定義動(dòng)畫(huà)，動(dòng)畫(huà)名：animat_rotate，可以取任意名字 */
? ? ? ? /* 使用方式：animation: run 6s linear; */
? ? ? ? @keyframes animat_rotate {
? ? ? ? ? ? from {
? ? ? ? ? ? ? ? /* 動(dòng)畫(huà)剛開(kāi)始，角度 */
? ? ? ? ? ? ? ? transform: rotate(0deg);
? ? ? ? ? ? }
? ? ? ? ? ? to {
? ? ? ? ? ? ? ? /* 動(dòng)畫(huà)結(jié)束時(shí)，角度 */
? ? ? ? ? ? ? ? transform: rotate(360deg);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */
? ? ? ? /* 下面的寬高變化動(dòng)畫(huà)代碼 */
? ? ? ? /* 定義動(dòng)畫(huà)，動(dòng)畫(huà)名：animat_changeWH，可以取任意名字 */
? ? ? ? /* 使用方式：animation: animat_changeWH 6s linear; */
? ? ? ? @keyframes animat_changeWH {
? ? ? ? ? ? 0% {
? ? ? ? ? ? ? ? /* 動(dòng)畫(huà)剛開(kāi)始，div的寬高 */
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? }
? ? ? ? ? ? 50% {
? ? ? ? ? ? ? ? /* 動(dòng)畫(huà)執(zhí)行一半時(shí)，div的寬高 */
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? }
? ? ? ? ? ? 100% {
? ? ? ? ? ? ? ? /* 動(dòng)畫(huà)執(zhí)行完畢時(shí)，div的寬高 */
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
<!-- animat_rotate：動(dòng)畫(huà)名；6s：總執(zhí)行時(shí)間；linear：平滑；infinite：無(wú)限重復(fù)（去了，只執(zhí)行一次）-->
<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：動(dòng)畫(huà)名；6s：總執(zhí)行時(shí)間；linear：平滑；infinite：無(wú)限重復(fù)（去了，只執(zhí)行一次）-->
<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的宽高变化动画代码，旋转动画代码（HTML5）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： User does not have t
- 下一篇： 中国通胀真相：美国向全球转嫁经济调整成本