首页 何问起 前端特效 htbtn-4 闪电 使用方法

随笔分类 -  CSS

摘要:我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了。 css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate 旋转:(rotate) 翻转:(scale 阅读全文
posted @ 2016-05-07 23:11 roucheng 阅读(1005) 评论(0) 推荐(0)
摘要:效果:http://hovertree.com/texiao/nav/1/代码如下: 转自:http://hovertree.com/h/bjaf/kxl2s00m.htm 特效:http://www.cnblogs.com/roucheng/p/texiao.html 阅读全文
posted @ 2016-05-07 22:45 roucheng 阅读(526) 评论(0) 推荐(0)
摘要:效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: 转自:http://hovertree.com/h/bjaf/jsdiaocha.htm 特效:http://www.cnblogs.com/roucheng/p/texiao.html 阅读全文
posted @ 2016-05-06 20:22 roucheng 阅读(3326) 评论(0) 推荐(1)
摘要:一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换 阅读全文
posted @ 2016-05-05 13:31 roucheng 阅读(740) 评论(1) 推荐(0)
摘要:效果:http://hovertree.com/texiao/jquery/64/ 效果图如下:代码如下: 转自:http://hovertree.com/h/bjaf/gundong.htm 特效:http://www.cnblogs.com/roucheng/p/texiao.html 阅读全文
posted @ 2016-05-05 00:58 roucheng 阅读(2784) 评论(0) 推荐(0)
摘要:返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定 阅读全文
posted @ 2016-05-04 00:06 roucheng 阅读(1169) 评论(0) 推荐(0)
摘要:效果:http://hovertree.com/texiao/css3/19/代码如下: 转自:http://hovertree.com/h/bjaf/xiaomimenu.htm 推荐:http://www.cnblogs.com/roucheng/p/cssdaohang.html 网页特效:h 阅读全文
posted @ 2016-05-03 22:50 roucheng 阅读(2234) 评论(0) 推荐(0)
摘要:体验效果:http://hovertree.com/texiao/jquery/62/效果图: 下载:http://hovertree.com/h/bjaf/1dvh9ym6.htm 特效库:http://www.cnblogs.com/roucheng/p/texiao.html 阅读全文
posted @ 2016-04-28 20:24 roucheng 阅读(2393) 评论(0) 推荐(1)
摘要:1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 注意:在同 阅读全文
posted @ 2016-04-28 09:52 roucheng 阅读(3036) 评论(0) 推荐(0)
摘要:查看效果:http://hovertree.com/texiao/mobile/10/或者手机扫描二维码查看效果: 效果图:代码如下: 转自:http://hovertree.com/h/bjaf/loucldil.htm 推荐:http://hovertree.com/hvtart/bjae/jf 阅读全文
posted @ 2016-04-27 17:10 roucheng 阅读(927) 评论(0) 推荐(0)
摘要:HTML转义符号 HTML转义符号 HTML常用符号:显示一个空格 &nbsp; &#160;< 小于 &lt; &#60;> 大于 &gt; &#62;& &符号 &amp; &#38;" 双引号 &quot; &#34;其他常用的字符实体(Character Entities)显示结果 说明 E 阅读全文
posted @ 2016-04-26 22:18 roucheng 阅读(555) 评论(0) 推荐(0)
摘要:效果体验:http://hovertree.com/texiao/css/23/效果图:代码如下: 转自:http://hovertree.com/h/bjaf/1kquypy7.htm 推荐:http://hovertree.com/h/bjaf/qufo9d03.htm 更多特效:http:// 阅读全文
posted @ 2016-04-26 22:04 roucheng 阅读(5331) 评论(0) 推荐(1)
摘要:效果预览:http://hovertree.com/texiao/js/22/效果图:代码如下: 转自:http://hovertree.com/h/bjaf/meihua.htm 推荐:http://hovertree.com/h/bjaf/h9tb5itb.htm 更多特效:http://www 阅读全文
posted @ 2016-04-23 18:47 roucheng 阅读(1081) 评论(0) 推荐(0)
摘要:效果查看:http://hovertree.com/texiao/html5/30/ 使用HTML5的canvas画的孙悟空,CSS3画的白云飘飘。 刚擒住了几个妖 又降住了几个魔 魑魅魍魉怎么他就这么多 (嘿嘿!吃俺老孙一棒!) 效果图:代码如下: 转自:http://hovertree.com/ 阅读全文
posted @ 2016-04-22 17:12 roucheng 阅读(1084) 评论(2) 推荐(0)
摘要:译注:本文翻译自谷歌工程师 Philip Walton 的一篇博客。看过之后非常有感触,很多观点都是自己长期非常坚持和认同的,所以翻译出来分享给更多的前端同学!最近我收到一封读者来信让我陷入了思考,信是这么写的:Hi Philip,您是否介意我问,您是如何成为一名卓越 (great) 的前端工程师的 阅读全文
posted @ 2016-04-18 15:51 roucheng 阅读(830) 评论(0) 推荐(2)
摘要:效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现。试试效果吧。 效果图:代码如下: 转自:http://hovertree.com/h/bjaf/8c5uhche.htm 更多 阅读全文
posted @ 2016-04-18 15:27 roucheng 阅读(2935) 评论(0) 推荐(1)
摘要:效果体验:http://hovertree.com/texiao/css3/8/效果图: 点击这里下载:http://hovertree.com/h/bjaf/8d5vmddq.htm 更多特效:http://www.cnblogs.com/roucheng/p/texiao.html 阅读全文
posted @ 2016-04-17 14:55 roucheng 阅读(591) 评论(0) 推荐(1)
摘要:上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/效果图:代码如下: 转自:http://hovertree.com/h/bjaf/hovertreetrain.htm 推荐:http://hovertree.com/h/bjaf/kqud99m 阅读全文
posted @ 2016-04-16 17:04 roucheng 阅读(1848) 评论(2) 推荐(0)
摘要:效果查看:http://hovertree.com/texiao/css3/6/ CSS3画猪头: http://hovertree.com/texiao/css3/6/1/ 代码如下: 转自:http://hovertree.com/h/bjaf/0pt35qks.htm 推荐:http://ho 阅读全文
posted @ 2016-04-15 12:19 roucheng 阅读(1181) 评论(0) 推荐(0)
摘要:效果预览:http://hovertree.com/texiao/css/22/代码如下: 源码下载:http://hovertree.com/h/bjaf/l243x19a.htm 转自:http://hovertree.com/h/bjaf/2hhi6cjy.htm 更多特效:http://ww 阅读全文
posted @ 2016-04-13 12:30 roucheng 阅读(4268) 评论(2) 推荐(0)