CSS3制作苹果风格键盘特效


Posted in HTML / CSS onFebruary 26, 2015

效果预览:

 CSS3制作苹果风格键盘特效

html标签:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 KeyBoard</title>
<link rel="stylesheet" href="font.css" type="text/css" >
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<ul>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li class="icon">?</li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>return</li>
<li class="icon">?</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li><span>!</span><span>,</span></li>
<li><span>?</span><span>.</span></li>
<li class="icon">?</li>
<li>.?123</li>
<li></li>
<li>.?123</li>
<li class="icon">?</li>
</ul>
</body>
</html>

CSS代码:

复制代码
代码如下:

@font-face {
font-family: 'icomoon';
src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot');
src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://upimage-img.stor.sinaapp.com/icomoon.woff') format('woff'),
url('http://upimage-img.stor.sinaapp.com/icomoon.ttf') format('truetype'),
url('http://upimage-img.stor.sinaapp.com/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #000;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul {
width: 704px;
background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%);
padding-left: 8px;
border-radius: 5px;
padding-top: 10px;
}
ul::after {
content: "";
display: table;
clear: both;
}
li {
font-family: "Vrinda";
width: 54px;
height: 50px;
line-height: 50px;
background-color: rgba(255,255,255,.9);
border-radius: 5px;
float: left;
text-align: center;
font-size: 24px;
vertical-align: text-top;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 0 rgba(0,0,0,.5);
cursor: pointer;
position: relative;
}
li:active {
box-shadow: inset 0 1px 0 rgba(0,0,0,.5);
top:1px;
}
.icon {
font-family: "icomoon";
}
li:nth-child(11), li:nth-child(21), li:nth-child(22),
li:nth-child(32), li:nth-child(33), li:nth-child(35), li:nth-child(36) {
background: rgba(188,188,188,.5);
font-size: 20px;
}
li:nth-child(12) {
margin-left: 20px;
}
li:nth-child(21) {
width: 98px;
}
li:nth-child(n+22) {
width: 52px;
}
li:nth-child(32) {
width: 74px;
}
li:nth-child(33) {
width: 176px;
}
li:nth-child(34) {
width: 362px;
}
li:nth-child(35) {
width: 74px;
}
li:nth-child(31), li:nth-child(30) {
box-sizing: border-box;
padding-top: 14px;
}
li:nth-child(31) span, li:nth-child(30) span {
display: block;
line-height: 0.5;
}
HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 #HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 #HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 #HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 #HTML / CSS
You might like
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python打印输出数组中全部元素
2018/03/13 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python实现AES加密解密
2019/03/28 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python根据服务获取端口号的方法
2019/09/25 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
真诚的求职信
2014/07/04 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
python保存图片的四个常用方法
2022/02/28 Python