一个很有动感的弹出框css

如果您希望始终吸引访客的注意力,那么请尝试这种脉冲式CTA设计。它通过CSS使用延迟来创建具有外部发光的重复脉冲动画。 但是如果你深入研究CSS代码,你可以将脉冲动画改为你喜欢的任何东西。它非常通用,当然,它应该与任何设计完美融合。 此外,如果单击角落中的“X”图标,您将再次看到完整的动画效果。这会将按钮与窗 WP网站建设

网站建设

如果您希望始终吸引访客的注意力,那么请尝试这种脉冲式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;
}

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10856

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注