摘要:本次实战主要完成鼠标移上图片放大效果,主要通过css3的属性完成。首先通过transition属性设置图片放大过程的秒数,再通过鼠标移上时,设置transform属性设置图片的放大倍数。代码如下:<!DOCTYPE html> <html> <head> <meta charset=&qu
本次实战主要完成鼠标移上图片放大效果,主要通过css3的属性完成。首先通过transition属性设置图片放大过程的秒数,再通过鼠标移上时,设置transform属性设置图片的放大倍数。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移上图片放大效果</title>
<style type="text/css">
.picture{width: 421px;margin: 150px auto;}
.picture img{
border-radius: 15px;
transition: all 1s;/*图片放大过程的秒数*/
}
.picture:hover img{
transform:scale(1.2); /*鼠标移上时图片放大1.2倍*/
}
</style>
</head>
<body style="background:#ccc;">
<div class="picture">
<img src="static/images/logo.png">
</div>
</body>
</html>logo.png:

批改老师:灭绝师太批改时间:2018-11-20 12:00:27
老师总结:美滋滋啊,作业速度非常快啊,还是那句话,一定要掌握