文章分类 - Html5+CSS3
摘要:Less (一种动态样式语言)。LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS。 LESS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript。受益于JavaScript,...
阅读全文
摘要:在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字 体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现 了,今天我们就介绍...
阅读全文
摘要:*************************************************************第一种方法:(可以计算加载图片的数量)css样式:/*图片预加载*/.ImgLoading{ position:absolute; width:100%; height:100%...
阅读全文
摘要:#four{transition:all 2s cubic-bezier(0.2,-1,0.8,1);} //cubic-bezier(0.2,-1,0.8,1);#four:hover{ width:500px;}
阅读全文
摘要:一、利用CSS和opacity属性 二、 火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。 所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。
阅读全文
摘要:概要标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息可选属...
阅读全文
摘要:和WOW.js一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖animate.css,而 scroll...
阅读全文
摘要:http://www.dowebok.com/131.html有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。
阅读全文
摘要:限制input输入类型在日常工作中很常见,各种各样,不过也大同小异,本文整理了一些,感兴趣的朋友可以参考下哈,希望可以帮助到你1.只能输入和粘贴汉字3.只能输入和粘贴数字5.数字脚本6.只能输入数字和英文8.简易禁止输入汉字输入法不转换,但可粘贴上9.输入数字和小数点10.只能数字和"-",例如在输...
阅读全文
摘要:ScrollMagic ScrollMagic 是一款jQuery插件,它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插件正是你需要的。在线演示 立即下载https://github.com/ja...
阅读全文
摘要:http://www.cnblogs.com/lhb25/p/page-scrolling-effects-plugins.html这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件。它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换...
阅读全文
摘要:http://www.cnblogs.com/hnyei/archive/2011/09/23/2186523.htmlCSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。向大家推荐这50个 CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的C...
阅读全文
摘要:http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html
阅读全文
摘要:.redius{ border-left:10em solid red; border-top:10em solid; -webkit-border-top-left-radius:10em; -webkit-border-top-right-radius:0px; ...
阅读全文
摘要:http://leaverou.github.io/animatable/http://www.cnblogs.com/shimily/articles/4063226.htmlhttp://daneden.github.io/animate.css/https://github.com/daned...
阅读全文
摘要:推荐10个很棒的CSS3开发工具分享50个 CSS3 最佳应用示例24款非常实用的CSS3工具终极收藏推荐12个漂亮的CSS3按钮实现方案使用CSS3可以实现的五种很酷很炫的效果 对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者...
阅读全文
摘要:例如: 样式会在可视区域的宽度小于 600px 的时候被应用http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html看下这个在线演示,调整你的浏览器窗口尺寸,看看它的变化。Max Width下面的样式会在可视区域的...
阅读全文
摘要:.gallery:hover li:not(:hover){ -webkit-filter: blur(2px) grayscale(0); -moz-filter: blur(2px) grayscale(0); -o-filter:...
阅读全文
摘要:利用html5实现类似微信的手机摇一摇功能,并播放音乐。1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。不多说...
阅读全文
摘要:http://www.cnblogs.com/hhstuhacker/p/css-centered-solution.html问题场景应用的地方比较普遍,这里有两个赤裸裸的栗子:也有很多流行的方案,这里只针对各种方案的适用场景来做一些分析问题抽象其实,垂直居中问题可以简化成这样:一个容器HTML元素...
阅读全文