svg实现爆裂式页面弹出窗口代码



96 383 128



特效描述:svg实现 爆裂式页面 弹出窗口代码,svg实现爆裂式页面弹出窗口代码

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/modernizr.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<main class="cd-main-content">
  <section class="center">
    <h1>SVG爆裂式页面弹出窗口特效</h1>
    <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">查 看 详 情</a> </section>
</main>
<div class="cd-modal" data-modal="modal-trigger">
  <div class="cd-svg-bg" 
    data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" 
    data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" 
    data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" 
    data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" 
    data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" 
    data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z"> <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500">
    <title>SVG Modal background</title>
    <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/>
    <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/>
    <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/>
    </svg> </div>
  <div class="cd-modal-content">
    <p> 《美人鱼》是由周星驰执导,由江玉仪监制的喜剧爱情片,邓超、林允、张雨绮、罗志祥等领衔出演 </p>
    <p> 该片讲述了富豪刘轩和为了拯救同族前往刺杀他的美人鱼珊珊坠入爱河,谱写了一段人鱼爱情童话的故事。该片于2016年2月8日在中国上映[2-3]  。 </p>
    <p> 富豪刘轩(邓超饰)的地产计划涉及填海工程,威胁靠海为生的居民。因为人类对大海及生态的破坏,美人鱼只能被赶到了一艘破船里艰难生存,背负家族秘密的珊珊(林允饰)被派遣前往阻止填海计划。刘轩是一个靠自己努力才取得成就的人,虽然表面有钱但实则空虚寂寞的他和美人鱼珊珊在交手过程中互生情愫。刘轩最终因为爱上珊珊而停止填海工作,但珊珊却因意外受伤而消失于大海[4-5]  。 </p>
  </div>
  <a href="#0" class="modal-close">Close</a> </div>
<div class="cd-cover-layer"></div>
<script src="js/jquery-2.1.4.js"></script> 
<script src="js/snap.svg-min.js"></script> 
<script src="js/main.js"></script>



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


热门标签: 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 悬浮浮动漂浮 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 浮动提示框 图片文字 文字导航菜单 文字 图片广告 提示框/弹出层 文字列表

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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