在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. 在Android Studio 0.5.2中使用ArcGIS Android SDK

    环境 操作系统:Mac OSX 10.8.5Android Studio: 0.5.2ArcGIS Android SDK: 10.2.3 操作步骤 在Android Studio中新建一个Modul ...

  2. HTTP接口开发专题一（四种常见的 POST 提交数据方式对应的content-type取值）

    application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了.浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 app ...

  3. C# 多线程窗体的创建

    从目前已经在项目中工作将近一个月来的情况来看,凡是费时的操作,基本上都要用到多线程的等待窗体.进度提示窗体等实时显示动态的进度信息.而如果直接在主线程的窗体上实时更新信息,就会造成更新太快或者太慢而出 ...

  4. 避免IE在ajax请求时，返回json出现下载

    转自:https://blog.csdn.net/z521q1314/article/details/54409048

  5. Redis实战——phpredis扩展安装

    准备安装软件(download) 1> [redis]       http://redis.googlecode.com/files/redis-2.4.3.tar.gz 2> [php ...

  6. README.md的编写

    1.编辑README文件 大标题(一级标题):在文本下面加等于号,那么上方的文字就变成了大标题,等于号的个数无限制,但一定要大于0 大标题 ==== 中标题(二级标题):在文本下面加下划线,那么上方的 ...

  7. ROS 禁止公网暴力破解SSH FTP

    最简单的彻底禁止公网访问SSH FTP端口 1 2 /ip firewall filter add chain=input protocol=tcp dst-port=21-22 src-addres ...

  8. 简述amixer及其用法

    最近接触到amixer,大概明白了其意思和具体用法,简述如下. alsamixer是Linux 音频架构ALSA中的Alsa工具的其中一个,用于配置音频的各个参数. alsamixer是基于文本下的图 ...

  9. HttpServletResponse返回页面弹窗

    下载方法: @RequestMapping(value = "/download.htm") public void downLoadFile(String id,HttpServ ...

  10. 35. Search Insert Position (Array; Divide-and-Conquer)

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...