WordPress

CSS3微信分享按钮弹窗效果

LensNews

远方的雪山微信分享按钮(微信公众号)
这篇文章我们来创建一个很酷的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代码

微信按钮

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

微信二维码代码

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

三、CSS3 样式

  1. /*微信样式*/  
  2. .weixin-btn{ cursorpointer; }   
  3. .weixin-popup{ background-color#fffborder3px solid #fffpadding15px; -webkit-border-radius: 6px; -moz-border-radius: 6pxborder-radius: 6px; }   
  4. /*弹窗样式*/  
  5. .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursordefaultleft: 0; opacity: 0; positionfixedright: 0; top: 0; visibilityhiddenz-index: 1; }   
  6. .popup { displayinline-blockleft: 50%; opacity: 0; positionfixedtext-alignjustifytop: 40%; visibilityhiddenz-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%); }   
  7. .overlay:target{ visibilityvisible; opacity: 1; }   
  8. .overlay:target+.popup { top: 45%; opacity: 1; visibilityvisible; }  

效果点击每篇文章下面的微信和易信分享按钮就可以。因为:target选择器IE8以下是不支持,所以要兼容性可以使用《远方的雪山微信分享按钮》这篇文章的jQuery弹窗效果。

(1)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 7 条评论,访客:3 条,博主:3 条 ,当前引用:1 条

  • 啦啦啦
    啦啦啦 发布于:  回复

    这种方式虽然实现了弹框效果,但是浏览器地址栏也会变啊,请问怎么使之不变呢?

  • 头像吧贴吧
    头像吧贴吧 发布于:  回复

    没用上哈哈啊。。

  • 张衡Henry
    张衡Henry 发布于:  回复

    学习了,css3 竟然可以直接实现弹窗

    • 萨龙龙
      萨龙龙 发布于:  回复

      主要是通过:target选择器加上CSS3的动画模拟弹窗,CSS3很强大啊

  • Kayo
    Kayo 发布于:  回复

    简单实用,支持css3!
    Ps.你的评论框很赞!

    • 萨龙龙
      萨龙龙 发布于:  回复

      CSS3很强大,还有很多很酷的功能,学习当中,现在CSS3能实现的动画效果就不用jQuery。评论框是在其它博客中看到的文章,CSS3和HTML5客户端验证,很喜欢就添加上。

当前外部引用:1 条

  • HTML5/CSS3响应式Purity企业主题 | 远方的雪山