在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. 渗透辅助神器 - DZGEN

    项目地址:https://github.com/joker25000/DZGEN git clone ┌─[root@sch01ar]─[/sch01ar] └──╼ #git clone https ...

  2. 语义分析：C语言表达式的语法树生成——Python实现

      令狐冲慢慢走近,那汉子全身发抖,双膝一屈,跪倒在雪地之中.令狐冲怒道:“你辱我师妹,须饶你不得.”长剑指在他咽喉之上,心念一动,走近一步,低声问道:“写在雪人上的,是些什么字?”   那汉子颤声道 ...

  3. 一次性show 出所有配置

    cisco的全页打印显示配置信息的命令: #terminal length 0 #show run 华为和H3C的全页打印显示配置信息的命令: ]user-interface vty 0 4 ]scr ...

  4. Struts2结果页面配置(Result)

    1.全局页面配置 全局结果页面:针对一个包下的所有Action的页面跳转都可生效 <global-results> <result name="xxx">/ ...

  5. Setup Apache2 in Debian 9 and enable two ports for two sites

    root@debian:~# apt-get install apache2 root@debian:~# cd /etc/apache2/ root@debian:/etc/apache2# ls ...

  6. Shaders

    [Shaders] 1.Vertex-Lit,顶点光照着色器. Vertex-Lit is one of the simplest shaders. All lights shining on it ...

  7. 刷题向》一道逆向思维题（BZOJ1046）（NORMAL）

    这道题对于一类题都有一个通用思路:反向递减序列即为正向字典序. 对于逆向思维的题还要多做才能培养这种对于逆向思维的感觉. 想到这种方法之后,就很简单了. 因为n×m不会炸,所以反向LIS叠一个贪心就能 ...

  8. 解剖Nginx·自动脚本篇（1）解析配置选项脚本 auto/options

    在安装Nginx之前(即运行make脚本之前),首先是进行安装的配置准备,包括环境检查及生成文件.这些工作是由自动脚本完成的.和绝大多数软件一样,Nginx的自动脚本的入口,同样是名为configur ...

  9. MobileMovieTexture播放视频

    MobileMovieTexture插件支持IOS系统播放视频文件.简单,方便

  10. 解决VS2013中的控制台一闪而过的问题

    修改项目配置,右键点击项目,在右键菜单中选择属性,然后在弹出的对话框左侧列表中中选择 “配置属性”-->“链接器”-->“系统”,然后在右侧的列表中, 在第一项”子系统“的值中选择”控制台 ...