如何用CSS制作一个隐藏显示的相框特效
Admin 2022-06-11 群英技术资�
本文介绍了CSS 图片动画特效的示例代码(相框),分享给大家,具体如下�
下面是效果图
HTML代码
<!-- 主容� --> <div class="box"> <!-- 图片 --> <img src="images/pic.png" alt=""/> <!-- 内容 --> <div class="box-inner-content"> <h3 class="title">Rabbit</h3> <span class="post">Web Developer</span> </div> </div>
CSS代码
/* 初始� */ body, html { font-size: 100%; } * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #494A5F; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } /* 外层容器 */ .box { margin: 100px auto; width: 400px; height: 400px; overflow: hidden; position: relative; } .box:before { content: ""; display: block; border: 30px solid rgba(255, 255, 255, 0.3); position: absolute; top: 5px; left: 5px; bottom: 5px; right: 5px; opacity: 1; z-index: 2; transition: all 0.3s ease 0s; } .box:hover:before { top: 0; left: 0; right: 0; bottom: 0; border: 10px solid rgba(255, 255, 255, 0.18); } .box:after { content: ""; display: block; border: 8px solid #fff; position: absolute; top: 35px; left: 35px; bottom: 35px; right: 35px; opacity: 1; z-index: 1; transition: all 0.5s ease 0s; } .box:hover:after { top: 0; left: 0; bottom: 0; right: 0; opacity: 0; } /* 图片 */ .box img { width: 100%; height: auto; transform: scale(1.2); transition: all 0.5s ease 0s; } .box:hover img { transform: scale(1); } /* 文字内容 */ .box .box-inner-content { position: absolute; left: 45px; bottom: 125px; right: 45px; text-align: center; color: #fff; opacity: 0; transition: all 0.3s ease 0s; } .box:hover .box-inner-content { opacity: 1; bottom: 20px; text-shadow: 0 0 10px #000; } /* 标题 */ .box .title { font-size: 26px; font-weight: bold; margin: 0; } /* 文本 */ .box .post{ display: block; font-size: 16px; font-style: italic; margin-bottom: 10px; }
这里用了像素设定容器的大小,如果用bootstrap等框架的话,可以设置成响应式�
因为图片设置�100%,所以会自适应外层容器的大小�
需要注意的是外层容器的position一定要设置成relative�
主要用到CSS3的transition属性,我这里没设浏览器前缀,现在大多数浏览器都已经兼容这个属性了。如果不放心又不嫌麻烦的话,最好还是把各浏览器前缀加上�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是有关flex布局以及缩放的内容,flex布局是比较实用的,但是对于flex布局比例计算,一些朋友不是很了解,对此这篇文章就给大家来详细的介绍,感兴趣的朋友可以参考一下,接下来一起跟随小编看看吧�
这篇文章主要介绍了css中间自适应布局�5种解法详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在css中,可以利用filter属性给图片添加模糊层效果,该属性的作用就是设置元素的可视效果,当该属性与“blur()”函数一起使用时,可以给图片添加模糊效果,语法为“图片元素{filter:blur(模糊值px);}”�
相信很多小伙伴们对于CSS3中transform变换模型的渲染都是非常感兴趣的,下文的讲解详细,步骤过程清晰,对大家进一步学习和理解相关知识有一定的帮助。有这方面学习需要的朋友就继续往下看吧!
这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078