在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. Memcached的过期数据的过期机制及删除机制(LRU)

    Memcached的过期数据的过期机制及删除机制1.当某个值过期后,并没有从内存删除,因此,使用stats命令统计时,curr_item参数有信息(不为0)2.当某个新值去占用他的位置时,当成空chu ...

  2. Unknown picture file extension

    Image1.Picture.LoadFromFile('aaa.jpg'); Project Project1.exe raised exception class EInvalidGraphic ...

  3. shiro和Spring整合使用注解时没有执行realm的doGetAuthorizationInfo回调方法的解决（XML配置）

    在使用Shiro框架进行项目整合时,使用注解在使用Shiro框架进行项目整合时,使用注解在使用Shiro框架进行项目整合时,使用注解@RequiresPermissions为方法提供是需要的权限,但是 ...

  4. UsePass & GrabPass

    [UsePass] The UsePass command uses named passes from another shader. [Syntax] UsePass "Shader/N ...

  5. python's is&==区别

    [python's is&==区别] 通常我们写: if foo is None: pass 这个写法与以下的写法有何区别呢? if foo == None: pass is当比较的是相同的对 ...

  6. Vuex笔记/axios笔记

    每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储 ...

  7. Linux 下启动两个tomcat

    Linux 下启动两个tomcat 闲来无事学习nginx,想要配置个load balance.可是先决条件是:得有两个web容器.两个电脑是不用想了.只能想办法在一个机器上启动两个tomcat.原以 ...

  8. SQL 数据库 学习 003 什么是数据库？ 为什么需要数据库？是不是所有的软件都是用Sql Server？

    什么是数据库? 为什么需要数据库? 是不是所有的软件都是用Sql Server? 我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Exp ...

  9. 二、SQL的生命周期

    MySQL的sql语句由客户端发出,经过连接和权限验证后,最终达到服务器端,由服务器分配thread线程处理,之后就是要介绍的具体服务器端的thread线程是怎么处理每条sql语句的.[ 了解thre ...

  10. Jenkins持续集成构建

    配置Sonar.Jenkins进行持续审查 http://go2live.cn/archives/38261.html Jenkins iOS 项目持续集成 http://go2live.cn/arc ...