在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. 100.64.0.0/10运营商级(Carrier-grade)NAT保留IP地址

    在一次跟踪路由的网络操作时发现自己路由器下一跳路由节点的IP地址比较奇怪,是100.64.0.1.好奇促使我查询了这个IP地址的归属,结果是保留地址,到这里觉得比较奇怪了,按照常理以IPv4为例保留的 ...

  2. js控制手机震动

    js控制手机震动 <button onclick="vibrate()">震动</button> <script> function vibra ...

  3. MonkeyScript测试命令集合

    MonkeyScript:(不支持截屏) 可以被Monkey识别的集合命令 可以完成重复固定的操作   MonkeyRunner(支持截屏操作) 提供一系列API,可以完成模拟事件和截屏操作   Mo ...

  4. Foglight 5.6.7 控制台jboss报404

    Foglight 5.6.7 控制台jboss报404 [终极问题原来就一数据库权限问题!下文是由问题源找到的类似的dell support的相关文章,但却是关于sql server error的,感 ...

  5. C# 设计模式-单例模式（Singleton）

    所谓单例模式即所谓的一个类只能有一个实例,说白了,也就是类只能在内部实例一次,然后提供这一实例,外部无法对此类实例化. 单例模式的特点: 1.只能有一个实例: 2.只能自己创建自己的唯一实例: 3.必 ...

  6. WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...

  7. windows共享连接显示无法打开

    Ping目标地址和名称可以连通,但是访问告知无法打开或找到名称,看凭据设置正常,重启无效. 判断:可能是由于凭据过期引起,更新凭据,重启,仍旧无效. 修改IP地址进行访问,成功打开. 清理网络连接状态 ...

  8. VS2017更新后 在WIN7上找不到 stdio.h等的问题

    项目->属性->配置属性->常规->windows SDK版本.将其换成你现在的版本即可解决问题,如果不行就重新下个最新版SDK,如WIN10的.

  9. nextcloud 安装

    nextcloud 优化 设置php.ini vim /etc/php/7.0/apache2/php.ini 添加以下代码: opcache.enable= opcache.enable_cli= ...

  10. Java Socket编程之TCP

    基于TCP的Socket通信: 服务器端: 创建一个服务器端Socket,即ServerSocket,指定绑定的端口,并监听此端口 调用accept()方法开始监听,等待客户端的连接 连接建立后,通过 ...