css3如何向上_CSS3 实现div元素向上移动的效果

今天应一个用户的要求，要做一个html页面，而页面中的部份div元素，在鼠标移入时向上移动，鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的，不使用任合的JS代码。

css3 实现div向上移动的效果代码

html代码：html>

/*鼠标移入，向上移动8个像素*/

.div:hover {

transform:translateY(-8px);

}

.div {

width:100px;

height:80px;

line-height: 80px;

/*动画的过渡效果*/

transition: all .25s ease-in;

border:0;

margin:10px;

background-color: pink;

float: left;

font-size: 12px;

text-align: center;

}

/*鼠标移入，向上移动8个像素*/

.div:hover {

transform:translateY(-8px);

}

飞鸟慕鱼博客

feiniaomy.com

注释：

transform：该属性向元素应用 2D 或 3D 转换，对元素进行旋转、缩放、移动或倾斜的操作。

transition：属性设置元素当过渡效果。

CSS 实现元素向上移动的效果

PS：

1、当鼠标移到DIV元素上时，DIV元素会向上移动几个像素

2、当鼠标移出DIV元素时，DIV元素会移回原来的位置

3、DIV在移动的过程中，是由 css 中的 transition 属性，来控制速度与过度效果的

css3如何向上_CSS3 实现div元素向上移动的效果相关推荐

css3如何向上_CSS3文字向上轮播
今天闲着没事,看到隔壁老张在用jq写文字向上的轮播效果,遂想到用css3的动画也可以做到,然后就随手写了点,向上的过渡距离不是很精确,有需要的自行修改,欢迎提出意见. css部分 div{ width ...
css3探测光圈_CSS3按钮鼠标悬浮光圈效果
1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为We ...
html为荣围绕图片,CSS3实现图片围绕DIV元素的边框效果
本篇文章介绍CSS3实现用图片围绕DIV边框的效果,使用的时候注意浏览器兼容情况,希望对你有所帮助. 浏览器支持: Internet Explorer 11, Firefox, Opera 15, C ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
【CSS3 属性】CSS 3 transform:scale 与 transform:translate 作用在同一div元素，导致元素位置偏离
div 元素使用transform:translate(x,y)居中显示,并使用transform:scale(z)作为动画属性,导致transform:translate(x,y)失效效果如下图: ...
html图片与周围元素边界5px,css3如何将图像设置为元素周围的边框
css3将图像设置为元素周围的边框的方法:首先创建一个HTML示例文件:然后在body中创建一些p元素:最后通过css3中的border-image属性将图像设置为元素周围的边框即可. 本文操作环境: ...
HTML+CSS3（六）——行内元素和块级元素
目录: HTML+CSS3(一)--认识浏览器 HTML+CSS3(二)--HTML 初识 HTML+CSS3(三)--HTML基本标签 HTML+CSS3(四)--表单pattern正则属性 HTM ...
html怎么隐藏一个元素,html怎么隐藏div元素
html隐藏div元素的方法:1.在div标签中使用hidden属性,添加"hidden="hidden""语句即可.2.在div标签中使用style属性,添加 ...
html怎么把图片放入边框,css3如何将图像设置为元素周围的边框
在网页设计过程中,使用css3图像边框属性可以大大的提升网页整体美观效果,以及丰富页面内容.那么css3中的图像边框属性也就是border-image 属性. 推荐学习:<CSS3教程> ...

css3如何向上_CSS3 实现div元素向上移动的效果

css3如何向上_CSS3 实现div元素向上移动的效果相关推荐

最新文章

热门文章