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>

效果

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

资源包

代码及其相关图片资源，持续更新中。。。

30个HTML+CSS前端开发案例（四）相关推荐

  1. 30个HTML+CSS前端开发案例（五）

    30个HTML+CSS前端开发案例(21-25) 本人说明 全屏加载动画效果 代码实现 效果 吃豆豆动画效果 代码实现 效果 鼠标悬停3D翻转效果 代码实现 效果 3D旋转木马效果 代码实现 效果 f ...

  2. 30个HTML+CSS前端开发案例（二）

    30个HTML+CSS前端开发案例(6-10) 常用的选项卡菜单效果 网页框架布局 酷狗音乐热榜 小米商城首页产品栏 酷狗精选歌单效果 常用的选项卡菜单效果 <!DOCTYPE html> ...

  3. 30个HTML+CSS前端开发案例（完结篇）

    30个HTML+CSS前端开发案例(完结篇) flex弹性布局-今日头条首页热门视频栏 代码实现 效果 flex弹性布局-微博热搜榜单 代码实现 效果 grid网格布局-360图片展示 代码实现 效果 ...

  4. 30个HTML+CSS前端开发案例（三）

    30个HTML+CSS前端开发案例(11-15) 小米上称右侧悬浮菜单 实现代码 效果图 自动轮播图效果 实现代码 效果图 小米商城二级下拉菜单效果 实现代码 效果图 时间轴效果 实现代码 效果图 Q ...

  5. 30个HTML+CSS前端开发案例（一）

    30个前端小案例(1-5) 三角形 百度新闻热榜 仿小米商城左侧菜单 产品展示效果 精美分页效果 三角形 <!DOCTYPE html> <html><head>& ...

  6. js前端开发案例教程之DOM购物车（动手实践：购物车）

    js前端开发案例教程 之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...

  7. 超详细前端开发案例：品优购商场项目(二)

    目录 续前一篇内容 10. 品优购首页布局 10.4 nav 导航栏制作 10.5 footer 底部制作 10.6 mod_service 服务模块制作 10.7 main 主体模块制作 10.8 ...

  8. 零基础一个月学会这些就能成为初级CSS前端开发工程师

    一个月的时间,成为一个初级的css前端开发工程师?作为一个混迹前端圈几年的码界小姐姐的我来说,我觉得还是蛮难的,毕竟前端这个东西技术的含金量还是蛮高的,不然你觉得关于程序员月入几万都是大风吹来的吗,虽 ...

  9. HTML+CSS前端开发学习笔记

    HTML+CSS 学习路线: 1.HTML 1.1基础概念 web标准: 基本结构标签: html骨架: <!DOCTYPE>标签:文档类型的声明标签 <!DOCTYPE html& ...

最新文章

  1. 访问远程数据库，把远程数据库当做本地库来用
  2. nginx反向代理配置及优化
  3. PHP随机配菜_PHP+JS三级菜单联动菜单实现方法
  4. Luogu P5652 基础博弈练习题 (博弈论、图论)
  5. MSMQ 安装问题的解决过程
  6. 《PHP和MySQL Web开发从新手到高手（第5版）》一1.7 万事俱备，摩拳擦掌
  7. 最优化理论与方法(part4)--秩一校正
  8. Javascript构造函数的继承
  9. android.graphics包中的一些类的使用
  10. 使用数据库镜像保障高可用的数据库应用(下)
  11. abp The value could not be converted to a GUID:
  12. 79.（cesium之家）cesium动态纹理-颜色
  13. 帝国 php 7.0 默认 后台用户名及认证码,帝国CMS忘记后台登陆用户名 密码 认证码 安全提问答案 数据库用户名及密码的解决方法 | 坐倚北风...
  14. 微信智能排号系统，哈林电子会员卡软件 微信智能排队系统 微排队系统源码
  15. 通信协议——Uart、RS232、RS485、SPI
  16. 网恋情缘：从网络蔓延到现实的爱情
  17. python爬网页、爬到前几个就不动了_python scrapy 爬取起点小说，爬虫停止在第四页不动了...
  18. 五大领域总目标指南_五大领域总目标和各年龄段目标 -
  19. 右耳Python小作业---学员分组
  20. 【瑞模网】游戏美术基础（一）：游戏贴图

热门文章

  1. HADOOP组成部分
  2. 【WPF学习手记】InkCanvas绘制矩形和椭圆
  3. SCAN: learning to classify images without labels 阅读笔记
  4. 构建之法 20162316刘诚昊
  5. 20162316刘诚昊 第三周学习总结
  6. basler恢复出厂设置_实现图像实时采集(使用BaslerSDK)-C
  7. Anima2D官方中文使用手册（对应Anima2D1.1.4）
  8. 手写简易版web框架
  9. 设计水花飞溅柠檬汽水饮料广告的PS教程
  10. Vue学习 — 详解Vue生命周期