在线演示：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. 一、Linux目录结构

    转自:http://www.cnblogs.com/JCSU/articles/2770249.html 你想知道为什么某些程序位于/bin下,或者/sbin,或者/usr/bin,或/usr/sbi ...

  2. SqlServer 事务和异常处理示例

    BEGIN TRANSACTION--开始事务 DECLARE @errorSun INT --定义错误计数器SET @errorSun=0 --没错为0 UPDATE dbo.Test SET te ...

  3. 很不错的安卓FadingActionBar控件源码

    这个我刚刚从一个github下载过来的,自己测试一下运行了,感觉还不错的,安卓FadingActionBar控件源码,现在就给大家分享一下,源码我已经上传到源码天堂那里了,想下载的朋友可以去那里下载吧 ...

  4. wpf常见枚举收集

    Icons made by from www.flaticon.com

  5. 发送Ajax请求获取JSON格式数据

    Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...

  6. 解决DataGridView在多线程中无法显示滚动条的问题

    在多线程中对DataGridView指定 DataSource 来填充数据,更新数据的时候,会导致DataGridView出现假死,显示错误或者滚动条无法显示的问题,在保证了DataGridView的 ...

  7. IIS安装错误导致网站访问不了

    如下图,网站正常但就是访问不了,原因是IIS配置不正确,把ASP.NET4.5等相关勾选上就可以了,不要用默认的勾选,要自己手动勾选.

  8. [leetcode]_K Sum 问题

    问题:K Sum问题是一个问题系列,在一个数组中找K个数的和能够满足题目中要求.从2 Sum 到 3 Sum , 3 Sum Clozet , 4 Sum..解法虽一开始不容易想到,但get到解题技能 ...

  9. Mac 安装 Tomcat

    默认mac已经安装好java jdk-----/Library/Java/JavaVirtualMachines 1. http://tomcat.apache.org/download-70.cgi ...

  10. mysql 根据生日计算年龄，并查询在18-25之间的语句

    select id, DATE_FORMAT(birthday,"%Y-%m-%d") birthday, CURDATE() , (year(now())-year(birthd ...