前端HTML5CSS3动画
生活随笔
收集整理的這篇文章主要介紹了
前端HTML5CSS3动画
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>/*animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規(guī)定 @keyframes 動畫的名稱。 3
animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認(rèn)是 0。 3
animation-timing-function 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 3
animation-delay 規(guī)定動畫何時開始。默認(rèn)是 0。 3
animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。 3次 infinite 無限
animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。alternate 反向播放
animation-play-state 規(guī)定動畫是否正在運行或暫停。默認(rèn)是 "running"。 3
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)。*/.box {height: 300px;width: 300px;background-color: lime;/*動畫 先定義后使用*//*動畫屬性 animation:動畫名字 動畫持續(xù)時間s 延時時間 s 運動曲線 往返運動 *//*動畫屬性 animation:動畫名字 動畫持續(xù)時間S 延時時間S 運動曲線 往返運動*/animation: donghua 3s linear 0.5s infinite ;}/*執(zhí)行幾次是指單向運動，往算一次，沿原路線返回也算一次，動畫結(jié)束后直接返回原狀態(tài)不是往返運動*//*只有在執(zhí)行多次時才能做往返運動 *//*不做往返運動時不論執(zhí)行多少次都是單向運動*/@keyframes donghua{0%{margin-left: 0;margin-top: 0;}/*linear直線的 linear*//*0% 最初20% 50% 75%100% 最終*/25%{margin-top: 300px;margin-left: 300px;}50%{margin-left: 600px;margin-top: 0;}100%{margin-left: 900px;margin-top: 300px;}}/*background-color: #a71d5d;*//*border-radius: 30px;*//*border: 2px solid black;*//*transform: translateX(400px);*//*border-radius: 50%;*/</style>
</head>
<body>
<div class="box"></div>
</body>
</html>`在這里插入代碼片`
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女戰(zhàn)士$</title><style>/*
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規(guī)定 @keyframes 動畫的名稱。 3
animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認(rèn)是 0。 3
animation-timing-function 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 3
animation-delay 規(guī)定動畫何時開始。默認(rèn)是 0。 3
animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。 3次 infinite 無限
animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。alternate 反向播放
animation-play-state 規(guī)定動畫是否正在運行或暫停。默認(rèn)是 "running"。 3
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)。*/.box {width: 200px;height: 200px;background-color: skyblue;/*動畫 先定義后使用*//*動畫屬性 animation:動畫名字 動畫持續(xù)時間s 延時時間 s 運動曲線 往返運動 */animation: ani 3s linear 2 alternate ;/*animation動畫 animation alternate交替輪流alternate alternate*//*infinite無限的無窮的infinite infinite infinite infinite infinite*//*infinite無限的 infinite infinite infinite infinite infinite*/}@keyframes ani {/*keyframes關(guān)鍵幀keyframes keyframes關(guān)鍵幀keyframes*//*0% 最初20% 50% 75%100% 最終*//*%指運行到什么時候?qū)崿F(xiàn)該效果，從動畫開始時就執(zhí)行,執(zhí)行到%之幾之后，這幾個屬性就不在執(zhí)行*/0% {background-color: #a71d5d;}20% {border-radius: 30px;border: 2px solid black;}50% {transform: translateX(400px);border-radius: 50%;/*radius半徑radius radius border邊界border border*//*transform使變形使轉(zhuǎn)換 translate轉(zhuǎn)化 translateX(400PX)轉(zhuǎn)化到X軸坐標(biāo)400*/}100% {transform:translateX(400px);opacity: 0.3;/*opacity不透明 opacity*/}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結(jié)
以上是生活随笔為你收集整理的前端HTML5CSS3动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端HTML5CSS3基础知识点
- 下一篇： 前端基础HTML5CSS3动画