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

51dev.com 技术开发者社区

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解

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

CSS 隐藏滚动条 但可以滚动

CSS 隐藏滚动条 但可以滚动

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

实现页面公告栏循环向上轮播

实现页面公告栏循环向上轮播

解决方案1、HTML先建一个div层作为公告显示区,里面包裹一个公告列表(ul);<divclass="notice"><ul><li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li><li>第2条公告第2条公告第2条公告第2条公告第2条...

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

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

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

使用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、当未鼠标未放到图片上的效果:&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...

CSS伪类伪元素详解

CSS伪类伪元素详解

CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解,毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象,稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。先介绍一下伪类和伪元素有什么区别?其实这是个纯概念上的问题,就算不...

六种实现元素水平居中

六种实现元素水平居中

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案,而在《CSS制作图片水平垂直居中》一文介绍了四...

CSS如何清除浮动流的多种方案

CSS如何清除浮动流的多种方案

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><style>.wrapper{border:20p...

css实现两边有缺口的卡券效果

css实现两边有缺口的卡券效果

自己项目用到优惠券的样式,特拿来分享。主要用到了css的position:absolute属性。 效果如下图:  <!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><t...

小程序wxss和css3的区别

小程序wxss和css3的区别

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