【原创】只用 HTML / CSS 画出一把 UKULELE(夏威夷四弦吉他)
在线演示:http://abelyao.github.io/ukulele/
源代码: https://github.com/AbelYao/css-ukulele
效果图:
为了熟练 CSS3,尤其是变形、圆角等特性,花了一天的时间,用 HTML 和 CSS 做出了一把 UKULELE(尤克里里,夏威夷四弦吉他),当然,除此之外还用到了部分 JavaScript 来实现弹奏时播放声音的效果。
终于把这东西实现了,有点小激动,先占坑,以后详细介绍具体的细节,和一些思路。演示和源代码什么的,都在 github 上了,见文章开头的地址。
欢迎交流。
that’s all.
【原创】只用 HTML / CSS 画出一把 UKULELE(夏威夷四弦吉他)的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- 情人节,教大家使用css画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
随机推荐
- 为何要使用Linux
摈弃 Windows 低效率的工作方式,发掘 Linux 身上的 UNIX 气质 我已经半年没有使用 Windows 的方式工作了.Linux 高效的完成了我所有的工作. GNU/Linux 不是每个 ...
- 收缩SQL数据库日志
各位同学,相信大家在使用SQL数据库时,常常会遇到日志文件比数据库文件还在大的情况.以下有一简单的办法,可以快速的删除日志档.使用其大小变为540K. 供各位参考. DUMP TRANSACTION ...
- CSS中的content和attr的用法
问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...
- PHP 实现下载文件到本地
只需要在php文件中设置请求头就可以了,创建download.php文件,代码如下: $fileName = $_GET['filename']; //得到文件名 header( "Cont ...
- 状态可以通过动画切换的按钮--第三方开源--TickPlusDrawable
Android tickplusdrawable(TickPlusDrawable)在github上的项目主页是:https://github.com/flavienlaurent/tickplusd ...
- 关于fseek和文件"ab+"打开方式的问题
这是在写一个文件的的时候发生的一个错误,代码如下 #include<stdio.h> #include <errno.h> #include <string.h> ...
- Python学习之静态页面数据抓取
1 页面信息抓取 定义getPage函数,根据传入的页码get到整个页面的html内容 getContent函数,通过正则匹配把页面中的表格部分的html内容取出 最后定义getData函数,同样是通 ...
- rails的字符编码
想练练手,随意的写了个登陆页面,简单的只有几行. <%= form_tag('login_check') do -%><%= text_field_tag 'user_name', ...
- 文件系统 第八次迭代 VFS相关说明
麻烦访问evernote链接 http://www.evernote.com/shard/s133/sh/53e5b5ac-1192-4910-8bd5-6886218562af/59516c32a5 ...
- Maven:mirror和repository 区别
1 Repository(仓库) 1.1 Maven仓库主要有2种: remote repository:相当于公共的仓库,大家都能访问到,一般可以用URL的形式访问 local repository ...