如何创建一个圆形的按钮 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

科蚁网 科蚁网 科蚁学院 HTML5+CSS3教程 查看内容

如何创建一个圆形的按钮

2015-7-17 13:29| 发布者: 科蚁网小编| 查看: 8753| 评论: 4|原作者: Mary Lou|来自: Tutorials

摘要: 今天我们将向您介绍如何创建一个俏皮的进步按钮的教程。本篇教程是由专业编程高手科林Garven总结的圆形按钮。
    今天我们将向您介绍如何创建一个俏皮的进步按钮的教程。本篇教程是由专业编程高手科林Garven总结的圆形按钮。看看它首先了解需要完成的步骤,并享受动画。按钮背后的想法是:点击后,提交按钮就变成了一个圆环,将显示一个进度动画使用它的边界。进度动画已经完成时,按钮将再次扩大,显示一个复选框,确认提交完成后,科林在评论提到。我们要实现这个概念,添加另一个国家时的情况提交失败。
很有可能创建这个按钮和效果。当考虑CSS-only技术,将是最具挑战性的部分进展循环。有一个聪明的技术使用夹属性实现的效果和安德斯Ingemann写了一篇很好的,很完整教程(他使用更少)。但是我们要实现这种美容使用基于SVG技术用CSS转换和一些JavaScript。圈的进步,特别是检查标志和交叉,我们将利用动画素描技术解释为杰克阿奇博尔德.
注意,动画svg可以为一些浏览器有问题,所以可能无法按预期工作无处不在。这些类型的技术仍在起步阶段,所以考虑本教程作为实验练习,为未来实现可能派上用场。,)
所以,让我们开始吧!
主计划
如果你有仔细观察科林的Dribbble上拍摄,您可能已经注意到,我们需要照顾好几个州的按钮。有趣的部分是转换从一个状态到另一个地方。
首先,我们想要展示一个简单的按钮使用透明的背景和颜色的边界。悬停在按钮上时,我们希望它充满了边框颜色和文本应该成为白色。
AnimatedProgressButton01_hover
当我们点击按钮(例如,为了提交一个表单),我们想淡出文本,按钮的宽度降低成为一个圆圈,使边境厚,开始一个进度动画在边境上。我们将使用一个SVG圈对于这个动画,因此我们需要确保减少圆形按钮是相同的大小和SVG圈,坐在相同的位置,我们将展示在那一刻。
然后我们将画的圆中风,模拟提交的进度。
AnimatedProgressButton02_progress
提交完成后,即中风所吸引,我们必须使我们的按钮再次扩大,画出选择目录提交成功。我们也会相应颜色的按钮。
AnimatedProgressButton03_success
提交失败的情况下,我们也会想要一个错误状态的风格。
AnimatedProgressButton04_error
所以,让我们创建我们的标记与所有我们需要的元素。
标记
对于我们的标记我们主要需要一个容器,包含文本、按钮和跨度和三个svg:

<div id="progress-button" class="progress-button">
<button><span>Submitspan>button>

<svg class="progress-circle" width="70" height="70">
<path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>
svg>

<svg class="checkmark" width="70" height="70">
<path d="m31.5,46.5l15.3,-23.2"/>
<path d="m31.5,46.5l-8.5,-7.1"/>
svg>

<svg class="cross" width="70" height="70">
<path d="m35,35l-9.3,-9.3"/>
<path d="m35,35l9.3,9.3"/>
<path d="m35,35l-9.3,9.3"/>
<path d="m35,35l9.3,-9.3"/>
svg>

