怎么用CSS3实现鼠标经过动画时图片变大的特效-创新互联

本篇内容主要讲解“怎么用CSS3实现鼠标经过动画时图片变大的特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现鼠标经过动画时图片变大的特效”吧!

站在用户的角度思考问题，与客户深入沟通，找到岗巴网站设计与岗巴网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟主机、企业邮箱。业务覆盖岗巴地区。

这是一款css3鼠标经过动画特效。在该特效中，当鼠标经过图片时，图片略微放大，底部遮罩层出现，同时图片的描述文字和链接会以动画的方式出现在遮罩层之上，非常炫酷。

HTML结构

示例中，我们使用Bootstrap布局，该css3鼠标经过动画特效的HTML结构如下：

<img src="images/img-1.jpg"> <ul class="icon"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h4 class="title">Williamson</h4> Web Developer <img src="images/img-2.jpg"> <ul class="icon"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h4 class="title">Kristiana</h4> Web Designer

CSS样式

然后通过下面的CSS样式来实现该css3鼠标经过动画特效。

.box{ text-align: center; overflow: hidden; position: relative;}.box:before{ content: ""; width: 150%; height: 150%; position: absolute; top: 50%; left: 50%; background: radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 0 0, radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 16px 16px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 16px 17px; background-size: 32px 32px; background-color: rgba(0,0,0,0.5); opacity: 0; z-index: 1; transform: translate(-50%, -50%) scale(0); transition: all 0.56s ease 0s;}.box:hover:before{ opacity: 1; transform: translate(-50%, -50%) scale(1);}.box img{ width: 100%; height: auto; transition: all 0.3s ease 0s;}.box:hover img{ transform: scale(1.3); }.box .box-content{ width: 100%; position: absolute; bottom: 5px; left: 0; z-index: 1; transition: all 0.3s ease 0s;}.box .title{ font-size: 22px; font-weight: 600; color: #47ddc8; text-transform: uppercase; text-shadow: 0 0 2px #000; opacity: 0; margin: 0 0 5px 0; position: relative; transform: translateY(100%); transition: all 0.5s ease 0s;}.box:hover .title{ opacity: 1; transform: translateY(0);}.box .post{ display: block; font-size: 14px; font-style: italic; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; transform: translateX(-100%) rotateX(90deg); transition: all 0.5s ease 0s;}.box:hover .post{ transform: translateY(0) rotate(0); }.box .icon{ padding: 0; margin: 0; list-style: none; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); transition: all 0.3s ease 0s;}.box .icon li{ display: inline-block; margin: 0 7px; transform: rotateX(90deg); transition: all 0.3s ease 0s;}.box .icon li:last-child{ transition-delay: 0.2s; }.box:hover .icon li{ transform: rotateX(0); }.box .icon li a{ display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 5px; background: #fff; font-size: 17px; color: #505050; transition: all 0.3s ease 0s;}.box .icon li a:hover{ background: #47ddc8; box-shadow: 0 0 10px #000; color: #fff;}@media only screen and (max-width:990px){ .box{ margin-bottom: 30px; }}

到此，相信大家对“怎么用CSS3实现鼠标经过动画时图片变大的特效”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

当前标题：怎么用CSS3实现鼠标经过动画时图片变大的特效-创新互联
网站URL：https://www.cdcxhl.com/article18/dpgggp.html

成都网站建设公司_创新互联，为您提供微信公众号、App开发、虚拟主机、自适应网站、网站建设、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容