【原创】只用 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 ...
随机推荐
- Hadoop的shell脚本分析
你会发现hadoop-daemon.sh用于启动单独的本机节点 而hadoop-daemons.sh 会批量的ssh到别的机器启动 前记: 这些天一直学习hadoop,学习中也遇到了许多的问题,主要是 ...
- hadoop 根据SecondaryNameNode恢复Namenode
1.修改conf/core-site.xml 增加 <property> <name>fs.checkpoint.period</name> <value&g ...
- bitmag
- Gridview 行变色和行按钮调用前端js
1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...
- YARN内存使用优化配置
在Hadoop2.0中, YARN负责管理MapReduce中的资源(内存, CPU等)并且将其打包成Container. 这样可以精简MapReduce, 使之专注于其擅长的数据处理任务, 将无需考 ...
- ThinkPHP之中的事务回滚
小李子 获取thinkphp之中执行的SQL: 1.用调试模式的追踪trace功能: 2.代码: $user_type=D('user_type'); $datass=array('school_id ...
- php字符串截取问题
希望将一个字符串限长显示,如果该字符串超过一定长数,就截取前n个字符,后加省略号. 但是在英文和汉字混合的情况下会出现如下问题: 如果有这样一个字符串 $str="这是一个字符串" ...
- 入门级的PHP验证码
参考了网上PHP 生成验证码很多是类封装了的,没有封装的验证码其实只是几个GD函数而已,初学者可以看看,可以尝试自己封装. <?php session_start(); $im = ...
- 大话RAC介质恢复---只有备份文件的恢复
场景:Oracle 10g RAC:数据文件.控制文件.联机日志.参数文件都使用ASM,归档到ASM.完整备份后,删除所有控制文件.联机日志.数据文件:最后利用备份进行不完全恢复. 1.模拟灾难场景( ...
- jquery.unobtrusive-ajax.js源码阅读
/*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All right ...