![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 92
山鸡的春天
IT成长之路
展开
-
CSS动画简介
现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。本文介绍CSS动画的两大组成部分:transition和animation。我不打算给出每一条属性的详尽介绍,那样可以写一本书。这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不起某一个用法的时候,能够快速地找到提示。我的主要参考资料是,2013年10月,Lea Ve转载 2017-06-20 10:42:45 · 302 阅读 · 0 评论 -
HTML5 CSS3 精美案例 : 实现VCD包装盒个性幻灯片
哈,首先感谢下w3cfuns的老师,嗯~好了,这次给发夹分享一个CSS3+JavaScript VCD包装盒个性幻灯片的一个案例。效果图:图片切换是不是很个性,效果也很不错,大家可以将其使用到自己的网站上。先看下html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org转载 2017-06-22 11:25:29 · 327 阅读 · 0 评论 -
HTML5 CSS3 专题 : 拖放 (Drag and Drop)
本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放。拖放(Drag 和 drop)是 html5 标准的组成部分。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。被拖元素,dragElement : 1、添加事件:ondragstart2、添加属性:dragable放置元素,dro转载 2017-06-22 14:44:34 · 428 阅读 · 0 评论 -
HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
上一篇已经实现了这个项目的整体的HTML和CSS:HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一)这篇博客直接在上篇的基础上完成,最终效果:效果图1:效果图2:好了,请允许我把图片贴了两遍,方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改:<span style="font-size:12px;"><body><di转载 2017-06-22 15:10:05 · 685 阅读 · 0 评论 -
HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一)
上传基本是项目中经常出现的,一般采用:1、form提交 2、flash3、HTML5form提交会刷新页面,很难做到异步上传;flash可能是用得比较多了,因为可以兼顾到几乎所有的浏览器,我之前一直会用jQuery的uploadify作为项目中的上传工具,uploadify也有基于html5好像是收费的,大家可以去官网看看;当然了,现在Html5提供了API以及File,FileReader,XML转载 2017-06-22 15:01:07 · 602 阅读 · 0 评论 -
HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能
一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图。效果图:看起来还是很不错,下面我给大家分析下,极其核心代码很简单:_canvas = document.createElement("canvas");_ctx = _canvas.getContext("2d");_转载 2017-06-22 15:19:27 · 444 阅读 · 0 评论 -
HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以尝试下,哈~效果图:实例用到的一些css3的新属性: a、-webkit-perspective: 800px; perspective (透视,视角):属性定义 3D转载 2017-06-22 15:23:04 · 796 阅读 · 0 评论 -
HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册
首先说明一下创意的出处:http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html(张鑫旭的博客 ),对前台感兴趣的可以没事去看看他的博客,很给力~这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tr转载 2017-06-22 15:29:51 · 1624 阅读 · 0 评论 -
HTML5 CSS3 专题 :诱人的实例 3D展示商品信息
强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~效果图:说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~首先,先教大家利用CSS3制作一个正方体:在木有CSS前,这样的立方体,应该很难制作吧~嗯,我觉转载 2017-06-22 15:33:45 · 628 阅读 · 0 评论 -
HTML5 CSS3专题 纯CSS打造相册效果
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。效果图:效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。先看html文件:<body><div id="gallery"> <h1>纯CSS3相册效果</h1> <ul> <li> <span转载 2017-06-22 11:18:52 · 855 阅读 · 0 评论 -
HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务,网页加载等;如果有使用HTML5为手机布局的,也可以用于手机中~效果图:1、html结构: <div id="loadBar01" class="loadBar"> <div>转载 2017-06-22 11:10:27 · 734 阅读 · 0 评论 -
CSS in JS 简介
1、以前,网页开发有一个原则,叫做“关注点分离”(separation of concerns)。它的意思是,各种技术只负责自己的领域,不要混合在一起,形成耦合。对于网页开发来说,主要是三种技术分离。 HTML 语言:负责网页的结构,又称语义层CSS 语言:负责网页的样式,又称视觉层JavaScript 语言:负责网页的逻辑和交互,又称逻辑层或交互层简单说,就是一句话,不要写”行内样式”(转载 2017-06-20 11:18:59 · 673 阅读 · 0 评论 -
CSS 变量教程
今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候,变量名前面要加两根连词线(--)。body { --foo: #7F583F; --bar: #F7EFD2;}上面代码中,body选择器里面声明了两个变量:--foo和--bar转载 2017-06-20 10:57:31 · 271 阅读 · 0 评论 -
CSS3圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角详解作者:Nicholas Zakas译者:阮一峰原文:http://msdn.microso转载 2017-06-20 11:00:49 · 285 阅读 · 0 评论 -
制作CSS气泡框
气泡状文本框,是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix,还用它显示碟片的详细信息。=========================制作CSS气泡框的传统方法,需要5张背景图片,分别是: * tl.gif,左上方的圆角。 * tr.gif,右上方的圆角。 * bl.gif,左下方的圆角。 * br.gi转载 2017-06-20 11:02:52 · 321 阅读 · 0 评论 -
CSS使用技巧
最近,我开始升级网志了。在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。未来,本文将持续更新。1. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度,然后将margin转载 2017-06-20 11:05:06 · 211 阅读 · 0 评论 -
CSS3常用功能的写法
随着浏览器的升级,CSS3已经可以投入实际应用了。但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法。以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正。一、圆角(Rounded Corner).box_round { -moz-border-rad转载 2017-06-20 11:07:06 · 264 阅读 · 0 评论 -
CSS选择器笔记
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。==================转载 2017-06-20 11:09:54 · 290 阅读 · 0 评论 -
CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%;上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种转载 2017-06-20 11:12:50 · 436 阅读 · 0 评论 -
CSS Modules 用法教程
学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言。从最早的Less、SASS,到后来的 PostCSS,再到最近的 CSS in JS,都是为了解决这个问题。本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言,而是功能很单纯,只加入了局部作用域和模块依赖,这恰恰是网页转载 2017-06-20 11:16:47 · 424 阅读 · 0 评论 -
HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐
今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的,有兴趣的可以改成Android版本的,或者其他的~效果图:贴一张我中500w的照片,咋办啊,怎么花呢~好了,下面开始原理:1、刮奖区域两个Canvas,一个是front , 一个back ,front遮盖住下面的canvas。2、canvas默认填充了一个矩形,将下面canvas效果图遮盖,然后监听mouse事件,根据mousemov转载 2017-06-22 17:02:38 · 460 阅读 · 0 评论