在线演示：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. Where is "Active Directory Information Extractor"?

    My friend she showed me a screenshot as below yesterday. The name of this document is “EnCase Forens ...

  2. Cent OS 6 主机名设置

    1:查看主机名: #hostname 2:修改主机名: #vi /etc/sysconfig/network ETWORKING=yes HOSTNAME=superboy.com 3:重启生效: # ...

  3. JAVA设计模式--strategy(策略者模式)

    概念策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化.(原文:The Strategy Pattern defines a fa ...

  4. 介绍一点.NET反编译的知识

    反编译是我们理解.NET内部实现的一种良好的手段. 程序编译时 Test.exe是IL代码.我们可以通过一些工具,来查看这些IL代码. 一模一样? 理论上来说,一模一样的反编译是不存在的.原因有以下3 ...

  5. 数据库mysql的基本命令

    问题分析 当数据量很大的时候,所有数据都集中在一个文本文件中的话,读写会很困难,内存消耗大,速度很慢 操作很麻烦,因为读写都要根据指定的格式尽心解析,不通用 每次获取数据都要全部数据重新读写,不能通过 ...

  6. ADO.NET(很精彩全面)

    记录一下地址方便以后看http://www.cnblogs.com/liuhaorain/archive/2012/02/06/2340409.html

  7. 将List<T>转化成 DataTable--调整可空类型的转化错误

    加载表结构并保持成XML string cmdText = @"select * from kb_lable_temp where 1=2"; using (SqlConnecti ...

  8. jQuery在HTML文档加载完毕后自动执行某个事件；

    原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...

  9. udev/raw/asmlib/多路径 配置asm

    asmlib 是linux上面给磁盘/分区头上面打上asm的标记,供asm使用,而且当磁盘的盘符发生改变的时候,不会影响到asm disk,从效果上说,和udev没有本质区别,在redhat 4和5中 ...

  10. Oracle sql trace

    一.SQL_TRACE说明 1.1.在全局启用 在参数文件(pfile/spfile)中指定:sql_trace =true 1.2.在当前session级设置 启用当前session的跟踪: alt ...