简单实用又不花里胡哨的鼠标滑过样式
一、纯图片的DIVhtml代码**(以下效果皆围绕这个代码展开)**:
文章图片
文章图片
1、缓动上移效果图:
文章图片
Kitty的标题标题
这是内容
1、框内放大图片+阴影效果图:
文章图片
Kitty的头像
Kitty的名字
css代码:
.box {
position:relative;
z-index:1;
display:inline-block;
overflow:hidden;
background:#3085a3;
text-align:center;
cursor:pointer
}
.box img {
width:200px;
height:200px;
opacity:1;
transition:opacity .35s,transform .35s;
float:left;
}
.box:hover img {
opacity:.5;
}
.box h3 {
margin-top:20%;
transition:transform .35s;
transform:translate3d(0,20px,0);
opacity:0;
color:#fff;
font-size:16px;
}
.box p {
margin:10px 0 0;
padding:15px;
border:1px solid #fff;
opacity:0;
transition:opacity .35s,transform .35s;
transform:translate3d(0,20px,0) scale(1.1);
color:#FFF;
}
.box:hover h3 {
transform:translate3d(0,0,0);
opacity:1;
}
.box:hover p {
opacity:1;
transform:translate3d(0,0,0) scale(1);
}
.box2 {
width:200px;
height:200px;
padding:15px;
position:absolute;
box-sizing: border-box;
}
2、文字滑动进入效果图:
文章图片
Kitty 的测试案例
这里放内容简介 , 内容简介,这里放内容简介 , 内容简介,这里放内容简介 , 内容简介
【简单实用又不花里胡哨的鼠标滑过样式】作者:小小摇钱树链接:来源:掘金著作权归作者所有 。 商业转载请联系作者获得授权 , 非商业转载请注明出处 。
- 发烧捡漏:想要获得好声音,其实很简单!三
- 「技术」这样的思路,让控制器中按键处理数据的方法变得简单了
- 买手机不要盲从,选择性价比较高的手机,实用才是硬道理
- 原来微信自带扫描仪,学会这2个方法,纸质档一键电子化,很简单
- APP制作开发难不难?有简单快捷又省钱的方法吗?
- 高脚|Zilio A&C发布了三款具有实用设计的极简主义家具产品
- 微信还能发送有声音的照片吗?建议花30秒学,简单又有趣
- 互联网+废品回收,真正的暴利行业!环保为主的当下,暴富很简单
- 所有人,看过来!分期买iPhone 12,怎么记账最简单?
- iOS14的4个实用小功能,一般安卓系统没有,苹果用户有福了