## css图片划过浮起的效果
html代码:
```
<div class="galary"></div>
```
css代码:
```
.galary {
margin-top: 50px;
width: 100px;
height: 100px;
background: aqua;
box-shadow: 0 0 3px 1px rgba(51, 51, 51, 0.5);
transition: 0.3s;
}
.galary:hover {
margin-top: 40px;
box-shadow: 0 3px 15px 3px rgba(51, 51, 51, 0.5);
}
```
最终效果
![](https://box.kancloud.cn/5a54859eae1d30c1e8584c5697cc64ae_502x203.gif)
主要实现原理:
1. hover添加或者加粗阴影
2. hover用margin-top等方式上移图片
3. 利用transition设置动画时间
- 空白目录
- css实用样式
- css--下拉栏的几种设计
- css--图片阴影以及浮起的效果
- css--图片翻转二:自动翻转
- css--图片翻转一:滑过翻转
- css--三种loading特效
- css--图片遮罩效果实现
- css--又是三种loading特效
- css--带三角形的图形实现
- js demo
- 原生demo
- 1. 原生js实现轮播图
- 2. 倒计时按钮
- 3. 动态添加表格
- 4. checkbox全选反选
- 5. 小米登录方式切换
- 6. 点击事件
- 7. 个人网页导航条(二)点击滚动
- 8. 瀑布流实现!
- 9. 个人网页导航条(一)滑动固定
- 10. 定时器实现淡入淡出效果
- 11. 轮播图setTimeout版
- jQuery demo
- 1. 轮播图实现!
- 2. 成都小风车导航特效
- html组件
- html--导航栏(家居医生)
- html--登录页面(小米登录)
- html--响应式导航条(木兮地板)
- html--搜索栏
- Vue demo
- 1. mvvm实现动态添加表格
- 2. 豆瓣TOP250渲染
- 3. 制作一段跑马灯文字
- 3.1. vue 单行文字自动跑马灯效果
- 4. 利用豆瓣接口搜索书籍
- 5. 制作简易计算器
- 6. 创建一个点赞组件
- 7. 列表添加删除动画
- 8. isShow手风琴原理
- 9. tab栏切换