陕西的建设厅官方网站快速提升网站排名
30个HTML+CSS前端开发案例（17-20）
- 鼠标移入文字加载动画效果
- 代码实现
- 效果
- 鼠标悬停缩放效果
- 实现代码
- 效果
- 鼠标移入旋转动画
- 实现代码
- 效果
- loding加载动画
- 实现代码
- 效果
- 资源包
鼠标移入文字加载动画效果
代码实现
<!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>效果
效果动态图审核中。。。
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>效果
效果动态图审核中。。。
资源包
代码及其相关图片资源