美文网首页
走进Web前端 ——木犀星计划

走进Web前端 ——木犀星计划

作者: Cruyun | 来源:发表于2017-08-11 18:35 被阅读0次

欢迎各位萌新(and 隐藏的dalao)戳进这里啦,在前端入门我们首先从HTML和CSS开始,什么是HTML和CSS呢?

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

层叠样式表(英语:Cascading Style Sheets,简写 CSS),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。

基础教程请戳:

大家先在这里了解HTML和CSS的基础语法以及我们接下来要使用的一些基本标签<a><div><span>等和CSS的选择器即可。

在编写代码之前,你需要有一个编辑器。我们推荐VS Code、Sublime Text、Atom。在编辑器里,你可以编写你的html和css代码。下载地址:VS CodeSublime Textatom


本教程中,我们教大家用HTML和CSS实现一个酷炫的button。

首先来看看我想实现的效果吧


finish.gif

那接下来我们就来学习如何一步一步实现这个效果吧。


首先写好HTML的基础部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ghost Button</title>

  <!-- 我是注释:我们建议你将HTML和CSS分离,然后像这样将CSS文件在此处引入。-->
   <link rel="stylesheet" href="./style.css">

  <!-- 当然你也可以使用<style>标签把CSS代码放在这里。-->
</head>

<body>
<!-- 我们的Ghost Button就是写在这里啦 -->
</body>
</html>

接下来我们来写button:

<div>
    MuxiStudio
    <span> > </span>
</div>

这样就会出现“ MuxiStudio › ”这行字。使用<a>可以把这行字变成链接,这样你点击这个button就能跳转到我们的官网了。

<div>
    <a href="http://muxistudio.com/">
        MuxiStudio
        <span> › </span>
    </a>
</div>

接下来就是重头戏,我要用CSS魔法给button增加酷炫的效果。使用类选择器,我在CSS里面就可以给它们绑定样式。

先在HTML中绑定好类名(class的命名你可以随意)。

<div class="button">
    <a href="http://muxistudio.com/">
        MuxiStudio
        <span class="shift"> › </span>
    </a>
</div>

👇是CSS部分

用类选择器(基本语法是.加上class类名)给button设置边框、宽度、字体等属性,里面添加它的属性(基本语法是 属性名:值;)

.button {
    position: relative;
    border: 2px solid #2e2e2e; /* 边框属性,分别为边框粗细 实虚 颜色 */
    padding: 20px 15px; /* 上下内边距 左右内边距 */
    text-align: center; /* 内容水平居中 */
}

为了美观(酷炫),我又加了一些别的属性

.button {
    position: relative;
    border: 2px solid #2e2e2e;
    text-align: center;
    padding: 20px 15px;
    text-transform: uppercase; /* 小写字母转换成大写 */
      letter-spacing: 4px; /* 增加字符间距 */
      cursor: pointer; /* 光标呈现为指示链接的指针(一只手) */
}

CSS里面可以多个class设置同样的样式,这里对<a><body>我用了元素选择器,给所有<a><body>设置了属性,所以这里同时使用了类选择器设置.button和元素选择器设置<a>,我们这样写:

body {
    background: #000000;
}

.button a {
    color: #969696; /* 内容颜色 */
    font-family: 'Varela Round'; /* 字体 */
    text-decoration: none; /* 否则会有难看的链接下划线 */
    width: 200px; /* 宽度 */
    height: 100px; /* 高度 */
}

接下来我要实现光标移到button的时候出现动画效果,使用伪类选择器:hover。

.button:hover {
    border-color: #ffffff;
}
.button:hover a {
    color: #ffffff;
}
.button:hover .shift {
    padding-left: 10px;
}

