在线演示：http://abelyao.github.io/ukulele/ 
源代码： https://github.com/AbelYao/css-ukulele 
效果图：

 

为了熟练 CSS3，尤其是变形、圆角等特性，花了一天的时间，用 HTML 和 CSS 做出了一把 UKULELE（尤克里里，夏威夷四弦吉他），当然，除此之外还用到了部分 JavaScript 来实现弹奏时播放声音的效果。

终于把这东西实现了，有点小激动，先占坑，以后详细介绍具体的细节，和一些思路。演示和源代码什么的，都在 github 上了，见文章开头的地址。

欢迎交流。

that’s all.

【原创】只用 HTML / CSS 画出一把 UKULELE（夏威夷四弦吉他）的更多相关文章

  1. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  2. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  5. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  6. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  7. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  8. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  9. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

随机推荐

  1. thinkphp数据库添加表单提交的数据

    $data['catename'] = I('catename');     获取表单的数据 $cate=D('cate');                               实例化cat ...

  2. ADO.NET中的DataReader详解

    使用特性 原理图 PS:Read()使指针下移,同时销毁上一条.所以SqlDataReader是只进的. GetValue()是找当前行中的列 SqlDataReader()特性. 1)只进的  上面 ...

  3. JAVA之多线程的创建

    转载请注明源出处:http://www.cnblogs.com/lighten/p/5967853.html 1.概念 老调重弹,学习线程的时候总会牵扯到进程的概念,会对二者做一个区分.网上有较多的解 ...

  4. DOS终端不能使用JAVA命令

    DOS 终端 java 命令OK javac 命令OK java version  命令OK 写了小程序HelloWorld 测试 ,文件名HelloWorld.java public class H ...

  5. 利用脚本修改SQL SERVER排序规则

    利用脚本修改SQL SERVER排序规则 编写人:CC阿爸 2014-3-1 l  今年的一项重要工作是对公司所用系统进行繁简的转换,程序转成简体基本很容易解决,但数据库转换成简体,就没那么容易了.经 ...

  6. .NET程序员爱上网站[整理]

    1.博客园(代码改变世界) http://www.cnblogs.com 2.开源中国社区(开源软件发现.使用和交流平台) http://www.oschina.net 3.CSDN(中国最大的IT社 ...

  7. 【漫画解读】HDFS存储原理(转载)

    以简洁易懂的漫画形式讲解HDFS存储机制与运行原理. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下: Client:客户端,系统使用者,调用HDFS API操作文件;与NN交互获取文件元数 ...

  8. tomcat 配置文件下载目录

    tomcat可提供文件的直接下载.有两种方式. 第1种 放到ROOT 目录下 然后在网址中访问: http://ip:8080/download.zip 便可下载 第2种 希望使用自己的文件路径. 在 ...

  9. Python学习教程(learning Python)--3.3 分支语句的条件表达式详解

    本节主要讨论分支语句的条件表达式问题. 在if或者if-else分支控制语句里由于都用到条件判断(表达式是真还是假),条件判断可以是一种关系运算也可以是布尔表达式. 本节将对if及if-else语句的 ...

  10. java解析XML几种方式

    第一种:DOM. DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树),应用程序 ...