下了一个软件：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. apache-httpd2.4编译安装

    centos 6 编译安装httpd-2.4 centos6yum安装的apr版本已经不适用httpd-2.4版本了.所以,需要源码编译apr以及apr-util1. 下载源码:cd /usr/loc ...

  2. 激活Win Server 2008 R2 Datacenter

    直接手撸KMS命令 管理员打开cmd输入: slmgr /skms kms.03k.org 然后用这个Key: 74YFP-3QFB3-KQT8W-PMXWJ-7M648

  3. Unity3D-Canvas-UIScaleMode

    UnityCanvasUI自适应部分 用Canvas下的自适应UI Scale Mode: Constant Pixel Size:固定像素大小,无论如何UI怎么样就怎么样,只能通过 Scale Fa ...

  4. delphi将程序最小化至右下角

    程序新手,如果有不恰当的地方,请大家帮忙改正! 1.下载并安装Raize.v5.5控件,delphi版本为:delphi 7.0. 2.添加RzTrayIcon控件.PopupMenu控件至窗体上. ...

  5. jupyter 服务器安装随笔

    python3:python3 -m pip install --upgrade pip python3 -m pip install jupyterpkg install py36-pyzmq-18 ...

  6. 【Linux 应用编程】进程管理 - 进程间通信IPC之管道 pipe 和 FIFO

    IPC(InterProcess Communication,进程间通信)是进程中的重要概念.Linux 进程之间常用的通信方式有: 文件:简单,低效,需要代码控制同步 管道:使用简单,默认阻塞 匿名 ...

  7. Python2.7安装&配置环境变量

    python安装版本为2.7 下载安装包,双击安装,一路按照提示进行. 安装完成后,配置环境变量. 我的电脑—属性--高级系统设置—高级—环境变量--Path--编辑(将安装路径粘贴进去),添加到安装 ...

  8. 【MM系列】SAP MM模块-分析采购收货完成标识

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-分析采购收货完成标 ...

  9. Java多线程学习——wait方法（管道法/生产者消费者模式）

    简单介绍管道法: 生产者生产数据输送到管道,消费者从管道拿出数据,管道为空消费者等待,管道满生产者生产,消费者消费生产者生产,生产者生产消费者消费. public class Corn { //要生产 ...

  10. Go语言入门篇-Golang之文本编码处理

    Golang之文本编码处理