纯CSS3 模拟弹窗效果


这篇文章我们来创建一个很酷的CSS3模拟弹窗效果,也许你看到过很多类似的弹窗效果,但都是通过jQuery来实现。

通过CSS3模拟弹窗效果只需简单的两段CSS样式就可以实现,而且实现的效果不比jQuery差,甚至更酷,要实现这个效果最重要的就是:target选择器,下面我们简单介绍下。

一、CSS3 :target选择器的简介

CSS3 :target选择器是CSS3众多实用的特性中的一个,用来匹配页面中URI指定的目标元素。通俗的说,URI中都会包含一个“#”字符,也就是ID,比如:“#weixin”,:target就是用来匹配ID为“weixin”的元素。

一般的页面中,点击一个带有ID的链接都会跳转到相应的位置,现在使用:target选择器就可以像:hover这样的选择器一样对目标元素进行样式的定义。

所以通过CSS3 :target选择器让当前活动的#weixin元素链接到二维码这个目标元素,定义其样式,最终显示二维码这个目标元素。

二、HTML代码

微信按钮

<a class="weixin-btn" rel="nofollow" href="#weixin" title="远方的雪山微信公众号"></a>

微信二维码代码

<!--微信分享按钮弹窗-->
<a href="#x"class="overlay" id="weixin"></a>
<article class="popup weixin-popup">
<h3>远方的雪山微信公众号</h3>
<img src="微信二维码地址" alt="远方的雪山微信公众号">
</article>

三、CSS3 样式

/*微信样式*/
.weixin-btn{ cursor: pointer; }
.weixin-popup{ background-color: #fff; border: 3pxsolid#fff; padding: 15px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
/*弹窗样式*/
.overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; }
.popup { display: inline-block; left: 50%; opacity: 0; position: fixed; text-align: justify; top: 40%; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.overlay:target{ visibility: visible; opacity: 1; }
.overlay:target+.popup { top: 45%; opacity: 1; visibility: visible; }
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:蓝色创想 » 纯CSS3 模拟弹窗效果

分享到: 生成海报
本站源码仅供学习交流,如需商用请在官方购买正版。技术服务为增值服务。

评论 抢沙发

实践是学习的最佳途径

了解更多联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活