网页设计图片向上浮动_CSS实现图片向上浮动

CSS实现图片向上浮动办法

今天在写CSS时需要实现：当鼠标悬停在由图片和介绍组成的超链接时，榴莲向上浮动的效果。

我在实现这个效果时思路分为以下几步：

鼠标悬停

图片移动

下方元素绝对定位

增加过渡时间

1.鼠标悬停-增加伪类选择器：hover

当鼠标悬停时改变元素样式，首先想到的是使用伪类选择器:hover。在写这里的时候遇到的问题是，悬停在超链接上仅使图片部分移动，而文字介绍部分不移动。因此在写伪类的时候不能写成#id a:hover，而应在其后再加上图片部分div的类选择器，即#id a:hover .class {}。这样便能实现超链接悬停而仅移动图片。

2.图片移动-改变元素的margin/padding

要使得图片移动，就是改变图片的位置，使得悬停时图片位置上移，那么我们可以改变元素的margin或者padding属性，以达到移动目的

3.下方元素绝对定位

由于流的影响，图片位置的移动会影响下面文字介绍和价格的位置，即整体均向上移动。为了使其留在原位，其位置应该改为绝对定位，不再赘述。

4.增加过渡时间-transition

为使过度不太生硬，需要增加transition属性。但需要注意的是，不提议在:hover中增加transition属性，因为当鼠标移开时，transition属性便消失，这样鼠标移开时便显得过于生硬。只要在需要移动的元素，例如上面的.class中直接添加transition属性即可。

网页设计图片向上浮动_CSS实现图片向上浮动相关推荐

经典网页设计：18个示例展示图片在网页中的使用
我们可以说,最近图像占据了网页设计的中心舞台.因此,我们已经看到了一些真正美丽的网站使用了圆滑图像作为焦点,引人注目.在网页设计中,从简约设计的概念到全屏的背景图片,有几种不同的图像使用方法.所以今天 ...
网页设计中如何成功地使用图片
俗话说,一图胜千言.无论这是真是假,图片都是网页中重要的组成部分.自从嵌入图片步骤变得简单,我们可以看到很多网站都内嵌了许多图片,其中一些网站从不同角度展示了正确利用图片的好处,然而,大部分网站则不是 ...
html文本与图片,网页设计与制作2-HTML文本与图片.ppt
网页设计与制作 2 HTML-文本与图片 3.1.1 HTML基础 HTML是一种网页编辑语言 HyperText Mark-up Language 是标示语言不是程序语言例如C,JAVA 现行版本 ...
css图片精灵定位_CSS精灵图片(CSS sprite)使用心得(转)
引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过C ...
css图片精灵定位_CSS精灵图片(CSS sprite)使用心得
有引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通 ...
html内容被背景图片遮住怎么办_css背景图片显示不完怎么解决？
css背景图片显示不完是什么原因?怎么解决?下面本篇文章就来给大家介绍一下css背景图片显示不完的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css设置背景图片显示不全 ...
网页设计技巧：如何做好图片与文字的配合？
网站设计中占据篇幅比较多的就是图片和文字,想要获得一个好的网站设计效果,就需要将图片和文字合理的搭配起来,让每个元素都各在其位.那么如何做好图片与文字的配合呢?一起和合肥学码思小编来看一下. 1.字体 ...
DW个人网页设计制作 html网页设计制作源码
Web前端三大核心技术 HTML:结构 HTML期末大学生网页设计作业,可以替换文字图片满足不同的 CSS:样式在操作方面上运用了html5和css3, 采用了div+css结构.表单.超链接.浮动 ...
关于我的家乡html网页设计完整版以家乡为主题的IV布局家乡介绍网页模板代码
Web前端三大核心技术 HTML:结构 HTML期末大学生网页设计作业,可以替换文字图片满足不同的 CSS:样式在操作方面上运用了html5和css3, 采用了div+css结构.表单.超链接.浮动 ...
关于我的家乡html网页设计完整版以家乡为主题的网页设计与实现
Web前端三大核心技术 HTML:结构 HTML期末大学生网页设计作业,可以替换文字图片满足不同的 CSS:样式在操作方面上运用了html5和css3, 采用了div+css结构.表单.超链接.浮动 ...

网页设计图片向上浮动_CSS实现图片向上浮动

网页设计图片向上浮动_CSS实现图片向上浮动相关推荐

最新文章

热门文章