下了一个软件：ScreenToGif用来截取动态图片，终于可以展示我的小动图啦，嘻嘻，敲开心！

main.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <style type="text/css">

        .box{

            width:249px;

            height:299px;

            margin:50px auto;

            position:relative;

            overflow:hidden;

        }

        .box .pic_info{

            width:249px;

            height:100px;

            background-color: rgba(0,0,0,0.5);

            color:#fff;

            position: absolute;

            left:0;

            top:300px;

            transition:all 500ms ease;

        }

        .box:hover .pic_info{

            top:250px;

        }

        .box .pic_info p{

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="data:images/login.jpg" alt="animal">

        <div class="pic_info"><p>图片说明</p></div>

    </div>

</body>

</html>

CSS3——制作带动画效果的小图片的更多相关文章

  1. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  2. CSS3 制作网格动画效果

    在线演示      源码下载

  3. css3制作有动画效果的面板

    .show-panel .slide-panels{ right: 0px; } .slide-panels{ z-index: 101; background: #fff; position: fi ...

  4. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  5. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  6. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  7. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  8. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  9. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

随机推荐

  1. 2018.03.27 pandas concat 和 combin_first使用

    # 连接和修补concat.combine_first 沿轴的堆叠连接 # 连接concatimport pandas as pdimport numpy as np s1 = pd.Series([ ...

  2. RabbitMQ使用（上）

    1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方, ...

  3. CSS3—— 2D转换 3D转换 过渡 动画

    2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————>  ————>   移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并  3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...

  4. office问题解决办法汇总

    1.Office2007或2010提示:您正试图运行的函数包含有宏或需要宏语言支持的内容 解决办法:word选项--加载项--管理com加载项--转到--把所有加载项删除 2.excel2010打开三 ...

  5. input标签内容改变时触发事件

    1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加 ...

  6. 书籍：wpf学习书籍介绍

    WPF参考书推荐 下面先整理下,本人主要学习的WPF参考书: 1.WPF编程宝典(C#2010) 该书:(必读) 心得体会:读完该书后,你对WPF的基础和基本控件的使用,包括WPF的编程模型,相比Wi ...

  7. 在laravel框架中使用mq

    本文写于2018-11-28 1.部署laravel项目 https://github.com/laravel/laravel  通过git克隆项目,或者下载zip包然后解压等方式都可以把larave ...

  8. “AIIA”杯-国家电网-电力专业领域词汇挖掘

    十一之前一直在做“电力领域的词典构建”任务,今天也去聆听了前五支队伍的报告,现结合这段时间来的项目经历,写一下自己的若干心得. 电力领域的词典构建——方法1(非监督学习) 在电力领域词典构建心得1.0 ...

  9. [19/10/13-星期日] Python中的函数

    一.函数 # 第五章 函数 ## 函数简介(function) - 函数也是一个对象 - 对象是内存中专门用来存储数据的一块区域 - 函数可以用来保存一些可执行的代码,并且可以在需要时,对这些语句进行 ...

  10. Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/cli2/Option

    今天,在做canopy算法实例时,遇到这个问题,所以记录下来.下面是源码: package czx.com.mahout; import java.io.IOException; import org ...