纯CSS图文消息弹窗动画【原创】

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，分为图文消息卡片内容和弹窗详细内容两个部分，代码如下：

<div class="page">
  <div class="page__demo">
    <div class="main-container page__container">
      <article class="card">
        <header class="card__header">
          <img class="card__preview" src="images/bg.jpg" alt="Preview img"><!--这里下载图片：https://placeimg.com/640/400/nature-->
          <h3 class="card__title"><a href="#popup-article" class="card__link">秘密——吸引力法则</a></h3>        
        </header>
        <div class="card__body">
          <div class="card__content">
            <p>这个秘密可以让你得到你想要的一切，包括快乐健康财富。你能拥有一切，达到你的目标，变成你想成为的人。我们可以拥有一切我们想拥有的东西，无论什么都能得到。</p>
          </div>
          <footer class="card__footer">
            <a href="#popup-article" class="card__link card__readmore">更多内容</a>
            <div class="card__meta">
              <span class="card__meta-label card__meta-comments">47</span>
              <span class="card__meta-label card__meta-likes">99</span>
            </div>
          </footer>
        </div>
      </article>
    </div>
  </div>
</div>
<div id="popup-article" class="popup">
  <div class="popup__block">
    <h1 class="popup__title">秘密——吸引力法则</h1>
    <p>这个秘密可以让你得到你想要的一切，包括快乐健康财富。</p>
    <img src="images/nature.jpg" class="popup__media popup__media_right" alt="The foto of nature">
    <p>你能拥有一切，达到你的目标，变成你想成为的人。</p>
    <p>我们可以拥有一切我们想拥有的东西，无论什么都能得到。</p>    
    <p>你想住在什么样的房子里？你想当个百万富翁吗？你想拥有什么样的事业呢？你希望自己更成功吗？你究竟想要什么？</p>
    <p>我看到奇迹发生在许多人的生命里，比如财富上，绝症康复，精神康复，以及两性关系转变的奇迹。</p>
    <p>奇迹之所以出现，是因为他们知道怎么运用我们即将公布的秘密。这是生命中伟大的秘密。</p>
    <p>我们都具有无穷的力量，我们都被同样的定律引导着，宇宙的自然定律真的是精确无比，因此我们建造宇宙飞船没有任何问题，还可以送人上月球，甚至可以预估登陆时间，精确度在1/10秒之内，不管你是在印度还是在澳洲，纽西兰，斯德哥尔摩，伦敦，多伦多，蒙特娄还是纽约，我们都依循着一种力量，一种定律，就是吸引力。这个秘密就是吸引力定律。</p>
    <p>你生命里发生的一切，都是由你吸引而来的，你在心里构想的画面，会在现实生活中发生，也就是说，你心里想的一切，都会被吸引到现实生活中来。现代聪明的人一直都知道这个定律。古巴比伦时代的人，也早就知道这个定律，这得天独厚的一小群人，你想想为什么1%的人可以赚取全世界96%的财富呢？你认为这是偶然的意外吗？绝对不是，这是人为造成的。因为他们了解一件事，他们知道这个秘密。你现在也即将认识这个秘密。</p>
    <a href="#" class="popup__close">关闭</a>
  </div>
</div>