这篇文章我们来创建一个很酷的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; }
[scbutton link="https://demo.salongweb.com/css3-popup/index.html" target="blank" variation="yellow"]在线演示[/scbutton][videobox]效果也可以点击每篇文章下面的微信和易信分享按钮。[/videobox]本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/css3-popup.html
一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！前面我们通过《前端开发利器Emmet的介绍》简单介绍了Emmet以及在编辑器中的安装，今天我们再来看用Emmet超高速的编写HTML代码。
…个性化的web字体，如萨龙网络的标题、页脚小工具标题、宣传语等都用的是个性化的web字体，在CSS3之前，web设计师们都只能使用电脑中安装好的…Emmet缩写可以快速地生成HTML代码的结构化标签，在我们编写HTML代码时节省了很多时间，提高了工作效率，让前端开发人员也不会感觉太繁琐，今…作为一个企业站点，客户可以通过电话、QQ等通讯方式很方便的联系到企业，但联系表单是一个必要的功能。
萨龙网络建站一般都使用wordpres…曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几…Sixianqiu主题，一个简洁、多形式（标准、图像、相册、音乐、视频、引用与链接），专门为四弦秋发表诗集的Wordpress博客主题。对于音乐…[infobox]前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HT…CSS3有太多实用、创新的网页交互效果，而今天跟大家介绍一个让人激动的3D图像旋转效果，使网页更加的生动、漂亮。
国外在HTML5/CSS…
