在线演示：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. ASP.NET内置对象二

    (1)Respose对象 利用Response对象输出文字信息: protected void Page_Load(object sender, EventArgs e){ string messag ...

  2. 解决mysql占用IO过高

    1.日志产生的性能影响:由于日志的记录带来的直接性能损耗就是数据库系统中最为昂贵的IO资源.MySQL的日志包括错误日志(ErrorLog),更新日志(UpdateLog),二进制日志(Binlog) ...

  3. [转]CentOS开机启动脚本

    转载自http://www.2cto.com/os/201306/220559.html   我的一个Centos开机自启动脚本的制作   一.切换到/etc/init.d/   二.制作sh脚本 v ...

  4. grep命令实战

    显示/etc/rc.d/rc.sysinit中以#开头,且后面跟一个或多个空白字符,而后又跟了任意非空白字符的行 grep "^#[[:space:]]\+.\+" /etc/rc ...

  5. jquery不熟悉的方法

    1.jquery有一个筛选api find. 语法很简单,比如: HTML 代码: <p><span>Hello</span>, how are you?</ ...

  6. 安装pdo.so和pdo_mysql.so还有pcntl.so扩展到php中

    1.下载源码,解压tar -xzvf php-5.4.20.tar.gz cd  /usr/local/src/php-5.4.20/ext/pdo /usr/local/php/bin/phpize ...

  7. 查看binlog文件的2种方式

    1.使用show binlog events a.获取binlog文件列表 mysql> show binary logs; +------------------+-----------+ | ...

  8. 在EF的code frist下写稳健的权限管理系统：MVC过滤拦截，权限核心（五）

    [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowMultiple = ...

  9. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  10. Python脚本控制的WebDriver 常用操作 <十一> 操作测试对象

    下面将使用WebDriver来模拟键盘的输入操作,以及复习上节的层对象操作 测试用例场景 定位到具体的对象后,我们就可以对这个对象进行具体的操作,比如先前已经看到过的点击操作(click).一般来说, ...