css代码完成鼠标悬停时,图片边框和大小的变化

html-css019

css代码完成鼠标悬停时,图片边框和大小的变化,第1张

变色:使css的动画animate可以实现。

放大:使用css的过渡效果translate就可以了实现

如果你要同时实现,那就都用animate,样式代码写在一起

<html>

<head>

<style type="text/css">

body{background:#000}

.div{

width:477px

height:648px

background:#FFF

padding:1px

margin:0px auto

}

.div:hover{

width:477px

height:648px

background:#f00

padding:1px

margin:0px auto

}

</style>

</head>

<body>

<div class="div"><img src="images/big2.jpg" /></div>

</body>

</html>

先将图片放在一个标签里 a和div标签都可以,让侯设置这个标签大小正好和图片大小一样,给标签加上一个padding:0px设置标签的背景颜色和串口颜色一样,假如是白色,然后写鼠标移动到图片上的样式,只需要将标签的背景色改成红色就可以了。

内联方式?内联是元素的呈现形式。

你是说把边框显示在图片里面吗?这样是实现不了的。

如果你是想指到图片上,图片位置不会因加了边框移动的话可以实现,先给border定义一个白色或背景色的边框,然后hover时改变border-color就可以。