jQuery特效实例_幽灵按钮1|学习笔记

简介: 快速学习 jQuery 特效实例_幽灵按钮1

开发者学堂课程【jQuery 开发教程:jQuery 特效实例_幽灵按钮1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/deta


jQuery 特效实例_幽灵按钮1


一、jQuery 特效实例_幽灵按钮1

幽灵按钮:

也叫透明按钮,顾名思义,也就是在设计网页中的按钮之时,不再设计复杂色彩、样式和纹理,而是外仅以线框示意轮廓,只脑示意功能,背景透出,与整个页面背景合而为-的设计方式。

国外的设计师称之为“幽灵按钮”( Ghost Buttons ),盛赞这种按钮通透简约,贴合整体风格又不失神韵,别具魅力。这种按钮的设计早已有之,但是在iOS安卓双双风格转向之后,成了网页设计的新趋势,拥有类似设计的网页设计作品入雨后春笋一般,映入眼帘。

代码部分:

首先创建一个新的工程,GhostButtons

< !DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title></title>
//引入ccs
<link rel=”stylesheet” href=”app.css” type= “text/css”/>
</head>
<body>
//大盒子
<div class="box">

图片106.png

三个按钮都在一个大的布局当中

//第一个按钮
<div class="Link link-miss">
//span标签,承载图片
<span class= "icon"></span>
//承载button
<a href="#n class="button">
//4个span承载4条线,上下左右
<span class="Line line-top">< /span>
<span class="Line line-Left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>

里面首先应该有一个承载图案的区域,下面会有个承载按钮的区域,仔细观察进入这个按钮Imagine,他有一个动画效果,事实上这个动画效果是由一个元素产生的,然后对这个元素进下动画处理即可。

//第二个按钮
<div class="link link-play">
<pan class="icon">< /span>
<a href="#" class="button">
<span class="Line line- top"></span>
<span class="line line-Left"></span>
<span class="line line-right></span>
<span class="line line- bottom"></ span>
PLAY
</a>
</div>
//第三个按钮
<div class="link line-touch">
<span class="icon">< / span>
<a href=”#” class="button'>
<span class="line line-top"></span>
<span class="Line line-left></span
<span class="line line-right"></span>
<span class="line line- bottom"></ span>
TOUCH
</a>
</div>
</div>
</body>
</htmL>

效果图:

图片107.png

App.css:

*{
margin:0
padding:0
}
//背景颜色
body{
background-color; #33
}
//大box样式
.box{
width: 1000px;
height: 220px;
margin: 50px auto
}

设置完cs后效果图:

图片108.png

三个按钮样式已初步搭建完成

相关文章
|
11月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
74 0
|
16天前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
15 3
|
2月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
51 13
|
2月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
18 1
|
2月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
18 1
|
2月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
28 0
|
5月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
36 0
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
5月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
88 0