css3图片卡片按钮点击弹出更多内容代码



229 914 305



特效描述:css3 图片卡片 按钮点击弹出内容,css3制作图片卡片,点击查看弹出更多内容展示代码

代码结构

1. 引入CSS

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

2. HTML代码

<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片头像上传 带标题的焦点图 文字标签 图片广告 文字提示框 文件上传 带缩略图的幻灯片 彩色文字 带简介的焦点图 对联广告 提示框/弹出层 文本框 图片轮播 文字闪烁 layer 下拉框 自动滚动图片轮播 打字机 叠加浮动层 lightbox 复选 文字列表 马赛克幻灯片 单选 Tooltip工具提示框 全屏焦点图 文字弹幕 登录框 浮动提示框 文字高亮 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 flash焦点图 360全景 html5文字动画 悬浮浮动漂浮 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 浮动提示框 图片文字 文字导航菜单 切换按钮 form表单 焦点图幻灯片 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到