一个很有动感的弹出框css

如果您希望始终吸引访客的注意力,那么请尝试这种脉冲式CTA设计。它通过CSS使用延迟来创建具有外部发光的重复脉冲动画。 但是如果你深入研究CSS代码,你可以将脉冲动画改为你喜欢的任何东西。它非常通用,当然,它应该与任何设计完美融合。 此外,如果单击角落中的“X”图标,您将再次看到完整的动画效果。这会将按钮与窗口一起加载到视图中,因此它甚至可以为第一个页面加载提供很酷的动画。 现在大多数网站都使用纯CSS按钮,所以找到你喜欢的并不是那么困难,并且克隆代码以获得kick-ass CTA。 <section> <div class=”wrapper”> <a class=”close”>X</a> <h1>Is this annoying?</h1> I wonder if having a pulsing button will entice people to click that little bit more. <button>Go on, click me.</button> </div> </section>   //variables $light-grey: #434343; $dark-grey: #212121; $blue:#00adee; $margin-bottom: 25px; // body styling html{ height:100%; } body{ display:flex; justify-content:center; align-items:center; font-family: ‘Source Sans Pro’, sans-serif; font-weight: 400; background: linear-gradient($light-grey, $dark-grey); height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } body *{ box-sizing:border-box; } section{ display: flex; flex: 0 500px; } .wrapper{ position:relative; display:flex; flex-flow:column; flex:1; padding:40px; margin:15px; border-radius:10px; background:#fff; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); transition:all 0.4s linear; &:hover{ box-shadow: 0px 8px 200px rgba(0, 0, 0, 1); } } .close { position:absolute; top:-10px; right:-10px; display:flex; align-items:center; justify-content:center; background:#000; color:white; width:30px; height:30px; border-radius:50%; text-decoration:none; transition:all 0.4s linear; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); &:hover{ background:$blue; } } h1 { font-size:36px; font-weight:700; margin-bottom:$margin-bottom; line-height:1.2; } h2 { font-size:20px; font-weight:700; margin-bottom:$margin-bottom; } p{ line-height:1.5; margin-bottom:$margin-bottom; } button { display:flex; justify-content:center; background:$blue; color:white; border:none; margin-bottom:$margin-bottom; padding:15px; font-weight:700; font-size:14px; border-radius:5px; transition:all 0.4s linear; cursor: pointer; &:hover{ background:darken($blue, 20%); } } .email-capture{ display:flex; button{ padding:0px 20px; } input{ flex:1; padding:0 0 0 20px; margin:0; border:none; height:40px; background:#eee; border-radius:2px; } } //animations $easeOutCust:cubic-bezier(.03,.16,.39,0.99); $easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530); $easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275); $globalDelay: .8; //just so we can see what’s going on even when codepen refreshes funny @keyframes slideIn { from {transform:translateY(400px);} to {transform:translateY(0);} } @keyframes fadeIn { from {opacity:0;} to{ opaticy: 1;} } @keyframes slideDown { from {transform: translateY(-120px);} to {transform: translateY(0);} } @keyframes slideInShort { from {transform:translateY(80px);} to {transform:translateY(0);} } @keyframes blink { 0% { box-shadow: 0 0 25px $blue; } 50% { box-shadow: none; } } section { animation: slideIn .65s $globalDelay+0s $easeOutBack both, fadeIn 0.25s $globalDelay+0s $easeInQuad both; } button { animation: slideDown 0.7s $globalDelay+.35s $easeOutCust both, fadeIn .2s $globalDelay+.3s $easeInQuad both, blink 2.0s linear infinite; } h1, h2 { animation: slideInShort 0.25s $globalDelay+.25s $easeOutCust both, fadeIn 0.1s $globalDelay+.2s $easeInQuad both; } p, .email-capture, .close { animation: slideInShort 0.25s $globalDelay+.3s $easeOutCust both, fadeIn 0.1s $globalDelay+.25s $easeInQuad both; }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 一个很有动感的弹出框css
分享到:
赞(0)
广告位820*80