一、效果实现
知识点:1.border- radius设置
border- radius设置圆角半径:第一个值是左上角和右下角的值 第二个是右上角和左下角的值
口诀:上左下右 上右下左
2.@keyframes 动画名字{
from { 状态;}
to {状态;}
}
3.box-shadow设置阴影
border- shadow设置阴影:第一个值越大越靠左越小越靠右 第二值越大就越靠下越小就越靠上 第三值用于设置模糊度越大越模糊(柔)越小就越生硬
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0%;
}
#div1 {
width: 200px;
height: 300px;
margin-left: 100px;
margin-top: 50px;
float: left;
border-radius: 20px 20px;
box-shadow: 15px 15px 8px #888;
animation: my_am 5s;
text-align: center;
background-image: url(img/We01.jpg);
background-size: contain;
}
@keyframes my_am {
from {
width: 200px;
height: 280px;
}
to {
width: 200px;
height: 420px;
}
}
</style>
<body>
<div id="div1"><img src="img/01.jpg" alt=""
style="display: block; width: 200px; height: 270px; border-radius: 20px 20px;">
</div>
<div id="div1"><img src="img/02.jpg" alt=""
style="display: block; width: 200px; height: 270px; border-radius: 20px 20px;"></div>
<div id="div1">
<img src="img/03.jpg" alt="" style="display: block; width: 200px; height: 270px; border-radius: 20px 20px;">
</div>
<div id="div1">
<img src="img/04.jpg" alt="" style="display: block; width: 200px; height: 270px; border-radius: 20px 20px;">
</div>
</body>
</html>