利用css属性：hover 和opacity实现简单的动画效果

HTML代码：

   <div class="col-md-3 col-sm-4 box"><a href="team2.html"><div class="img"><img src="img/cyd.jpg" alt="曹允东"/></div><div class="text"><div><h3>曹允东</h3><p>管理合伙人</p><p class="more">+查看详情</p></div></div></a></div>

下列为css代码：

.team2 .row .box{padding: 0;margin-left: 30px;margin-right: 30px;position: relative;}
/*.team2 a{*//*position: relative;*/
/*}*/
.team2 .img{/*position: relative;*/
}
.team2 img{width: 100%;}.team2 .text{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: 100% 100%;background: url(../img/bg.png) no-repeat ;background-size:100% ;opacity: 0;transition: all 1s;}
.team2 .text div{color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.team2 .row .box:hover .text{opacity: 1;
}
.team2 .text h3{padding: 20px 0;text-align: center;font-size: 30px;
}.team2 .text p{font-size: 18px;padding-bottom: 20px;text-align: center;
}.team2 .text .more{font-size: 12px;border: 1px solid #fff;border-radius: 1px;line-height: 32px;padding: 0 15px;margin: auto;}/*没有小于768px，是因为Bootstrap3以移动端优先设计*//* 小屏幕（平板，大于等于768px） */
@media (min-width: 768px) {.team2 .row .box{margin-left: 0;margin-right:0;}.team2 .text{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: 100% 100%;}}

实现效果如下：

点击：hover前

点击：hover后

利用css属性：hover 和opacity实现简单的动画效果相关推荐

技巧分享：如何利用CSS属性修改图片颜色？
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
前端技巧|利用CSS属性修改图片颜色
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
利用css实现太极图的制作（带旋转动画）（课程实践教学项目）
利用css实现太极图的制作(带旋转动画) (课程实践教学项目) 简要说明第一步:太极图的绘制(1) 相关知识: 实现步骤: 代码: 效果: 第二步:太极图的绘制(2) 相关知识: 实现步骤: 代码: ...
android动画效果 translate,Android利用translate、scale、alpha、rotate实现动画效果
Android利用translate.scale.alpha.rotate实现动画效果在Android中可以用animation实现动画效果,Android中的animation由四种类型组成: a ...
html5鱼游动动画,CSS和D3制作小鱼游动的交互动画效果
CSS和D3制作小鱼游动的交互动画效果发布时间:2020-05-13 13:54:35 来源:亿速云阅读:118 作者:Leah 本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果.有一 ...
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
需要效果:将原本是长方形.正方形的图片,变成一个圆形图片这样的好处:不需要对图片进行特别的处理,直接使用实现思路: ①制作一个方形div盒子,将图片放在div盒子里 ②将盒子设置成圆形(利用 bo ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
32.ExtJS简单的动画效果
转自:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html 说明:这篇文章的大部分内容来源于网上,经过自己实现其效果后,整理如下: 在进行 Java ...
运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...

利用css属性：hover 和opacity实现简单的动画效果

利用css属性：hover 和opacity实现简单的动画效果相关推荐

最新文章

热门文章