picture_info demo of transition in css
来源:互联网 发布:诺基亚e66软件 编辑:程序博客网 时间:2024/06/07 02:10
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ height:128px; width: 128px; position: relative; overflow: hidden; } .box .pic{ height:128px; width: 128px; position: relative; background: url("../images/avatar.png"); } .box .pic_info{ width: 128px; height:64px; top: 128px; color: #ffffff; background-color: rgba(0,0,0,0.5); position: absolute; left: 0px; transition: all 500ms ease; } .box .pic_info p{ margin: 20px; line-height: 20px; } .box:hover .pic_info{ top:64px; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; } </style></head><body> <div class="box"> <div class="pic"></div> <div class="pic_info"> <p> This the info of the picture above This the info of the picture above This the info of the picture above This the info of the picture above </p> </div> </div></body></html>
when you move your mouse on to the picture,the information of the picture will pop from the bottom.
阅读全文
0 0
- picture_info demo of transition in css
- css - transition
- CSS-transition
- Tweening transition of Brightness in ActionScript with Tweener
- css3 transition demo
- css 动画效果 -- transition
- CSS Transition (变换动画)
- css transition属性详解
- CSS过渡 && bootstrap transition
- CSS:Transform和Transition
- CSS之transition
- CSS transition的用法
- css过渡transition
- css动画之transition
- CSS之transition属性
- xml demo in fk of QTP...
- 中断与停止CSS transition
- html5 CSS过度-webkit-transition
- 總結——關於2017 11 3測試的分析總結
- 公开课发布《微博话题高性能降级设计》
- 0基础lua学习(十二)Lua 模块与包
- linux centOS6.7下安装jdk8
- ssh 连接错误
- picture_info demo of transition in css
- varnish运行原理及配置
- Github控件
- HDU-1001(Sum Problem)
- arcgis发布坐标转换(1984转xian80)的GP服务以及服务的调用(一)
- 本地YUM源制作
- 【学习笔记】C#语言入门详解1.课程简介
- AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using fe80::1
- Okhttp解析(二)网络请求的执行