Css3如何實現旋轉移動動畫特效

藏色散人原創: 2018-10-19 15:59:038431瀏覽

本篇文章主要介紹css3動畫實現旋轉特效的方法。

css即層疊樣式表，想必學習前端的小夥伴們已經非常熟悉了。那麼大家應該都知道，一個酷炫的動畫特效，能讓你的網站顯得更加高大上，豐富內容吸引用戶。

下面我們就來跟大家介紹一個簡單有趣的動畫特效，也就是實現圖片旋轉效果。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
    <style>
.main{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: red;
    position: relative;
    top: 30px;
    animation: asd 5s;
}
        @keyframes asd {
            0 %{transform: rotate(0deg);}
            25%{transform: rotate(60deg);left: 0px;}
            50%{left:500px;}
            75%{transform: rotate(-520deg);}
            100%{transform: rotate(0deg);left: 0px;}
        }
 </style>
</head>
<body>

<div class="main">
    动画
</div>
</body>
</html>

效果如下圖：

Css3如何實現旋轉移動動畫特效

#css3中相關重要屬性介紹：

transform ：

transform屬性表示向元素套用2D 或3D 轉換，可以對元素進行旋轉、縮放、移動或傾斜。

@keyframes：

透過 @keyframes 規則，您可以建立動畫。也就是說這裡的@keyframes只是用來定義動畫，並沒有實際意義。

而css動畫的實作原理，也就是從一個css樣式逐漸轉換為另一個css樣式。

其中以百分比（或"from" 和 "to"）來規定改變發生的時間。（0% 是動畫的開始時間，100% 動畫的結束時間。）

只要大家掌握了css動畫原理，那麼想要透過純css做大多數酷炫的效果也是非常容易實現的。

這篇文章就是關於css3動畫實現旋轉移動特效的具體方法介紹，簡單易懂，希望對需要的朋友有幫助！

更多酷炫CSS3、html5、javascript特效程式碼，盡在：javascript特效大全

想要了解更多前端相關知識，可以關注PHP中文網站CSS3影片教學、CSS影片教學、Bootstrap教學等等相關教學課程，歡迎大家參考學習！

以上是Css3如何實現旋轉移動動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js如何實作文字閃爍特效？（圖文+影片）下一篇：js如何實作文字閃爍特效？（圖文+影片）

看更多