在线演示：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. 1028 C语言文法

    <程序> ->  <外部声明> |  <程序>  <外部声明> <外部声明>  ->   <函数定义>  |  &l ...

  2. 转 网络IO模型：同步IO和异步IO，阻塞IO和非阻塞IO

    此文章为转载,如有侵权,请联系本人.转载出处,http://blog.chinaunix.net/uid-28458801-id-4464639.html 同步(synchronous) IO和异步( ...

  3. K-Means（K均值）算法

    昨晚在脑内推导了一晚上的概率公式,没推导出来,今早师姐三言两语说用K-Means解决,太桑心了,昨晚一晚上没睡好. 小笨鸟要努力啊,K-Means,最简单的聚类算法,好好实现一下. 思路: 共有M个样 ...

  4. Uva 1588 Kickdown

    这道题思路并不难想,在做题过程中主要遇到的困难有: 因为没有仔细的考虑边界情况,没有分析全面,导致因=没有取到而得不出正确结果,浪费的大量时间. 今后在做这类题目时,一定要先进行一个比较全面的分析+模 ...

  5. [原]Django慢请求分析工具--dogslow

    当你的网站突然变慢了,你怎么办? 先看监控,查看系统的资源消耗,CPU?IO?磁盘? 然后看日志,查看第一个出现慢请求的接口是哪个? 然后看依赖的服务,是第三方服务还是DB瓶颈,还是redis变慢,还 ...

  6. DNS笔记 DNS区域集成到 Active Directory

    可以将 DNS 区域集成到 Active Directory 中以提供增强的容错功能和安全性.OpenDNS   Google Public DNS往返时间 (RTT) 远程访问服务 (RAS)域名与 ...

  7. IntelliJ IDEA 13破解（JRebel 5.6.3a破解）

    首先安装IntelliJ 13,记得要下载Ultimate Edition版本,不然就不需要破解了.. 安装到本地,然后进行一些配置(这一步可以不要,但是考虑到以后换系统可以省事,推荐做) 打开{in ...

  8. setting菜单界面的形成--未优化

    代码: first_preference.xml: <?xml version="1.0" encoding="utf-8"?> <Prefe ...

  9. 【译】Spark官方文档——Spark Configuration（Spark配置）

    注重版权,尊重他人劳动 转帖注明原文地址:http://www.cnblogs.com/vincent-hv/p/3316502.html   Spark主要提供三种位置配置系统: 环境变量:用来启动 ...

  10. DOS下更改编码方式

    使用CHCP命令,CHCP是Change Code Page的缩写. 936 简体中文GBK 437 美国英语 65001 UTF编码 如:chcp 65001则将dos窗口中的字符编码改为UTF编码 ...