随笔分类 - HTML5
如何使用jQuery 制作全屏幕背景的嵌入视频
摘要:实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm请使用支持HTML5的浏览器查看本效果。完整代码如下:如何使用jQuery制作全屏幕背景的嵌入mp4-柯乐义一只小蜜蜂,飞在花丛中左飞飞,右飞飞,剪刀、石头、布请使用支持HTML5的浏览器查看本...
阅读全文
足球宝贝来了,任你旋转(CSS3)
摘要:CSS3鼠标悬停图片平面上360度旋转效果代码
阅读全文
程序员用HTML5给女朋友制作的3D相册
摘要:程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。效果网址:http://keleyi.com/keley
阅读全文
HTML5 随机弹跳的小球
摘要:查看效果:http://keleyi.com/a/bjad/tc1y11dy.htmChrome效果图:火狐效果图:推荐:http://hovertree.com/texiao/css3/18/以下是源码: web前端:http://www.cnblogs.com/jihua/p/webfront.
阅读全文
CSS3 莲花盛开动画
摘要:点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm或者:http://keleyi.com/keleyi/phtml/css3/10a.htm效果图:代码如下: 1 2 3 CSS3制作莲花开放动画-柯乐义 4 5 215 216 217 CSS3制作莲花开放218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 web前端:http://www.cnblogs.com/jihua/p/webfront.htmlpre...
阅读全文
强大css3制作新浪LOGO 胜过PS
摘要:请使用支持CSS3的浏览器查看效果:http://keleyi.com/a/bjad/6lu3dgj8.htm效果图:完整代码如下: 1 2 3 CSS3新浪LOGO-柯乐义 4 224 225 226 查看效果227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 ...
阅读全文
css3图片模糊过滤效果
摘要:css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下HTML5中的CSS3技术。体验效果:http://keleyi.com/a/bjad/yin8b5eb.htm代码如下: 1 2 3 4 5 css3图片模糊过滤特效-柯乐义 6 41 42 43 css3图片模糊过滤特效·柯乐义44 请使用支持CSS3的浏览器,移动光标到图片上。 原文45 46 47 48...
阅读全文
使用javascript和canvas画月半弯
摘要:使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm以下是代码: 1 2 3 4 使用javascript和canvas画月半弯-柯乐义 5 8 9 10 使用javascript和canvas画月半弯·柯乐义 11 12 57 58 web前端:http://www.cnblogs.com/jihua/p/webfront.html
阅读全文
低调奢华 CSS3 transform-style 3D旋转
摘要:点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm效果图:CSS3 transform-style 属性以下是代码:10 11 12 13 transform-style实现Div的3D旋转-柯乐义14 58 59 60 请使用支持CSS3的浏览器原文61 62 63 柯乐义64 keleyi.com65 66 67 68 原文:http://keleyi.com/a/bjad/s89uo4t1.htmweb前端:http://www.cnblogs.com/jihua/p/webfront.html
阅读全文
HTML5 Canvas眨眼睛动画
摘要:效果请看:http://keleyi.com/a/bjad/p9exlcwi.htm请使用支持HTML5的浏览器查看效果。以下是代码: 3 4 5 6 7 8 web前端:http://www.cnblogs.com/jihua/p/webfront.html
阅读全文
实用CSS3的transform实现多种动画效果
摘要:查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm以下是代码: 1 2 3 4 5 实用CSS3的transform实现多种动画效果-柯乐义 6 152 153 154 155 156 157 Translate 158 TranslateX 159 TranslateY 160 Rotate 161 Scale 162 ScaleX 163 ScaleY 164 Skew 165 SkewX 166 SkewY 167 Matrix 168 169 170 171 web前端:http://www.cnblogs....
阅读全文
jquery在线五子棋
摘要:在线五子棋试玩地址:http://keleyi.com/game/12/以下是完整代码,保存到html文件打开也可以玩: 1 2 3 4 在线五子棋-柯乐义 5 6 7 8 9 10 11 26 27 28 29 30 31 简体中文32 English33 ...
阅读全文
多彩图标按钮动画下拉菜单
摘要:支持IE、Chrome、火狐等多种浏览器。效果预览可以点击这里查看:http://keleyi.com/keleyi/phtml/menu/2.htmHTML源代码: 1 2 3 4 5 多彩图标按钮动画下拉菜单-柯乐义 6 7 8 9 10 11 12 13 14 15 16 17 18 原文多彩图标按钮动画下拉菜单19 20 21 22 23 24 Javascript25 jQuery26 HTML527 web前端28 29 30 31 32 33 三级菜单图片走马灯jQ的toggle34 35 36 37 38 39 40 使a链无效ready的简写41 42 43 4...
阅读全文
JavaScript实现HTML5烟花特效
摘要:烟花效果如下(请使用支持HTML5的浏览器查看):点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm源代码如下: 1 2 3 原文:http://keleyi.com/a/bjac/3pipmkmg.htm触须:http://keleyi.com/a/bjac/k3pi4ehx.htmweb前端:http://www.cnblogs.com/jihua/p/webfront.html
阅读全文
jquery和css3实现滑动导航菜单
摘要:效果预览:http://keleyi.com/keleyi/phtml/html5/15/有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问。HTML源代码: 1 2 3 4 5 jquery和css3滑动导航菜单-柯乐义 6 7 8 9 10 11 12 13 jquery和css3滑动导航菜单 CSS3 Fancy Menu / keleyi Menu14 请使用支持HTML5/CSS3的浏览器访问本页。A CSS3 Experiment by insicdesigns15 16 17 18 .NETJavascriptjQueryC#ASP.NETMVCHTML...
阅读全文
纯CSS3实现3D跳动小球
摘要:请使用Chrome,火狐的浏览器查看本页面,使用IE将看不到效果。如果在本页看不到一个跳动的小球,请确定您的浏览器支持CSS3,或者访问http://keleyi.com/a/bjac/iphgrtqm.htm看看。以下是源代码: 1 2 424 425 426 427 428 429 430 431 另一个css3动画:http://keleyi.com/a/bjac/nmwpqgag.htm更多:http://www.cnblogs.com/jihua/p/webfront.html原文:http://keleyi.com/a/bjac/iphgrtqm.htm
阅读全文
Web前端资源汇总
摘要:本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 华山论剑HTML5特效 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例"Far away from home" jQuery网页版五子棋小游戏源码下载 一句j
阅读全文
使用CSS3制作立体效果的导航菜单
摘要:效果如下:也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm请使用支持CSS3的浏览器访问本页面,获得更好效果。源代码: 1 110 111 Home112 About Me113 Portfolio114 Blog115 Resources116 Contact Me117 118 119 首页120 关于121 jQuery AJAX122 导航样式123 侧边导航124 树形菜单125 126 127 Home128 About Me129 Portfolio130 Blog131 Resources132 Contact M.
阅读全文
HTML5锚点请用id代替name
摘要:HTML5已经去掉name属性,实现锚点时请使用id,实例效果:http://keleyi.com/keleyi/phtml/html5/9.htm支持Chrome,火狐,IE8以上等浏览器。以下是完整代码:HTML5锚点实例--柯乐义柯乐义 HTML5锚点 keleyi.com转到底部请滚动鼠标使页面向下www.keleyi.com欢迎hi绿色箭头图片返回顶部效果蓝色方块返回顶部纯文本返回顶部漂亮的返回顶部、底部和留言keleyi.comkeleyikeleyi.com柯乐义柯乐义 监视下滚像素keleyi.comjquery原文keleyi.com完整代码HTML5已经去掉name属性,实
阅读全文
用html5的canvas画布绘制贝塞尔曲线
摘要:查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm完整代码:用html5的canvas画布绘制贝塞尔曲线-柯乐义原文文本:http://www.cnblogs.com/jihua/p/bseqx.html原文:http://keleyi.com/a/bjac/j77m9131.htm
阅读全文