下了一个软件：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. 安装Mantis出现的一些问题解决

    1.去除 Warning: date_default_timezone_get() 打开config_inc.php, 增加: $g_default_timezone = 'RPC'; 2.去除  S ...

  2. spotlight监控mysql性能

    spotlight可以监控mysql性能,同监控linux一样配置 目录 1.安装spotlight 2.参数认识 1.安装spotlight spotlight不仅仅只是监控mysql,还可以完成数 ...

  3. Jmeter测试HTTP接口

    一.工具说明 Jmeter是一款开源的桌面应用软件,可以用于进行接口测试和性能测试.因为该软件是开源的,所以更具扩展性.Jmeter可以对Web应用进行测试,另外还支持Java请求.Webservic ...

  4. 基于Python对象引用、可变性和垃圾回收详解

    基于Python对象引用.可变性和垃圾回收详解 下面小编就为大家带来一篇基于Python对象引用.可变性和垃圾回收详解.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. 变量不是盒子 在示例所示 ...

  5. Gradle之Gradle 的基本使用(一)

    [Android 修炼手册]Gradle 篇 -- Gradle 的基本使用 预备知识 基本的 android 开发知识 了解 Android Studio 基本使用 看完本文可以达到什么程度 掌握 ...

  6. 为终端配置proxy

    转自:https://my.oschina.net/u/818848/blog/677225?p=1 做开发的同学,应该都会经常接触终端,有些时候我们在终端会做一些网络操作,比如下载gradle包等, ...

  7. 应用安全 - harbaor - 漏洞汇总

    CVE-2019-19026(SQL注入,高危):https://github.com/goharbor/harbor/security/advisories/GHSA-rh89-vvrg-fg64( ...

  8. Linux-定时任务-打包与压缩

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  9. Rocketmq-概念

    一.Rcoketmq Rocketmq是一个消息中间件,简单来说就是传递消息用的. 二.Rocketmq构成 1.Rocketmq组件不是单个的软件,它是由四个组件构成的: (1)Producer 消 ...

  10. 深入.NET平台和C#编程的错题

    29)有如下C# 代码,则下面选项中说法正确的是(BC).public class A { }   Person public class B : A { }  StudentA a = new A( ...