简单实用又不花里胡哨的鼠标滑过样式
一、纯图片的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 的测试案例
这里放内容简介 , 内容简介,这里放内容简介 , 内容简介,这里放内容简介 , 内容简介
【简单实用又不花里胡哨的鼠标滑过样式】作者:小小摇钱树链接:来源:掘金著作权归作者所有 。 商业转载请联系作者获得授权 , 非商业转载请注明出处 。
推荐阅读
- 可靠实用的最佳拍档 法翼T1执法记录仪体验评测
- 今天才发现,微信左下角连击2下,还有隐藏功能,太实用了
- 1个手机怎么登录2个微信?方法很简单,看完我学会了
- 苹果改变立场 称macOS实用程序Amphetamine可继续留在Mac应用商店中
- 华为手机备忘录真的太赞了,居然集成了7大功能,个个都非常实用
- 原来华为手机拍视频还能添加字幕,方法很简单,一学就会
- 手机照片、视频怎样添加文字?原来很简单,4种方法一分钟搞定
- 微信最近很火的“圣诞帽头像”,原来这么简单,快学起来
- 只为好看?手机多摄像头排布方式可没有那么简单
- 原来微信长按2秒这么实用!能开启5个高级功能,涨知识了