下了一个软件：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. 2.k8s.Pod生命周期,健康检查

    #Pod生命周期,健康检查 pod创建过程 Init容器 就绪探测 存活探测 生命周期钩子 #Pod创建过程 master节点:kubectl -> kube-api -> kubenle ...

  2. python每日一练：0011题

    第 0011 题: 敏感词文本文件 filtered_words.txt,里面的内容为以下内容,当用户输入敏感词语时,则打印出 Freedom,否则打印出 Human Rights. 北京 程序员 公 ...

  3. Linux window 安装tomcat各版本下载地址

    1.地址 https://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/

  4. DataAdapter的Fill方法(转)

    使用DataAdapter填充DataSet(1) 在选择了DataAdapter的类型(SqlDataAdapter或OleDbDataAdapter)并配置了DataAdapter来执行所需的任务 ...

  5. 一个实用的iptables脚本（各种过滤写法参考）

    #!/bin/shmodprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t n ...

  6. JAVA日期时间相关库

    Java的日期时间库比较乱,同样一个Date在java.sql下定义,同时也在java.util下也定义了一遍,真不知道SUN是怎么想的. java8以后,java通过jsr310标准引入了一套符合I ...

  7. spring cloud gateway自定义过滤器

    在API网关spring cloud gateway和负载均衡框架ribbon实战文章中,主要实现网关与负载均衡等基本功能,详见代码.本节内容将继续围绕此代码展开,主要讲解spring cloud g ...

  8. MySQL-快速入门（4）MySQL函数

    1.函数包括:数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数. 2.数学函数:绝对值函数.三角函数(正弦函数.余弦函数.正切函数.余切函数等).对数函数.随机数函数. 1& ...

  9. Java——LinkedList使用Demo

    package list; import java.util.Iterator; import java.util.LinkedList; public class LinkedListDemo { ...

  10. 剑指Offer编程题（Java实现）——复杂链表的复制

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...