下了一个软件：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. pycharm运行正确但是不出结果

    描述:之前用的好好的,突然有一天用pycharm运行程序,明明结果正确, 打印不出来结果,看下图 解决: 查看File Transfer有好多错误,意思是没有连接上服务器 [2018/12/8 21: ...

  2. hibernate 1 连接数据库、操作表

    ormapping(对象关系映射):数据库操作框架 缺点: 1.因为hql语句是hibernate内部自动生成,程序员干预不了,不可把控 2.功能比较复杂时不建议使用 优点: 1.比较简单. 2.有数 ...

  3. 正则的?:pattern, ?=pattern, ?!pattern学习整理

    真正学习这次正则知识前,我是被这道题给难住了: # 目标文本 str1 = "ever1, ever2, never1, never2, never3, forever1, forever2 ...

  4. jmeter的cookie跨线程传递

    测试计划需要设置成独立运行每个线程组获取cookie需要先执行才能使接下来的cookie使用正确执行 登录线程组登录,使用正则表达式提取器提取所需cookie然后使用BeanShellPostProc ...

  5. idea中创建maven格式的文件方法

    其中新建的maven工程有时候不全或者出一些小问题导致新建类,或者其他文件时候找不到新建的快捷方式,下面就说一种快速设置

  6. ionic3遇到的刷新页面服务器关闭的问题

    这几天为了写毕设,需要使用Ionic写手机客户端,遇到一些奇怪的问题,具体问题就是启动使用ionic serve启动服务器之后只要一刷新界面就会导致服务器关闭,报的错误如下: events.js:13 ...

  7. kafka使用问题解决

    java.lang.UnsupportedClassVersionError:org/apach/kafka/comon/utils/Utils:Unsupport major.minor versi ...

  8. Mybatis—动态sql拼接问题

    背景:使用Mybatis的最近半年,经常发现一些小坑,现在总结回顾下,记个小本本,不让它再来欺负我! 百度了许久,才留心到官网文档,比我的全,我很菜的! *************<if> ...

  9. poj-1236.network of schools(强连通分量 + 图的入度出度)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 27121   Accepted: 10 ...

  10. docker环境下分析zookeeper观察者角色

    问题引入 zookeeper新引入的角色observer是不参与投票的,通过增加observer节点,可以在提高zk系统读吞吐量时,不影响写吞吐量. 那么问题来了 Zookeeper系统节点如果超过半 ...