1、案例1
效果:
鼠标未放上去 鼠标放上去
代码:
<!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>
*{
margin: 0%;
padding: 0%;
}
div{
width: 500px;
height: 280px;
border: 5px solid black;
margin: 0 auto;
position: relative;
overflow: hidden;
}
div img{
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.5s;
}
div:hover img{
transform: translate(30px);
opacity: 0.8;
}
div h2{
position: absolute;
left: 30px;
top: 30px;
color: white;
transition: all 1s;
}
div:hover h2{
transform: translate(100px);
}
div .p1{
position: absolute;
left: 35px;
top: 100px;
color: white;
transform: translateX(-200px);
transition: all 0.3s;
background: skyblue;
}
div:hover .p1{
transform: translateX(0px);
}
div .p2{
position: absolute;
left: 35px;
top: 140px;
color: white;
transform: translateY(300px);
transition: all 0.3s;
background: skyblue;
}
div:hover .p2{
transform: translateY(0px);
}
div .p3{
position: absolute;
left: 35px;
top: 180px;
color: white;
background: skyblue;
transform: translateX(500px);
transition: all 0.3s;
}
div:hover .p3{
transform: translateX(0px);
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" alt="">
<h2>赵露思</h2>
<p class="p1">性别:女</p>
<p class="p2">国籍:中国</p>
<p class="p3">职业:演员</p>
</div>
</body>
</html>
2、案例2
效果:
鼠标未放上去 鼠标放上去
代码:
<!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>
*{
margin: 0%;
padding: 0%;
}
div{
width: 500px;
height: 300px;
border: 5px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img,h2,p{
color:white;
transition: all 0.5s;
}
div .img1{
width: 520px;
height: 320px;
}
div:hover .img1{
transform: translateY(-10px);
opacity: 0.8;
}
div h2{
position: absolute;
top: 40px;
left: 100px;
transform: translateY(-200px);
}
div:hover h2{
transform: translate(0px);
}
div p{
position: absolute;
bottom: 0px;
left: 100px;
opacity: 0;
display: block;
width: 300px;
}
div:hover p{
transform: translateY(-50px);
opacity: 1;
}
div .img2{
position: absolute;
width: 20pxpx;
height: 20px;
top: 20px;
right: 30px;
/* transform: rotate(30deg); */
}
div:hover .img2{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img class="img1" src="img/2.jpg" alt="">
<h2>你的名字</h2>
<p>《你的名字》是新海诚执导,神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影,于2016年8月26日在日本上映。中国内地于2016年12月2日上映。影片讲述了男女高中生在梦中相遇,并寻找彼此的故事。中国大陆于2017年8月26日全网首播。</p>
<img class="img2" src="img/3.jpg" alt="">
</div>
</body>
</html>
右上角图标一直旋转代码改进:利用关键帧动画实现
css部分代码:
div .img2{
position: absolute;
width: 20pxpx;
height: 20px;
top: 20px;
right: 30px;
/* transform: rotate(30deg); */
animation: run1 2s linear infinite;
}
@keyframes run1{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}