在线演示：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. Visual studio 2013 Team Foundation Server TFS2013 设置签出独占锁

    摘自: http://www.cnblogs.com/52XF/p/4239056.html 以备自查 如侵权,请告知

  2. com.google.inject.CreationException: Guice creation errors

    错误的原因:xml文件中方法名重复或错误

  3. URL重写以后发布到IIS找不到页面

    1.读取必须勾选,否则无法加载资源文件(img,css等) c:\windows\microsoft.net\framework\v2.0.50727\aspnet_isapi.dll

  4. 一步一图：从SQLSERVER2005中导出insert语句

    1.为什么要导出insert语句,我电脑装的是SQL Server Express免费版的,服务器上装的是正式版,在服务器上备份的数据库文件在本机上还原的时候 因为版本不一样,总是不成功.如果能直接使 ...

  5. ADO.NET中ExcuteReader读取存储过程获取的多行数据

    DLL层调用: List<BookInfo> tupleList = new List<BookInfo>(); using (IDataReader reader = thi ...

  6. PHP实现下载功能之流程分析

    客户端从服务端下载文件的流程分析: 浏览器发送一个请求,请求访问服务器中的某个网页(如:down.php),该网页的代码如下. 服务器接受到该请求以后,马上运行该down.php文件 运行该文件的时候 ...

  7. 使用了Theme但是没有效果问题

    最近在开发过程中使用了theme移植Preference并使用了一些android样式,但是在自定义的Theme修改了相关参数后却无法实现 可能有些朋友还不知道怎么用.这里也做个简要的使用方式说明. ...

  8. ng-summit and $watch() funciton

    <div ng-app> <form ng-submit="requestFunding()" ng-controller="StartUpContro ...

  9. SymPy库常用函数

    简介 SymPy是一个符号计算的Python库.它的目标是成为一个全功能的计算机代数系统,同时保持代码简 洁.易于理解和扩展.它完全由Python写成,不依赖于外部库.SymPy支持符号计算.高精度计 ...

  10. Java程序员要注意的10个问题————————好东西就是要拿来分享

    [本文来自优优码:http://www.uucode.net/201406/ten-issue-for-java],好东西就是要拿来分享 1. Array 转为 ArrayList 很多人会这么写: ...