html背景向四周散开,实现背景框从中间向四周扩散的效果

原标题：实现背景框从中间向四周扩散的效果

实现背景框从中间向四周扩散的效果,运用原理主要运用到css的伪类和css3动画，可用在一些网站中展示栏的背景特效！效果：

背景框会由中间由小缓慢变大！

代码：

html：

css：

div{position:relative;background:black;width:400px;height:400px;}

div:before{opacity: 0;width:0;height:0;transition: all linear 1s;position:absolute;left:50%;top:50%;content: "";z-index: 999;border:2px solid white;}

div:hover:before{opacity: 1;width:90%;height:90%;left:5%;top:5%;}

运用到:before 伪类，css3的transition属性返回搜狐，查看更多

责任编辑：

html背景向四周散开,实现背景框从中间向四周扩散的效果相关推荐

html背景向四周散开,纯css3圆形从中心向四周扩散动画
查看效果: http://hovertree.com/texiao/css3/37/ 以下为讲解和代码. 可以通过 @keyframes 规则,创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变 ...
html中如何淡化背景图片,excel怎么去除背景图片
在excel本身存在背景图片的是后,却发现与excel不相匹配,这时,该怎么去除背景图片呢,下面让学习啦小编为你带来excel怎么去除背景图片设置的方法. excel去除背景图片设置步骤: ①选择工作 ...
java添加背景图片_Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
Android Studio (11)---使用主题背景编辑器设计应用主题背景
使用主题背景编辑器设计应用主题背景 Android Studio 包含被称为主题背景编辑器的视觉辅助工具,以帮助您: 创建和修改应用的主题背景. 调整不同资源分类器的主题背景. 可视化更改公共 UI ...
CSS背景图片，文字设置背景
关于CSS里的背景图片 CSS背景叠加背景图片: 背景图片尺寸: 文字设置背景: CSS背景叠加背景图片: background-image 可以为一个元素添加多个背景,第一幅图片最靠近观看者 # ...
html 页面宽度和背景颜色,CSS：设置背景颜色为窗口宽度的50％
旧版浏览器支持如果旧的浏览器支持是必须的,所以你不能去使用多个背景或渐变,你可能要在备用的div元素上做这样的事情: #background { position: fixed; top: 0; l ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
html背景颜色白色半透明,HTML – 背景颜色：透明意味着什么？
顾名思义,背景颜色:透明意味着您可以透过元素的背景看到,即它的背景颜色看起来与其父元素上看到的背景颜色相同. 请注意,这与background-color:white不同,因为如果父元素的背景颜色不是 ...
css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

html背景向四周散开,实现背景框从中间向四周扩散的效果

html背景向四周散开,实现背景框从中间向四周扩散的效果相关推荐

最新文章

热门文章