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

51dev.com 技术开发者社区

采用CSS定位属性实现Html中DIV层叠与悬浮

采用CSS定位属性实现Html中DIV层叠与悬浮

一般来说,DIV没有悬浮一说,更准确的应为层叠或者固定。最简单的方法是采用CSS定位属性。1、DIV层叠,即一个层叠加在另外一个层上利用相对定位和绝对定位来实现:在父对象上设置:position:relative;在子对象上设置:position:absolute;top:10px;left:10px;这样如果父对象里...

纯css3实现 transtion过渡效果

纯css3实现 transtion过渡效果

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

CSS实现背景渐变图片transtion过渡效果

CSS实现背景渐变图片transtion过渡效果

一、background-image不支持CSS3transitionbackground-image不支持CSS3transition,而CSS3gradient渐变作为背景图片存在的时候,下面的CSS设置是不会有过渡效果的。.gradient{background-image:linear-gradient(tor...

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制作图片水平垂直居中》一文介绍了四...