div>
我们使用方法绘制SVG,一个易于使用的在线编辑器,可以前面复选框和交叉。所有svg将70×70的尺寸,因为我们的按钮有一个70像素的高度。因为我们希望圆中风5像素厚度为了看起来像在科林的概念,我们需要设置正确的半径,当我们把它在图形编辑器中,整个圈连同其中风充满按钮70像素的高度。注意,中风在SVG半嵌入半开始。例如,中风2将增加一个圆的半径10到“真正的”宽度和高度20 + 2,而不是20 + 4(边框宽度的两倍),因此公式2 r +边界。所以,在我们的案例中我们知道,2 r + 5 = 70,因此我们需要一个半径为32.5圈,最终这个形状 .
不幸的是,我们不能仅仅使用这个基本的形状,因为“路径”的起点将在浏览器不同,所以我们不能控制“进步动画”开始的地方。所以,我们把这圆形路径和使用,而不是(见上图)。你可以很容易地在方法绘制对象>转换为路径。
十字架我们将使用四个路径,这样我们才能吸引他们从中间点,使它看起来类似于检查标志动画。
所以,现在我们有了我们需要的所有元素。让我们想想操作流,开始样式。
CSS
首先,我们需要风格按钮容器。就像我们按钮的外层皮肤,让我们使它更像一个按钮的显示 inline-block所以,我们可以使用它在流:
.progress-button {
position: relative;
display: inline-block;
text-align: center;
}
我们的按钮需要一些爱着色和排版。为了让它看起来像科林的按钮,我们将正确的边界和选择蒙特塞拉特岛字体:
.progress-button button {
display: block;
margin: 0 auto;
padding: 0;
width: 250px;
height: 70px;
border: 2px solid #1ECD97;
border-radius: 40px;
background: transparent;
color: #1ECD97;
letter-spacing: 1px;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
我们还需要设置一个过渡为所有那些我们将动画的属性,如背景颜色,宽度等等。
在徘徊,我们将更改背景颜色和颜色:
.progress-button button:hover {
background-color: #1ECD97;
color: #fff;
}
让我们删除任何闪亮的概述:
.progress-button button:focus {
outline: none;
}
所有svg应定位绝对中心,我们将不允许任何pointer-events:
.progress-button svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
路径不应该有任何填补我们只想玩中风。我们不想让他们在任何国家除了他们的特殊状态,所以让我们隐藏他们通过透明的:
.progress-button svg path {
opacity: 0;
fill: none;
}
我们的进步环将通过设置创建循环路径的中风5:
.progress-button svg.progress-circle path {
stroke: #1ECD97;
stroke-width: 5;
}
成功/错误指标将有一个薄中风和他们会是白色。我们还将设置linecap中风的圆,这样他们看起来更好。这两个会有一个快速过渡不透明度:
.progress-button svg.checkmark path,
.progress-button svg.cross path {
stroke: #fff;
stroke-linecap: round;
stroke-width: 4;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
}
所以,让我们回顾一下,记住我们的总体规划。我们需要能够“风格”三个额外的州(除了默认状态)的按钮,它的特殊元素:加载状态,成功和错误状态。因此,我们将使用的类“加载”,“成功”和“错误”来表示它们。
这个按钮将变成一个圆,看起来和圆与加载过程:当我们开始
.loading.progress-button button {
width: 70px; /* make a circle */
border-width: 5px;
border-color: #ddd;
background-color: transparent;
color: #fff;
}
记住,我们已经设置了过渡在定义按钮样式。
文本应该淡出很快当我们开始进度动画…
.loading.progress-button span {
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}
…通过设置透明度为0:
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
opacity: 0; /* keep it hidden in all states */
}
当我们改变从加载到成功或错误状态,我们不需要过渡,我们只是想把它隐藏起来。
当我们删除所有类和返回到默认状态,我们想要更多的时间跨度。所以我们必须定义一个不同的过渡时间和延误正常状态:
/* Transition for when returning to default state */
.progress-button button span {
-webkit-transition: opacity 0.3s 0.1s;
transition: opacity 0.3s 0.1s;
}
当我们到达最后状态,并提交成功或有一个错误,我们需要重新定义转换按钮,因为我们不需要动画的边框颜色和宽度:
.success.progress-button button,
.error.progress-button button {
-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}
让为最终状态设置的颜色:
.success.progress-button button {
border-color: #1ECD97;
background-color: #1ECD97;
}

.error.progress-button button {
border-color: #FB797E;
background-color: #FB797E;
}
当我们申请相应的类,我们将展示我们的svg路径和动画 stroke-dashoffset通过设置以下转变:
.loading.progress-button svg.progress-circle path,
.success.progress-button svg.checkmark path,
.error.progress-button svg.cross 
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

提取码: Mary Lou 
下载次数:1    下载所需积分:0 枚资源币
下载权限: 新手上路  [如何获取资源币]   [充值科蚁币]  可 [兑换资源币]   [投诉报错]  

1

鲜花
3

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (5 人)

发表评论

最新评论

引用 yyit 2016-4-28 12:07
有趣哦!
引用 QQ群521595826 2016-1-5 22:53
【怎么学习网页制作】 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会的,没有人指导你,而且很多视频已经过时了 并没有什么用!  如果你真的想学习网页制作这门技术,你可以来这个群  前面是五二一,中间是五九五,后面是八二六  在这里有最新的网页制作课程 每晚免费课堂学习 课后老师答疑解惑  也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 如果不是真心想学习的就不要加了!
引用 筑墙碎梦 2015-10-30 09:16
感谢分享
引用 筑墙碎梦 2015-10-21 17:17
不错,感谢分享

查看全部评论(4)


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群