《layui宇宙版教程》：CSS3动画类

最新推荐文章于 2023-04-17 10:46:15 发布
最新推荐文章于 2023-04-17 10:46:15 发布
阅读量349 收藏 1
点赞数
分类专栏： Layui宇宙版教程 文章标签： Layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghyghost/article/details/108033270
版权

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

 

1.6 CSS3动画类

在以实用的前提下，Layui并没有内置过多花俏的动画。而他们同样在Layui的许多交互元素中发挥着重要的作用。Layui的动画全部采用CSS3实现，因此不支持ie8和部分不支持ie9（即在ie8/9中无动画效果）。

1.6.1 使用方式

动画的使用非常简单，直接对元素赋值动画特定的class类名即可。

测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-row">

           <div class="layui-col-md12">

              其中 layui-anim 是必须的，后面跟着的即是不同的动画类

              <br />

              <div class="layui-anim layui-anim-up">a<br />b<br />c<br /></div>

              循环动画，追加：layui-anim-loop

              <br />

              <div class="layui-anim layui-anim-up layui-anim-loop">1<br />2<br />3<br /></div>

           </div>

       </div>

    </body>

</html>

 

1.6.2 内置CSS3动画一览表

    测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="layui/layui.all.js"></script>

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div class="layui-row">

           <div class="layui-col-md12">

              <div id="div1" class="layui-anim layui-anim-up" style="background-color: red;">layui-anim-up从最底部往上滑入</div>

              <br />

              <div id="div2" class="layui-anim layui-anim-upbit" style="background-color: green;">layui-anim-upbit微微往上滑入</div>

              <br />

              <div id="div3" class="layui-anim layui-anim-scale" style="background-color: blue;">layui-anim-scale平滑放大</div>

              <br />

              <div id="div4" class="layui-anim layui-anim-scaleSpring" style="background-color: red;">layui-anim-scaleSpring弹簧式放大</div>

              <br />

              <div id="div5" class="layui-anim layui-anim-fadein" style="background-color: green;">layui-anim-fadein渐现</div>

              <br />

              <div id="div6" class="layui-anim layui-anim-fadeout" style="background-color: blue;">layui-anim-fadeout渐隐</div>

              <br />

              <div id="div7" class="layui-anim layui-anim-rotate" style="background-color: red;">layui-anim-rotate360度旋转</div>

              <br />

              <div id="div8" class="layui-anim layui-anim-up layui-anim-loop" style="background-color: green;">追加：layui-anim-loop循环动画</div>

           </div>

       </div>

       <script>

           $("#div1").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-up");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-up");

              });

           });

           $("#div2").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-upbit");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-upbit");

              });

           });

           $("#div3").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-scale");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-scale");

              });

           });

           $("#div4").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-scaleSpring");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-scaleSpring");

              });

           });

           $("#div5").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-fadein");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-fadein");

              });

           });

           $("#div6").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-fadeout");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-fadeout");

              });

           });

           $("#div7").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-rotate");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-rotate");

              });

           });

           $("#div8").click(function() {

              var othis = $(this);

 

              if ($(othis).hasClass("layui-anim-loop")) {

                  $(othis).removeClass("layui-anim-loop");

                  return;

              }

 

              $(othis).removeClass("layui-anim-up");

 

              setTimeout(function() {

                  $(othis).addClass("layui-anim-up");

                  $(othis).addClass("layui-anim-loop");

              });

           });

       </script>

    </body>

</html>

立志做一个佳娃~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5全屏宇宙星空星系旋转canvas特效动画背景js效果
12-15
HTML5全屏宇宙星空星系旋转canvas特效动画背景js效果
layui 实现加载动画以及非真实加载进度的方法
10-16
今天小编就为大家分享一篇layui 实现加载动画以及非真实加载进度的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
004-CSS3动画类
aihiao的专栏
01-22 143
1. 在实用价值的前提之下, layui并没有内置过多花俏的动画。而他们同样在layui的许多交互元素中, 发挥着重要的作用。layui的动画全部采用CSS3。 2. 使用方式 2.1. 动画的使用非常简单, 直接对元素赋值动画特定的class类名即可。如: // 其中layui-anim是必须的, 后面跟着的即是不同的动画类 <div class="layui-anim layui-anim-up"></div> // 循环动画, 追加: layui-anim-
CSS3中设置动画播放时间
lorry的博客
06-15 6718
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒 语法规则 animation-duration: [,]* 取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。 案...
layer_loading插件
10-18
简单炫酷的加载loading动画，非常适合使用在延迟加载中，效果非常好！！
宇宙空间粒子CSS3动画特效
07-24
CSS3（层叠样式表第三版）是Web标准的一部分，它极大地扩展了CSS2.1的功能，引入了更多的选择器、伪类、伪元素以及强大的动画和过渡效果。在宇宙空间粒子动画中，CSS3的`keyframes`规则被用来定义粒子运动的各个阶段...
25个CSS3动画按钮和菜单教程分享
12-13
在网页设计领域，CSS3（层叠样式表第三版）的引入为开发者提供了丰富的功能，尤其是在创建动态和吸引人的用户界面方面。这篇文章分享了25个CSS3动画按钮和菜单的教程，旨在帮助设计师和前端开发者提升用户体验，打造...
css3绘制2D宇宙星空元素背景动画特效
06-11
在CSS3技术的支持下，我们可以创造出丰富多彩的2D宇宙星空元素背景动画特效，为网站或应用增添独特的视觉体验。这个特效包含多个宇宙元素，如太阳、月球、地球、金星以及流星雨，它们在背景中动态展示，给用户带来...
纯css3实现的动画按钮的实例教程
12-30
今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图： 　实现的代码。 　...
Layui select 的动态添加
laizhixue的博客
11-29 1万+
layui的select 若已经给了选项的数据，它还会动态生成另外一段代码 &lt;dl class="layui-anim layui-anim-upbit"/&gt;，若想自己添加动态的数据，则我们也需要添加 &lt;dl class="layui-anim layui-anim-upbit"/&gt;的选项数据，否则，select会失效。 添加两段选项的代码： $("#GoodsModi...
基于layui实现的云层动态特效的HTML登陆页面
11-18
本资源属于前端静态资源，基于layui实现的云层特效登录界面
layui下拉按钮
路漫漫其修远兮，吾将上下而求索！
04-13 5304
页面： <div class="layui-btn-group layui-form"> <button type="button" class="layui-btn layui-btn-sm layui-unselect layui-form-select downpanel" id="BatchBtn"> &lt...
Layui颜色.图标.动画
最新发布
qq_34820433的博客
04-17 711
框架提供了主色调、场景色和极简中性色风格的十六进制颜色代码参考；我们希望能动起来，可以结合框架的动画功能；框架内置了很多常用的小图标，首先需要定义。自带的颜色、图标和动画功能。，然后根据具体再定义；本节课我们来开始了解。
Layui 动画的基本使用参考
weixin_44178695的博客
11-24 3119
基本 引入js和css文件 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui动画测试</title> <script src="https://cdn.bootcss.com/...
layui 动画 实现过程
weixin_30410119的博客
07-31 742
layui官方文档晦涩难懂，对小白特别不友好 为演示效果，js和css文件引用cdn 演示是ul套li标签进行演示，这不是固定的，你也可以div套div，div套span，外面和里面的标签类要一一对应就行 官方文档演示没有提js语句的使用，直接写html代码是没有动画效果的，所以需要使用layui的js语句 <!DOCTYPE html> <html l...
layui——小问题汇总及例子(2020.4.5)
知北行的博客
04-05 950
1.layui.table组件使用，关于右侧的defaultToolbar,如果需要使用自定义工具栏方法，layui需要更新到官方2.5.5版本的layui。版本问题有时很常见。 参考：https://www.cnblogs.com/30go/p/11809287.html 2.layui.table自动加序号,在table.render()方法中加入这一行 ,{ type: 'numbers',...
layui之动态添加下拉菜单
小熊猫
07-09 1万+
转：https://blog.csdn.net/Code_shadow/article/details/80431937(不显示一定要先把select标签写上，不能标签也动态生成，那样会不显示 )//html &lt;select id="selectID"&gt;&lt;/select&gt;//js $.ajax({ url:'departmentAction_findAllDepar...
Layui 的使用总结
qq_33268245的博客
05-07 449
1.js功能不全.需要下载插件 tree 功能简单 table 大部分功能都有 select多选 需要下插件 时间轴 怎么横过来没研究 前端不太懂 图片查看功能简单 替换views.js form ajax提交有硬伤 别忘了return false . 要不提交两次 表单验证触发有bug,且不能单独使用,必须触发form监听,没有返回值, 提示信息不能自定义, 想要的话得自定义整个验证规则 d...
layui源码详细分析之树形菜单
热门推荐
玉案轩窗的博客
08-10 2万+
前言今天分析的是layui框架内置模块tree.js，该模块的功能是构建树形菜单，具体的形式(layui官网该模块的具体形式)如下： 自实现树形菜单使用html+css+js实现了树形菜单，具体的实现思路如下： html中定义包含树形菜单的容器节点 规划好树形菜单的样式以及图标 使用js构建html结构以及绑定事件，实现树形菜单的点击折叠 实现效果图如下： 核心的实现是构建html结构，组织
辛星Web前端教程：CSS3贺岁版详解
"2014年辛星web前端教程贺岁版第六本，专注于CSS3技术的教学，旨在提供更新、更全、更实用的前端知识，致力于成为专业且权威的学习资源。教程由辛星编写，他期望通过这个教程平台，与学习者共同成长，打造一个学术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值