CSS3——制作带动画效果的小图片
2024-09-02 05:09:37
下了一个软件: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>
最新文章
- CSS知识总结(七)
- spring-boot-framework 如何自动将对象返回成json格式
- Unity字节序问题
- Web应用程序项目XX已配置为使用IIS
- python *args **kwargs
- 数据结构——二叉查找树、AVL树
- 三、jQuery--Ajax基础--Ajax全接触--Ajax在JS中的应用
- ImageEdit 展示图片(XAML, C#)
- Object C学习笔记19-枚举
- android之消息机制(一)
- Netsharp快速入门(之5) 基础档案(之D 实体建模 生成实体代码、同步数据库、配置插件运行时)
- Oracle常见的问题
- JDBC连接数据库和释放连接
- Entity Framework 学习中级篇2—存储过程(上)
- 探索 Java 热部署
- 201521123040《Java程序设计》第3周学习总结
- php base64图片保存
- FineCMS 5.0.10 多个 漏洞详细分析过程
- Charles通用破解激活办法
- 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性
热门文章
- WPF 带有提示文本的透明文本框
- 【SpringMVC】---RequestMapping、Ant 路径、PathVariable 注解、HiddenHttpMethodFilter 过滤器、用 POJO 作为参数
- 【不错】MySQL 事务隔离级别
- centos7:Zookeeper集群安装
- MathType的配置问题;将word中的公式转换为mathtype格式失败,缺少OMML2MML.XSL
- Redis---使用场景
- egg框架实现表单验证及获取验证的错误信息
- 各类无次数限制的免费API接口,再也不怕找不到免费API了
- css水平垂直居中问题
- 锋利的JS解读——认识JQuery(一)