css3
kongjiea
通吃前后端如何?
展开
-
图标字体定义的三步骤
1、下载字体2、申明字体3、引用字体1、 下载地址: Icomoon.io Iconfont.cn 阿里巴巴字体库原创 2014-08-18 15:21:42 · 1379 阅读 · 0 评论 -
less的基础入门学习笔记,less基础教程
编译工具koala:http://koala-app.com/index-zh.html1、注释@charset utf-8;/*====注释=====*///不被编译的注释/*会被编译的注释*/2、变量/*====变量=====*/在编译时候变量不会显示出来,引用时才会显示,变量也有局部变量和全局变量,在规格内定义的变量原创 2016-09-07 10:45:35 · 2082 阅读 · 0 评论 -
css3制作优惠券
.demo{width:410px;}.stamp *{padding: 0;margin: 0;list-style:none;font-family:"Microsoft YaHei",'Source Code Pro', Menlo, Consolas, Monaco, monospace;}.stamp {width: 387px;height: 140px;padding:转载 2015-12-28 15:18:47 · 2878 阅读 · 0 评论 -
css去掉a标签点击时候的虚线框
body a{outline:none;blr:expression(this.onFocus=this.blur());}原创 2014-09-17 15:20:08 · 1372 阅读 · 0 评论 -
ios8.3 iphone6-plus box-shadow 不兼容
ios8.3 iphone6-plus box-shadow 不兼容,要加一个border-radius原创 2015-09-08 17:22:54 · 3436 阅读 · 0 评论 -
移除HTML5 input在type="number"时的上下小箭头
在chrome下:input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }Firefox下:input[type="number"]{-moz-appearance:tex原创 2015-07-21 17:56:55 · 27842 阅读 · 3 评论 -
css3交替翻板式旋转2张图片
css3交替翻板式旋转2张图片 *{margin:0;padding:0;} #box{width:200px;height:200px;border:1px solid #999;} #cont1{width:200px;height:200px;background:url(images/a.jpg);position:absolute原创 2015-05-21 14:06:21 · 4071 阅读 · 0 评论 -
css3制作翘边阴影
阴影一要点:1、用一个圆角的层,设置阴影,z-index层级低于父级即可;但是其相对定位的属性需要另外设置在另一个class上如下图设置在effect上而不设置在wrap上2、圆角的层可用after和before来实现,如果after和before2个伪类都设置阴影并重叠起来 ,阴影效果更好。翘边阴影要点:1、同上用after和before伪类,设置class属性trans原创 2015-02-09 11:45:18 · 5974 阅读 · 0 评论 -
各大浏览器 CSS3 和 HTML5 兼容速查表
需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。CSS3 属性 可以看出,全盘支持 CSS3 属性转载 2014-12-24 10:18:55 · 859 阅读 · 0 评论 -
各大浏览器 CSS3 和 HTML5 兼容速查表
需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。CSS3 属性 可以看出,全盘支持 CSS3 属性转载 2014-12-24 10:21:20 · 1083 阅读 · 0 评论 -
css3初始化属性,WebKit的CSS扩展(WebKit是私有属性)
1、-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。2、-webkit-line-clamp 是原创 2014-12-23 09:32:30 · 2482 阅读 · 0 评论 -
css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 第一种方法: 用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。 setTimeout(function(){ },time); 第二种方法: 当-webkit-animation动画结束时有一个webkitAni原创 2014-08-16 17:04:11 · 84087 阅读 · 4 评论 -
css3实践—创建3D立方体
要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方,这里把我学习的方法,过程分享给大家。再讲知识点之前,还是先弄清楚3D的坐标系吧,从网上搜了一张经典坐标系图,供大家回顾一下。1、3D试图 transform-style:flat(默认,二维效果)转载 2014-09-19 16:48:51 · 1054 阅读 · 0 评论 -
css3制作色子
网友Adam‘分享用Aui-core+CSS3实用3D骰子JS特效* { margin:0; padding:0; }body { background:#efefef; overflow:hidden; }h1 { text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40原创 2014-09-19 16:50:16 · 3853 阅读 · 0 评论 -
9款非常实用的CSS3和Javascript 3D效果演示
DemoStudio网站汇集了许多非常新颖且实用的CSS3和JavaScript效果演示示例,这让我联想起Chrome体验版的效果演示,本文是Firefox版。还记得CSDN研发频道曾发表过的一篇《Google新玩法:输入公式即可呈现3D动画展示》吗?震撼你的眼球了吗?开发者们的想法总是层出不穷,你跟上技术潮流了吗?一起来体验下这9款不同凡响的3D版本吧,或许能为你的开发带来些许灵感。原创 2014-09-04 12:15:30 · 1595 阅读 · 0 评论 -
css制作实心、空心arrow箭头
使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码效果图:代码: lang="en"> charset="UTF-8"> Document type="text/css"> /*实心箭头*/ .sx-arrow-down{ border-style:s原创 2016-09-06 22:10:58 · 11133 阅读 · 0 评论