CSS3

如何利用现有的Animate.css动画库实现多屏动画

一、先介绍一下多屏动画的一般实现方法: 首先,使用active触发每一屏的动画,几乎已经约定俗成,应该也建议成为默认的行业规范。 一般做法是,当对应一屏内容进入的时候,使用JS给容器添加类名active: 如果你做的动画逼格较高,希望每次浏览这一屏内容的时候,动画都走一遍,可以使用reflow重新触发一下animation: 如何具体控制动画的播放呢?我们通常第一反应是使用下面的方法实现,动画的完整CSS代码在active状态下呈现,如: 二、在来说说我们以有的css3动画库: Animate.css动画的执行是定义两个class类名, 1、动画名字例如:fadeIn对应css代码 2、动画执…阅读全文

css3的calc()

浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+ calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示: .haorooms { width: calc(expression); } 这样padding和margin和百分比一起用,问题就可以解决了。 例如,我们margin是20px。那么我们就可以写成 .haorooms{ width: calc(100% – 20px); //注:减号前后要有空格,否则很可能不生效!! } 也可以这么用: .box { background: #f60; height: 50px…阅读全文

移动端日期控件 mobiscroll

Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式,经过测试可以完美使用在iOS4,Android 2.2, Android 2.3的浏览器,Safari浏览器,火狐,IE9等浏览器上面。 当然在pc的浏览器上跑,效果也还不错。建议使用支持css3的浏览器访问^_^ 官网地址:http://www.mobiscroll.com/ 演示地址:dem…阅读全文

CSS3 Filter的十种特效

最近无意间在网上看见一段带渐变背景色的文字,渐变是利用css3写的,更神奇的是渐变还会动,着实让我感觉大吃一惊,css3好强大啊!于是查看他的源代码发现一个陌生的属性filter: hue-rotate(-360deg),接着百度一下,才知道这是css3滤镜,发现网上已经很多这类文章,按照网上说的一一实验,先让大家看看我的实验成果吧: 怎么样?很棒吧!细一看,这些效果就像是photoshop整出来的一样,有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么?我…阅读全文

那些过目不忘的H5页面

从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题 页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平 台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨。 功能与目标 首先从功能与设计目标来看, H5专题页主要有以下4大类型: 1.活动运营型 为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测 试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更…阅读全文

经验分享:多屏复杂动画CSS技巧三则

当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动: 感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强 (增加了相当于活动页面UV 5.7%的点击)。而目前大多数类似页面只针对移动端,例如其他同事实现的QQ空间5.0预约页第二版: 扫码(需登录)或者链接二选一: 访问demo戳这里 因此,需要多一点适配的技巧。但是,对于动画效果实现,其实都是一脉相承的,最终的实现需要很…阅读全文

移动web开发注意事项

1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” /> <meta content=”yes” name=”apple-mobile-web-app-capable” /> <meta content=”black” name=”apple-mobile-web-app-status-b…阅读全文

Luck弹层组件

Luck 使用原生js实现不依赖任何js类库,压缩后的js代码不到2kb,是一个高度可定制的、免费并且开源的移动端弹层组件,任何企业或个人都可以免费使用。 关于Luck 我有一只小狗,名字叫luck,感觉这个luck好记又好听所以命名为 luck弹层组件,组件使用了css3的动画,就像luck一样活泼可爱,如果您觉得好用的话就点击右侧的分享按钮分享到您的朋友圈吧!让更多的人知道luck Luck接口 参数名 是否必须 类型 描述 基础调用方法: luck.open({content:”内容”})关闭调用方法: luck.close() title 否 Array 可传入…阅读全文

js插件、前端教程、前端框架网站推荐

网址 前端技术教程、手册 前端技术教程、手册 jQuery之家 jQuery插件库 Bootstrap前端框架 求字体 Js插件 手机屏幕水平滑动框架flipsnap.js slidesjs 兼容移动端的图片滚动效果 图片放大镜效果 swipejs移动端幻灯,支持手势滑动 jquery动画扩展库 my97日期控件 Layer弹层组件 ajax分页插件 kindeditor编辑器 hcharts图表 echarts图表 chart图表 鼠标滚轮事件 拖动插件 代码高亮 移动端日期控件 瀑布流布局插件 超牛逼的图片弹层幻灯 字体图标 字体图标【Font Awesome】 字体图标【bootstra…阅读全文

html5 css3 特效

HTML5 Canvas – 涂鸦画板 JS+CSS3动画 – 绚丽值日表 JS+CSS3 – 立方体特效 CSS3动画 – 水波纹特效 HTML5 Canvas – 七巧板 CSS3动画-立方体翻转 HTML5桌面提醒

浅析 CSS3 pointer-events

pointer-events属性值详解 auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。 none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。 浏览器兼容性 Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持