51dev.com IT技术开发者社区

51dev.com 技术开发者社区

css3

CSS3伪类与伪元素的区别及注意事项

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的:-) 根本不能看出有什么区别&...

原生JS+ CSS3创建loading加载动画;

原生JS+ CSS3创建loading加载动画;

效果图: js创建loadingshow=function(){//loadingdom元素varDiv=document.createElement("div");Div.setAttribute("class","ui-loading");varchidDiv=document.createElement...

javascript获取CSS3浏览器前缀

javascript获取CSS3浏览器前缀

varprefix=(function(){varstyles=window.getComputedStyle(document.documentElement,''),pre=(Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/)...

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

  一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字...

css3之transform属性实现div不定宽高垂直水平居中

css3之transform属性实现div不定宽高垂直水平居中

transform的作用transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)transform的兼容性transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。谷歌和Safari支持代替...

CSS3之word-wrap英文单词溢出强制换行

CSS3之word-wrap英文单词溢出强制换行

word-wrap:normal|break-word;所有主流浏览器都支持word-wrap属性。<divcolor:#800000;">"border:1px#f00solid;width:50px;word-wrap:break-word;">https://home.cnblogs.com/set/...

新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

   作为最流行的 JavaScript 开发框架,jQuery 在现在的Web开发项目中扮演着重要角色,它简化了HTML文档遍历,事件处理,动画以及Ajax交互,而 CSS3 作为CSS的下一个版本,增加了圆角、旋转、阴影等强大的特性,甚至还可以实现需要&n...

css3效果

css3效果

1、放大图片: /*galleryImagecss*/a.galleryImage{display:block;}.galleryImageimg{transition:all.4sease-out;-webkit-transition:all.4sease-out;}.galleryImage:hoveri...

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3MediaQueries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。一开始按照CSS3...

CSS3时钟式进度条

CSS3时钟式进度条

CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度。友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了;实际使用中不会出现这样的问题。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN""http...

使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8

使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8

说到HTML5,总是会让人不自觉的想到CSS3,貌似他们就应该是成双成对。OK!前几天和大家分享了《使用html5shiv让HTML5通吃IE6/7/8》,那今天,便再和大家分享一个能让HTML5的小老婆(CSS3选择器)也通吃IE6/7/8的方法。Selectivizr是一个JS文件,你只需要引入如JQuery、Mo...

Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

respond.min.js <scriptsrc="js/respond.min.js"></script>respond.min.js代码:/*!matchMedia()polyfill-TestaCSSmediatype/queryinJS.Authors&copyrig...

css3动画4

css3动画4

效果: 代码: <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=ut...

css3动画3

css3动画3

效果:  代码:<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=ut...

css3 图片 悬停效果

css3 图片 悬停效果

纯css实现 <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/&...