當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

004-CSS3动画类

發布時間：2025/4/17 CSS 103 豆豆

生活随笔收集整理的這篇文章主要介紹了 004-CSS3动画类小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 在實用價值的前提之下, layui并沒有內置過多花俏的動畫。而他們同樣在layui的許多交互元素中, 發揮著重要的作用。layui的動畫全部采用CSS3。

2. 使用方式

2.1. 動畫的使用非常簡單, 直接對元素賦值動畫特定的class類名即可。如:

// 其中layui-anim是必須的, 后面跟著的即是不同的動畫類 <div class="layui-anim layui-anim-up"></div>// 循環動畫, 追加: layui-anim-loop <div class="layui-anim layui-anim-up layui-anim-loop"></div>

3. 內置CSS3動畫一覽表

3.1. 下面是不同的動畫類名:

4. 例子

4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>CSS3動畫類</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script><style>.site-doc-icon { width: 892px; font-size: 0; }.site-doc-icon li {display: inline-block; vertical-align: middle; width: 222px; height: auto; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all 0.3s; }.site-doc-icon li:hover { background-color: #f2f2f2; color: #000; }.site-doc-icon li .layui-anim {width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}</style></head><body><ul class="site-doc-icon site-doc-anim"><li><div class="layui-anim" data-anim="layui-anim-up">從最底部往上滑入</div><div>layui-anim-up</div></li><li><div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div><div>layui-anim-upbit</div></li><li><div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div><div>layui-anim-scale</div></li><li><div class="layui-anim" data-anim="layui-anim-scaleSpring">彈簧式放大</div><div>layui-anim-scaleSpring</div></li><li><div class="layui-anim" data-anim="layui-anim-fadein">漸現</div><div>layui-anim-fadein</div></li><li><div class="layui-anim" data-anim="layui-anim-fadeout">漸隱</div><div>layui-anim-fadeout</div></li><li><div class="layui-anim" data-anim="layui-anim-rotate">360度旋轉</div><div>layui-anim-rotate</div></li><li><div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循環動畫</div><div>追加：layui-anim-loop</div></li></ul><script type="text/javascript">layui.use('jquery', function(){var $ = layui.$;// 演示動畫$('.site-doc-icon .layui-anim').on('click', function(){var othis = $(this), anim = othis.data('anim');// 停止循環if(othis.hasClass('layui-anim-loop')){return othis.removeClass(anim);}othis.removeClass(anim);setTimeout(function(){if(anim === 'layui-anim-fadein'){othis.css('visibility', 'hidden');setTimeout(function(){othis.css('visibility', 'visible');othis.addClass(anim);}, 500);}else{othis.addClass(anim);}});// 恢復漸隱if(anim === 'layui-anim-fadeout'){setTimeout(function(){othis.removeClass(anim);}, 500);}});});</script></body> </html>

4.2. 效果圖

總結

以上是生活随笔為你收集整理的004-CSS3动画类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

动画