30个HTML+CSS前端开发案例（17-20）
鼠标移入文字加载动画效果
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入文字加载动画</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix::after{
content: '';
display: block;
clear: both;
}
.box {
width: 1200px;
/* height: 370px; */
/* background-color: red; */
margin: 50px auto;
}
.box .item{
width: 280px;
height: 370px;
/* border: 1px solid blue; */
/* background-color: blue; */
float: left;
margin: 0 10px;
position: relative;
overflow: hidden;
}
/* 遮罩层 */
.item-mask{
width: 280px;
height: 370px;
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color ease 2s;/* 动画过渡效果 */
}
.item:hover .item-mask{
background-color: rgba(0, 0, 0, 0.5);
}
.item .item-title{
/* border: 1px solid aqua; */
position: absolute;
top:-50px;
left: 20px;
color: white;
transition: top ease .5s;
}
.item:hover .item-title{
top: 250px;
}
.item .item-singer{
/* border: 1px solid blue; */
position: absolute;
top: 290px;
left: 0px;
color: #fff;
font-size: 14px;
transform: translateX(-100%);/* 刚好向左移动自身的宽度 */
transition: all ease .5s;
}
.item:hover .item-singer{
transform: translateX(25px);/* 右移25px */
}
.item .item-info{
/* border: 1px solid aqua; */
position: absolute;
/* top: 320px; */
left: 20px;
right: 20px;
font-size: 14px;
color:white;
top: 370px;
transition: top ease .5s;
}
.item:hover .item-info{
top: 320px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="item">
<img src="images/hover1.jpg" alt="" width="280">
<div class="item-mask"></div>
<div class="item-title">《听闻远方的你》</div>
<div class="item-singer">演唱：刘艺雯</div>
<div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div>
</div>
<div class="item">
<img src="images/hover2.jpg" alt="" width="280">
<div class="item-mask"></div>
<div class="item-title">《听闻远方的你》</div>
<div class="item-singer">演唱：刘艺雯</div>
<div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div>
</div>
<div class="item">
<img src="images/hover3.jpg" alt="" width="280">
<div class="item-mask"></div>
<div class="item-title">《听闻远方的你》</div>
<div class="item-singer">演唱：刘艺雯</div>
<div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div>
</div>
<div class="item">
<img src="images/hover4.jpg" alt="" width="280">
<div class="item-mask"></div>
<div class="item-title">《听闻远方的你》</div>
<div class="item-singer">演唱：刘艺雯</div>
<div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div>
</div>
</div>
</body>
</html>
效果
49a3c672-3362-40d3-844f-e48a7405fbb1
鼠标悬停缩放效果
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停缩放效果</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.clearfix {
content: '';
display: block;
clear: both;
}
.flower {
width: 960px;
/* height: 300px; */
/* border: 2px solid red; */
margin: 100px auto 0;
}
.flower .item {
width: 300px;
height: 300px;
background-color: aqua;
float: left;
margin: 0 10px;
overflow: hidden;
position: relative;
}
.item img {
transition: transform ease .5s;
}
.item:hover img {
transform: scale(1.2);
}
.item .item-mask {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: all ease .5s;
/* 怪异盒模型处理遮罩层偏移问题 也可通过定位解决 */
box-sizing: border-box;
/* 水平 垂直 阴影羽化 阴影大小 阴影颜色 */
box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.5);
}
.item:hover .item-mask {
transform: scale(0.8);
background-color: rgba(0, 0, 0, 0.5);
border: 5px solid #fff;
}
.item .title {
/* border: 1px solid red; */
position: absolute;
top: 80px;
left: 40px;
right: 40px;
text-align: center;
font-size: 18px;
/* font-weight: 700; */
color: #fff;
transform: scale(1.2);
opacity: 0;
transition: all ease .5s;
}
.item:hover .title {
transform: scale(1);
opacity: 1;
}
.item .item-info {
/* border: 1px solid blue; */
position: absolute;
top: 110px;
left: 40px;
right: 40px;
color: #fff;
font-size: 14px;
transform: scale(1.2);
opacity: 0;
transition: all ease .5s;
}
.item:hover .item-info {
transform: scale(1);
opacity: 1;
}
</style>
</head>
<body>
<div class="flower clearfix">
<div class="item">
<img src="images/scale1.jpg" alt="" width="300">
<div class="item-mask"></div>
<div class="title">金凤蝶</div>
<div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。
有“能飞的花朵”、“昆虫美术家”的雅号。</div>
</div>
<div class="item">
<img src="images/scale2.jpg" alt="" width="300">
<div class="item-mask"></div>
<div class="title">金凤蝶</div>
<div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。
有“能飞的花朵”、“昆虫美术家”的雅号。</div>
</div>
<div class="item">
<img src="images/scale3.jpg" alt="" width="300">
<div class="item-mask"></div>
<div class="title">金凤蝶</div>
<div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。
有“能飞的花朵”、“昆虫美术家”的雅号。</div>
</div>
</div>
</body>
</html>
效果
c4821c15-1ff5-4102-8250-8cef9473870d
鼠标移入旋转动画
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入旋转动画</title>
<style type="text/css">
body,h3,p{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 300px;
background-color: red;
margin: 100px auto 0;
position: relative;/* 相对定位,参考物 */
overflow: hidden;
}
.box:hover img{
filter: blur(5px);
}
.box::after{
content: '';
width: 500px;
height: 0;
background-color: rgba(0, 0, 0, 0);
position: absolute;
left: 0;
top: 0;
transform-origin: left center;
transform: rotate(37deg);
transition: all ease .5s;
}
.box:hover::after{
height: 300px;
top: -150px;
background-color: rgba(0, 0, 0, 0.5);
}
.box .txt{
/* border: 2px solid red; */
position: absolute;
top: 80px;
left: 60px;
right: 100px;
z-index: 3;/* 改变层级,防止遮罩掩盖文字 */
transform: rotate(30deg);
transition: all ease .5s;
color: #fff;
opacity: 0;
}
.box .txt h3{
font-size: 20px;
font-weight: 400;
margin-bottom: 10px;
}
.box .txt p{
font-size: 14px;
line-height: 25px;
}
.box:hover .txt{
transform: rotate(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="images/rotate1.webp" alt="" width="400" height="300">
<!-- <div class="mask"></div> --><!-- 也可用mask实现特效 -->
<div class="txt">
<h3>风景如画</h3>
<p>风景如画是“风景”和“如画”的连用，意思是美丽的景色如画出来的一样，比喻景色像图画一样呈现在眼前</p>
</div>
</div>
</body>
</html>
效果
eaf4acec-dea0-4509-98cd-e6d382165951
loding加载动画
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loding加载动画</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.loading {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto 0;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
background-color: rgba(255,255,255,0.2);
position: absolute;
top: 0;
left: 50%;
margin-left: -10px;
transform-origin: 10px 100px;
border-radius: 50%;
/* 存在逻辑运算 */
/* 使用自定义属性来进行运算 */
transform: rotate(calc(var(--i)*40deg));
animation: loading 1s ease infinite;
animation-delay: calc(var(--i)*0.11s);
}
@keyframes loading {
/* 0-1s */
%0,%50{
background-color: rgba(255,255,255,0.2);
}
/* 时间50.5%-100% */
50.5%,100%{
background-color: #fff;
}
}
/* .loading .item:nth-child(1) {
animation-delay: 0s;
}
.loading .item:nth-child(2) {
animation-delay: 0.11s;
}
.loading .item:nth-child(3) {
animation-delay: 0.22s;
}
.loading .item:nth-child(4) {
animation-delay: 0.33s;
}
.loading .item:nth-child(5) {
animation-delay: 0.44s;
}
.loading .item:nth-child(6) {
animation-delay: 0.55s;
}
.loading .item:nth-child(7) {
animation-delay: 0.66s;
}
.loading .item:nth-child(8) {
animation-delay: 0.77s;
}
.loading .item:nth-child(9) {
animation-delay: 0.88s;
} */
</style>
</head>
<body>
<div class="loading">
<div class="item" style="--i:0"></div>
<div class="item" style="--i:1"></div>
<div class="item" style="--i:2"></div>
<div class="item" style="--i:3"></div>
<div class="item" style="--i:4"></div>
<div class="item" style="--i:5"></div>
<div class="item" style="--i:6"></div>
<div class="item" style="--i:7"></div>
<div class="item" style="--i:8"></div>
</div>
</body>
</html>
效果
501352eb-9183-4675-9ff9-41e740babe1f