在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. Python basic (from learn python the hard the way)

    1. How to run the python file? python ...py 2. UTF-8 is a character encoding, just like ASCII. 3. ro ...

  2. Tkinter Toplevel

       Tkinter Toplevel:顶层部件的工作,直接由窗口管理器管理的窗口.他们不必在它们上面的父widget   顶层部件的工作,直接由窗口管理器管理的窗口.他们不必在它们上面的父widge ...

  3. 象棋AI算法（二）

    原文大神是用html5+js写的关于象棋AI的博客,里面重点讲了棋子的着法,自己设计的评估函数和简单的Minmax理论,没有具体的讲搜索算法,本文是对原文的学习和分析补充 一,棋子的着法com.byl ...

  4. 「小程序JAVA实战」小程序视图之条件判断（15）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-15/ 小程序里面也是有条件判断的,我相信大家在开发java if和jstl c:if c:when ...

  5. Mysql之数据库设计

    一.三大范式 1.第一范式:消除一个字段包含多个数据库值,消除一个记录包含重复的组(单独的一列包含多个项目),即可满足1NF. 2.第二范式:消除部分依赖性即可转化为2NF.部分依赖性表示一个记录中包 ...

  6. 用django实现redirect的几种方法总结

    用django开发web应用, 经常会遇到从一个旧的url转向一个新的url.这种隐射也许有规则,也许没有.但都是为了实现业务的需要.总体说来,有如下几种方法实现 django的 redirect.1 ...

  7. JDK动态代理，此次之后，永生难忘

    出自:http://www.cnblogs.com/dreamroute/p/5273888.html#3839242 首先感谢"神一样的存在"的文章! 动态代理,这个词在Java ...

  8. RocketMQ初探(二)之RocketMQ3.26版本搭建（含简单Demo测试案例）

    作为一名程序猿,要敢于直面各种现实,脾气要好,心态要棒,纵使Bug虐我千百遍,我待它如初恋,方法也有千万种,一条路不行,换条路走走,方向对了,只要前行,总会上了罗马的道. Apache4.x最新版本既 ...

  9. Java Socket编程之UDP

    UDP编程: 将要传输的数据定义成数据包(Datagram),在数据报中指明所要到达的Socket(主机地址和端口号),然后再将数据报发送出去. 相关操作类:     DatagramPacket   ...

  10. 字符串匹配——C++使用Regex

    需要#include  < regex >   匹配 regex_match ("subject", std::regex("(sub)(.*)") ...