碼上快樂

相關內容    簡體    繁體

CSS動畫框架Loaders.css +animate.css

本文轉載自   查看原文   2019-03-22 11:16   539 

 

CSS加載動畫框架Loaders.css

 

是一款非常出色的加載動畫框架，Loaders.css利用純CSS可以實現很多種樣式的Loading加載動畫，這些動畫並不需要圖片來輔助，而是僅僅需要CSS即可實現，因此運行效率比較不錯。

Loaders.css的特點

  • 基於純CSS，不需JavaScript腳本，也不需要圖片，很干凈。
  • 默認提供近30個不同的Loading動畫效果，你也可以發揮自己的想象來實現不同的加載動畫。
  • Loaders.css比較輕巧，基本沒什么臃腫的文件。
  • 免費、開源，這是必須的。

下面是第一行第4個Loading動畫的CSS代碼，其他的大家可以在源代碼中查看。

<span class= "hljs-selector-class" >.ball-clip-rotate-pulse {
   <span class= "hljs-attribute" > position : relative ;
   <span class= "hljs-attribute" >-webkit-transform: <span class= "hljs-built_in" >translateY( -15px );
   <span class= "hljs-attribute" >-ms-transform: <span class= "hljs-built_in" >translateY( -15px );
   <span class= "hljs-attribute" >transform: <span class= "hljs-built_in" >translateY( -15px ); }
 
<span class= "hljs-comment" > /* line 262, stdin */
<span class= "hljs-selector-class" >.ball-clip-rotate-pulse > <span class= "hljs-selector-tag" >div {
   <span class= "hljs-attribute" >-webkit-animation-fill-mode: both ;
   <span class= "hljs-attribute" >animation-fill-mode: both ;
   <span class= "hljs-attribute" > position : absolute ;
   <span class= "hljs-attribute" > top : <span class= "hljs-number" > 0px ;
   <span class= "hljs-attribute" > left : <span class= "hljs-number" > 0px ;
   <span class= "hljs-attribute" >border-radius: <span class= "hljs-number" > 100% ; }
 
<span class= "hljs-comment" > /* line 269, stdin */
<span class= "hljs-selector-class" >.ball-clip-rotate-pulse > <span class= "hljs-selector-tag" >div<span class= "hljs-selector-pseudo" >:first-child {
   <span class= "hljs-attribute" > background : <span class= "hljs-number" > #fff ;
   <span class= "hljs-attribute" > height : <span class= "hljs-number" > 16px ;
   <span class= "hljs-attribute" > width : <span class= "hljs-number" > 16px ;
   <span class= "hljs-attribute" > top : <span class= "hljs-number" > 9px ;
   <span class= "hljs-attribute" > left : <span class= "hljs-number" > 9px ;
   <span class= "hljs-attribute" >-webkit-animation: scale <span class= "hljs-number" > 1 s <span class= "hljs-number" > 0 s <span class= "hljs-built_in" >cubic-bezier( 0.09 , 0.57 , 0.49 , 0.9 ) infinite;
   <span class= "hljs-attribute" >animation: scale <span class= "hljs-number" > 1 s <span class= "hljs-number" > 0 s <span class= "hljs-built_in" >cubic-bezier( 0.09 , 0.57 , 0.49 , 0.9 ) infinite; }
 
<span class= "hljs-comment" > /* line 277, stdin */
<span class= "hljs-selector-class" >.ball-clip-rotate-pulse > <span class= "hljs-selector-tag" >div<span class= "hljs-selector-pseudo" >:last-child {
   <span class= "hljs-attribute" > position : absolute ;
   <span class= "hljs-attribute" > border : <span class= "hljs-number" > 2px  solid  <span class= "hljs-number" > #fff ;
   <span class= "hljs-attribute" > width : <span class= "hljs-number" > 30px ;
   <span class= "hljs-attribute" > height : <span class= "hljs-number" > 30px ;
   <span class= "hljs-attribute" > background : transparent ;
   <span class= "hljs-attribute" > border : <span class= "hljs-number" > 2px  solid ;
   <span class= "hljs-attribute" > border-color : <span class= "hljs-number" > #fff  transparent  <span class= "hljs-number" > #fff  transparent ;
   <span class= "hljs-attribute" >-webkit-animation: rotate <span class= "hljs-number" > 1 s <span class= "hljs-number" > 0 s <span class= "hljs-built_in" >cubic-bezier( 0.09 , 0.57 , 0.49 , 0.9 ) infinite;
   <span class= "hljs-attribute" >animation: rotate <span class= "hljs-number" > 1 s <span class= "hljs-number" > 0 s <span class= "hljs-built_in" >cubic-bezier( 0.09 , 0.57 , 0.49 , 0.9 ) infinite;
   <span class= "hljs-attribute" >-webkit-animation-duration: <span class= "hljs-number" > 1 s;
   <span class= "hljs-attribute" >animation-duration: <span class= "hljs-number" > 1 s; }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

在線演示地址：http://static.codeceo.com/demo/201505/loaders.css/index.html

 

 

GitHub地址：https://github.com/ConnorAtherton/loaders.css

 

軟件首頁：https://connoratherton.com/loaders

 

 

animate.css

　animate.css是一個使用CSS3的animation制作的動畫效果的CSS集合，里面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用

 

引入

　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法

　　1、從官網下載

　　https://raw.github.com/daneden/animate.css/master/animate.css

　　2、通過npm安裝

$ npm install animate.css

　　3、使用在線cdn

https://unpkg.com/animate.css@3.5.2/animate.min.css

 

效果演示

　　animate.css的使用非常簡單，因為它是把不同的動畫綁定到了不同的類里，所以想要使用哪種動畫，只需要把通用類animated和相應的類添加到元素上就行了

　　下面來詳細介紹animate.css里面的類，主要包括Attention(晃動效果)、bounce(彈性緩沖效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類

【Attention(晃動效果)】

復制代碼 
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
復制代碼

　　以在div上使用bounce為例

<div class="animated bounce"></div>

【bounce(彈性緩沖效果)】

復制代碼 
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
復制代碼

【fade(透明度變化效果)】

復制代碼 
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
復制代碼

【flip(翻轉效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

【rotate(旋轉效果)】 

復制代碼 
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
復制代碼

【slide(滑動效果)】 

復制代碼 
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
復制代碼

【zoom(變焦效果)】

復制代碼 
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
復制代碼

【special(特殊效果)】 

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

 

實際應用

　　在一般的使用中，直接在元素上添加animated和對應的類名即可

復制代碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>
復制代碼

　　通過給JS添加或刪除class，可以實現動態效果

復制代碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<button id="btn1">添加</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>
</body>
</html>
復制代碼

　　至於動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，可以在元素上自行定義，覆蓋掉animate.css里面所定義的就行了 

復制代碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
.infinite{animation-iteration-count:infinite;}
</style>
</head>
<body>
<button id="btn1">添加循環的動畫效果</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBox = document.getElementById('box');
oBtn1.onclick = function(){
  oBox.classList.add('animated');
  oBox.classList.add('flash');
  oBox.classList.add('infinite');
}
oBtn2.onclick = function(){
  oBox.classList.remove('flash');
}
</script>
</body>
</html>
復制代碼

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS動畫庫——animate.css的使用 CSS3動畫庫——animate.css vue 集成 animate.css 動畫庫 如何使用動畫庫animate.css 使用 Animate.css 實現轉場動畫 動畫庫animate.css的用法 vue animate.css訓練動畫案例 列表循環 vue第三方庫animate.css實現動畫 React項目中添加動畫 animate.css + React animate.css（第三方動畫使用方法）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM