1. 程式人生 > >css3 實現動畫效果,怎樣使他無限迴圈動下去?

css3 實現動畫效果,怎樣使他無限迴圈動下去?

<pre name="code" class="css">主要需要使用  -webkit-animation
如:
 -webkit-animation:gogogo 2s infinite linear ;
其中gogogo是自己定義的動畫幀,2s是整個動畫的秒數,infinite是永久迴圈 linear是線性變化 (step-end則是無線性變化,直接輸出結果)
 
程式碼如下:
CSS:



@-webkit-keyframes gogogo {
    0%{
        
        -webkit-transform: rotate(0deg);
       border:5px solid red;
    
    }
    50%{
        -webkit-transform: rotate(180deg);
        background:black;
       border:5px solid yellow;
    }
    100%{
        -webkit-transform: rotate(360deg);
        background:white;
       border:5px solid red;
    }

}
 
.loading{
   border:5px solid black;
    border-radius:40px;
    width: 28px;
    height: 188px;
   -webkit-animation:gogogo 2s infinite linear ;
    margin:100px;
 
}

相關推薦

css3 實現動畫效果怎樣使無限迴圈下去

<pre name="code" class="css">主要需要使用 -webkit-animation 如: -webkit-animation:gogogo 2s infinite linear ; 其中gogogo是自己定義的動畫幀,2s是整個動畫的

CSS3實現動畫效果常用方法

指定 afa 運動 css過渡 none reserve 更改 事件 keyframes 早期在web中要實現動畫效果,都是依賴於JavaScript或flash來完成,但在CSS3中新增加了一個新的模塊transition,它可以通過一些簡單的css事件來觸發元素的外觀變

超慢速移動動畫使用CSS3實現流暢效果

clas net 獲得 linear term 表示 ext eas == 三角碎片以很緩慢的速度旋轉移動。假設使用JS實現會出現一像素一像素移動的卡頓 使用CSS3會獲得很理想的效果 transform: translate3d(80px, 150px, 0px)

Android屬性動畫上手實現各種動畫效果自定義動畫拋物線等

在上一篇Android基礎動畫,組合動畫,幀動畫,佈局動畫,Activity跳轉動畫中我寫了基礎動畫的用法,那麼這次我們來看Android屬性動畫上手實現各種效果,包括實現基本的透明度,縮放,平

css怎麼讓div起來實現動畫效果一直在

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; anim

CSS3動畫效果滑鼠滑入時文字放大縮小

<!doctype html> <html>     <head>     <meta charset="utf-8">     <title>CSS3動畫效果</title>     <styl

2d旋轉(css3實現過度效果動畫效果

nim alt orm css3 ati text gif idt 分享圖片 效果:    源碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

CSS3實現投影效果

css 更新 文字 target blank ans lan 圖片 ear Webkit引擎定義了-webkit-box-reflect屬性,該屬性能夠實現投影效果,具體語法如下: -webkit-box-reflect: <direction> <of

CSS3實現動畫的兩種方式

logs del pin 屬性 cnblogs ase http eve 括號 1、設置transition設置過渡,添加transform設置形狀,形成動畫效果,如下: .divadd { transition: All 0.4s ease-in-out;

two.js之實現動畫效果

矢量圖 bsp 面向 tex get yellow text city ctype 一、什麽是two.js? Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用於多個場合:SVG,Canvas 和 WebGL,旨在使平面形狀和動畫的創建更方

angular2 如何使用animate實現動畫效果

mail AC 創建 ati col cap htm mark scss 首先要在Component裏引入對應的組件: immport { trigger, state, style, animate, transition } from "@angular/animati

jQuery事件機制動畫效果工具和其他操作(三)

不同 匹配 fad namespace event 返回 animate sin 繼續 jQuery事件機制 1 事件操作 1.1 頁面載入事件 $(document).ready(function(){ // 在這裏寫你的代碼... }); 或者 $(function

CSS3掃描動畫效果

.swiper-animate { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background: linear-gradient(t

Unity實現震動效果抖動震屏等

上篇震屏部落格說到的簡單震屏效果,雖然可以實現,但是螢幕邊界會給人一種扭曲感,振幅越大感覺越明顯。所以本篇部落格做出了大幅度更改,以正弦規律震動,效果更加自然,若實現震屏將此指令碼掛載到相機上即可,可以設定震動幅度,震動角度,震動次數等,具體引數效果可以通過更改控制面板上的引數測試,也可用於其他物體

教你如何在網頁上用利用H5快速實現動畫效果

meta ole adding play tor margin time 方式 scrip 在web開發中,GIF動畫效果是隨處可見,比如常見的loading加載、人物奔跑的gif圖片等等,那麽這些都是怎麽實現的呢?其實實現的原理很簡單,簡而言之,這些所謂的動畫都是一幀一幀

jquery 實現動畫效果(各種方法)

asc func 綜合 oat 代碼 jquer 一秒 遞歸 pan 1.show()和hide()和toggle()(這是show和hide的一個綜合,一個按鈕就實現顯示和隱藏) 效果: 代碼: <button type="button" class="show"

vue.js trasition動畫效果vue.js動畫

vue.js trasition動畫效果,vue.js動畫     ================================ ©Copyright 蕃薯耀 2018年12月07日 http://fanshuyao.iteye.com/   <

css3實現幻燈片效果

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

css3 實現動畫

CSS3,我們可以建立動畫,它可以取代許多網頁動畫影象,例如下面這個小球動畫 使用css3關鍵幀動畫可以輕鬆實現 請看下面程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

hexo next 主題 : 實現點選跳轉到文章的時候文章的頁面自動實現滾輪效果向下滾動到閱讀的位置。

背景: 博主的部落格希望實現能夠在點選到某個文章的時候,跳轉完了之後,頁面能夠自主的向下滾動到瀏覽的區域,因為博主的工作是搞java的,js方面在大一大二的時候搞過,有些東西忘記了,或者還沒有接觸到,有技術的盲區(可能對於閱讀這篇文章的你來說有些可笑~),不管那麼多,記錄下來,以便以