光标移到上面的时候,边框和文字都会变成白色(#ffffff),文字会出现有10px的内边距。
现在你得到了这个:



相信到这里你已经基本掌握书写HTML和CSS的正确语法,接下来实现漂亮的白光划过的动画。
其实这是一个白色的矩形,给这个矩形添加相关的动画,让他从button划过。

同样,先在HTML里面写上标签,类名我定为"mask"。

<div class="button">
        <a href="muxistudio.com">
            MuxiStudio
            <span class="shift"> › </span>
        </a>
        <div class="mask"></div>
    </div>

CSS里面设置mask的属性

.mask {
    background: rgba(255,255,255,0.5); /* 透明色 */
    position: absolute;
    width: 200px;
    height: 100px;
}

下面重点介绍一下CSS动画的两个属性transformtransition,在这个动画里面我们主要使用了transform 3D效果,关于基础的transform 2D知识可以戳这里

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。

在这里我们用到的值有:

rotate3d(x,y,z,angle) 定义 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。

translate3d(x,y,z)定义 3D 转换。

CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其它属性仍如通常那样瞬间变化。

  • transition-duration指定过渡的时长。或者为所有属性指定一个值,或者指定多个值,为每个属性指定不同的时长。

  • transition-timing-function指定一个函数,定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。

  • transition-delay指定延迟,即属性开始变化时与过渡开始发生时之间的时长。

语法是transition: <property> <duration> <timing-function> <delay>;,默认值:all 0 ease 0,请始终设置transition-duration属性,否则时长为 0,就不会产生过渡效果。


.mask设置transform属性,

.mask {
    transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
}

.mask从一个水平的矩形变倾斜、旋转。
在光标移过button的时候希望他发生动画,所以再设置一个hover时的位置变换。

.button:hover .mask {
    background: #ffffff;
    transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}

transition属性设置过渡的效果。

.mask {
    transition: all 1.1s ease;
}

顺便给刚才的button也加上过渡

.button .shift {
      transition: all 1.1s ease;
}
.button {
    transition: border 1s ease, color .6s ease, background 3s ease;
}

然后.mask超过button的部分设置为不可见,在.button添加overflow: hidden;属性。这样我们就得到一个漂亮的Ghost Button。

为了兼容更多的浏览器(比如Chrome、Safari),transformtransition属性要多加带有一行-webkit-前缀,例如

.button {
    -webkit-transition: border 1s ease, color .6s ease, background 3s ease;
    transition: border 1s ease, color .6s ease, background 3s ease;
}

最后我做了一点美化,让button放置在页面的中央,设置了button的最大宽度max-width: 270px;(防止拉伸浏览器的时候效果不够),并且将transition属性中的ease值换成了贝塞尔曲线cubic-bezier(0.19,1,.22,1)就得到了文章开头的效果。


我们希望你们能实现的效果是:将这个button放置在页面的正中央,并且设置页面的背景色为渐变效果。

test.gif

当然,期待屏幕前的你们能实现更好玩更好看的效果,对此教程有任何疑惑都可以向我们提问。


请将你的代码传到GitHub,GitHub地址放入报名表中。
使用Windows系统的同学需要下载git bash自行安装git

相关文章

  • 走进Web前端 ——木犀星计划

    欢迎各位萌新(and 隐藏的dalao)戳进这里啦,在前端入门我们首先从HTML和CSS开始,什么是HTML和CS...

  • 第六届360前端星计划汇总

    第六届360前端星计划_JavaScript 从入门到放弃 第六届360前端星计划_web标准:前端的原力 第六届...

  • 【综合篇】Web前端性能优化原理问题

    (给达达前端加星标,提升前端技能) ​ 想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知...

  • web前端计划

    一直想来一次完整的前端学习过程,却始终没有开始。在情人节这天开始,每天打卡,记录进度。加油,决不能半途而废 第一天...

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • web前端学习计划

    前端学习的知识路线:原生js,使用jQuery及编写jQuery扩展,前端模版,前端mvc,模块化开发,mvvm开...

  • Web前端学习计划

    第一阶段:页面制造根底 从这一根底阶段开始,正式学习Web前端开发需求的编程语言HTML,CSS和JavaScri...

  • 怎样学习web前端?---Web前端需要熟悉大学里[高大上]计算

    怎样学习web前端?---Web前端需要熟悉大学里[高大上]计算机专业课吗? 怎样学习web前端?Web前端需要熟...

网友评论

      本文标题:走进Web前端 ——木犀星计划

      本文链接:https://www.haomeiwen.com/subject/xwyrrxtx.html