分类目录归档:HTML

HTML/CSS文章资源

控制CSS3 动画播放、暂停、重放

CSS3动画代码相对简单,在性能上会比JavaScript动画稍微好一些,浏览器会对CSS3动画做一些优化(比如专门新建一个图层用来跑动画)。但CSS3动画对动画控制上不够灵活的缺点也很明显。如何像控制视频播放一样控制CSS3动画播放、暂停、重放呢?下面实例是我本人的一个尝试。 继续阅读控制CSS3 动画播放、暂停、重放

使用纯css制作步骤进度条

步骤进度条的使用场景很多,比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵,该做法的优点是兼容性强,但缺点也很明显:难以自适应设备,而且会加载额外的 图片资源。有没有更好一点的办法呢?下面实例将使用纯CSS来制作面试步骤进度条。 继续阅读使用纯css制作步骤进度条

学习Media Query

最近做一个手机Web应用需要在各种平台的手机的不同分辨率下加载相应的图片。因为对图片要求较高,缩放会让图片变形模糊。最初想到的是用Javascript来获取手机屏幕大小,然后动态加载相应的CSS文件。这种办法是可行的,但不是最好的。最佳方案是使用今天将谈到的Media Query。 继续阅读学习Media Query

用CSS3移除点击交互元素的高亮背景

我在移动设备上测试前面教程的图表实例时发现,当手指点击图表出现ToolTip时,图表容器的会出现一个半透明的高亮背景。设备浏览器不一样,颜色也不一样,很是影响交互效果。试了一下用Javascript来移除,花了一天时间也没弄出来,最后不得不Google了,又花了几个小时,终于用CSS3搞定了。

代码如下:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新增了禁止选择文本的功能。其中,前二句对WebKit内核浏览器(Safari、Chrome、iPhone、iPad、Android等)有效,后二句对Gecko内核的浏览器(Firefox等)有效。

看来真该花些时间学学CSS3了。