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

51dev.com 技术开发者社区

woff2的mime类型

woff2的mime类型

woff2的Mimetype类型是application/font-woff2。...

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解

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

CSS 隐藏滚动条 但可以滚动

CSS 隐藏滚动条 但可以滚动

垂直滚动,用鼠标滚轮滚动 <!DOCTYPEhtml><htmllang="utf-8"><head><metacharset="utf-8"/><style>.parent{height:80px;width:100px;ove...

如何实现按钮水平居中

如何实现按钮水平居中

button是一个行内块级元素display:inline-block;所以处理方式很简单,可以用以下两种方式:方式一:<div><button>按钮居中</button></div>方式二:<div><button>按钮居中&...

css设置按钮水平居中

css设置按钮水平居中

<buttonclass=‘wx_7_button‘>复制兑换码</button>.wx_7_button{width:240rpx;height:70rpx;line-height:70rpx;color:white;display:block;margin:0auto;m...

Div左右居中属性

Div左右居中属性

#center{background:url(images/zy_01.gif)centertopno-repeat;height:470px;width:800px;margin:0auto;}/*居中*/margin:0auto;很重要!...

CSS实现内容超过长度后以省略号显示

CSS实现内容超过长度后以省略号显示

样式:{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}说明:white-space:nowrap保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。overflow:hidden隐藏超出单元格...

使用css制作倒影

使用css制作倒影

-webkit-mask这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间。-webkit-mask让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候...

在css中 父元素不固定高度,怎样实现子元素的高度100%

在css中 父元素不固定高度,怎样实现子元素的高度100%

父元素使用position:relative;子元素使用position:absolute;height:100%; ...

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

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

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

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...

鼠标移到图片上图片放大【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...

多个div排列在同一行而不换行

多个div排列在同一行而不换行

 有时候,我们可能会产生多个div标签横向排列而不换行的需求,具体有以下几种实现方法:例如:<html><head></head><body><divid="container"><divclass="lable">测试测试&l...

textarea标签中resize属性的设置

textarea标签中resize属性的设置

CSS3中新增了resize缩放属性,这个属性可以应用到任意元素。 目前只有Webkit内核的浏览器才支持这个css3属性,即Googlechrome和Applesafari都支持。 而textarea标签中,Webkit内核的浏览器会默认resize的值为both,即用户可以调...