一、学习重点
二、学习内容
例题一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 565px;
overflow: hidden;
/* float: left; */
display: inline-block;
transition: width 1s ease-in;
}
div:hover {
overflow: visible;
width: 1000px;
}
</style>
</head>
<body>
<div>
<img src="../img/libai.jpeg" alt="">
</div>
<div>
<img src="img/libai.jpeg" alt="">
</div>
<div>
<img src="img/libai.jpeg" alt="">
</div>
<div>
<img src="img/libai.jpeg" alt="">
</div>
</body>
</html>
例题二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
例题三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__bounce animate__faster">An
animated element</h1>
</body>
</html>