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

51dev.com 技术开发者社区

css3 box-sizing属性

css3 box-sizing属性

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入wi...

纯css3实现 transtion过渡效果

纯css3实现 transtion过渡效果

css3鼠标:hover效果会平滑过渡,但鼠标离开,效果消失的太生硬,能不能和:hover一样平滑过渡?<ahref=""><imgsrc="image/portfolio-03.jpg"<bclass="block"></b></a>最终实现效果:鼠标划入img上...

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节。一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问...

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。效果如下图所示:1、当未鼠标未放到图片上的效果:&n...

CSS3 transition-duration 属性

CSS3 transition-duration 属性

让过渡效果持续5秒:div{transition-duration:5s;-moz-transition-duration:5s;/*Firefox4*/-webkit-transition-duration:5s;/*Safari和Chrome*/-o-transition-duration:5s;/*Opera*/...

鼠标移到图片上图片放大【css3实例】

鼠标移到图片上图片放大【css3实例】

在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。在介绍实现代码之前,我们先来看看效果演示吧。...

css3鼠标移动图片上移效果

css3鼠标移动图片上移效果

css3的功能真是很强大,学无止境,不多说,直接上代码<style>*{margin:0;padding:0;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:po...

小程序wxss和css3的区别

小程序wxss和css3的区别

0.wxss不能直接通过css3中的background-image属性来设置显示的背景图片。例如我在wxss中书写如下background-image:url(imageB.png);控制台打印:pages/index/index.wxss中的本地资源图片无法通过WXSS获取,可以使用网络图片,或者base64,或者...

微信小程序之css3 display

微信小程序之css3 display

一displaydiaplay改变标签的模式,行内装块级(block),块级转行内(inline)   通过设置display为none,可以让整个标签在页内移除掉设置visibility为hidden也可以让控件不显示,但是回占用位置   设置display...

css3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前...

CSS3自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分...

CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child

CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child

Table表格奇偶数行定义样式:CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer...

css3 线性渐变和径向渐变

css3 线性渐变和径向渐变

线性渐变:ie6以下不兼容径向渐变:只支持firefox、Chrome和Safari<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html"charset="utf-8"/>&l...

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽然如此,但有前...

html5+css3 微信开发-学习实例

html5+css3 微信开发-学习实例

例子1.控制数据只显示两行并且最后使用省略号   样式如下:.ControlDataRows{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient...