masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Animate.css 纯CSS动画库_html/css_WEB-ITnose

Animate.css 纯CSS动画库_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:29:50
asal
1573 orang telah melayarinya

github上的地址是： https://daneden.github.io/animate.css/


Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本的使用方法

  1. 引入css文件到

    标签中 

    <head>  <link rel="stylesheet" href="animate.min.css"></head>
    Salin selepas log masuk

  2. 给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.

  3. 最后你给元素添加下面的一个class，就可以实现不同的动画效果:

    • bounce
    • flash
    • pulse
    • rubberBand
    • shake
    • headShake
    • swing
    • tada
    • wobble
    • jello
    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
    • lightSpeedIn
    • lightSpeedOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • rollIn
    • rollOut
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp

例子: 

<h1 class="animated infinite bounce">Example</h1>
Salin selepas log masuk

查看所有的动画效果



Label berkaitan：
Animate.css 纯CSS动画库
sumber：php.cn
Artikel sebelumnya：link标签的rel等属性属性的作用简单介绍_html/css_WEB-ITnose Artikel seterusnya：JS一定要放在Body的最底部么？_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2197
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2347
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1965
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1853
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1914
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan