在Semantic-UI中定义了很多图片动画效果，可以直接使用。

示例：定义图片动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Semantic UI </title>

    <!-- 使用CDN导入js和css 文件-->

    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>

    <script>

        $(function () {

            $(".ui.blue.button").on("click",function () {

                $("#img").transition("fade");

            })

        })

    </script>

    <style>

        #img{

            width: 15%;

            height: 15%;

        }

    </style>

</head>

<body style="padding: 20px;">

    <!-- 定义图片动画 -->

    <img src="../images/pic.png" id="img">

    <button class="ui blue button">查看</button>

</body>

</html>

19、Semantic-UI之图片的动画效果的更多相关文章

  1. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  2. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  3. 【iOS开发】关于显示一连串图片组成动画效果UIImageView的使用

    关于使用UIImageView显示一串图片组成动画效果的总结: 1>创建装这一串图片的容器,使用NSArray NSMutableArray *images = [NSMutableArray ...

  4. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  5. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  6. 用ImageSwitcher实现显示图片（更改图片时有动画效果）

    ImageView和ImageSwitcher都是用来显示图片的.只不过后者在更新显示的图片的时候可以有动画效果. 注意点: 1.ImageSwitcher初始化需要定义一个ViewFactory,该 ...

  7. 使用animate()完成修改图片src切换图片的动画效果

    如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow" ...

  8. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

  9. iOS开发笔记7：Text、UI交互细节、两个动画效果等

    Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...

随机推荐

  1. Masking operations

    Using a mask, multiple bits in a nibble, byte, words can be set either on, off or inverted from on t ...

  2. Tkinter简易教程

    支持python的常见GUI工具包: Tkinter 使用Tk平台 很容易得到 半标准 wxpython 基于wxWindows.跨平台越来越流行 Python Win 只能在Windows上使用 使 ...

  3. activity与service进程内通信

    package com.example.binbin.testbinder; import android.app.Service; import android.content.Intent; im ...

  4. ARM汇编中值滤波实验

    其实就是 汇编的排序然后选出中位数 排序写的是最直接的冒泡排序,因为简单. 相应的C代码 r2=r0; while(r1<r0){ r1++; r2=r2-; r3=; while(r3< ...

  5. 无法添加数据连接。Could not load file or assembly 'Microsoft.SqlServer.Management.Sdk.Sfc, Version=11.0.0.0

    无法添加数据连接.Could not load file or assembly 'Microsoft.SqlServer.Management.Sdk.Sfc, Version=11.0.0.0 V ...

  6. 正则表达式RE与扩展正则表达式ERE——grep与egrep

    grep 正则表达式规则: ^ 行首定位符,表示从行首开始进行模式匹配 . 一个非换行符的字符 [ ] 匹配属于此集合的任意一个字符 [^ ] 匹配不属于此集合的任意一个字符 [a-z] (其指定的集 ...

  7. 通过CSS 给界面必选项添加星号

    在制作网页的时候,如果一个选项是必填的,通常会给选项添加一个红色星号,来引起用户的注意:最近笔者刚好遇见一个类似的需求,本来可以用html标签和style就可搞定,由于笔者需要改动的界面比较多(六个) ...

  8. Nginx 源码完全注释（11）ngx_spinlock

    Nginx 是多进程模式的,一个 master 与多个 workers,一般工作在多核 CPU 上,所以自旋锁就是必须用到的.Nginx 中的自旋锁的定义,位于 ngx_spinlock.c 中,如下 ...

  9. p4042 [AHOI2014/JSOI2014]骑士游戏

    传送门 分析 我们发现对于一个怪物要不然用魔法代价使其无需考虑后续点要么用普通攻击使其转移到他所连的所有点上且所有边大于0 所以我们可以先将一个点的最优代价设为魔法攻击的代价 之后我们倒着跑spfa求 ...

  10. catkin地址

    Source: git https://github.com/ros/catkin.git (branch: kinetic-devel)