30个HTML+CSS前端开发案例（21-25）

  • 本人说明
  • 全屏加载动画效果
    • 代码实现
    • 效果
  • 吃豆豆动画效果
    • 代码实现
    • 效果
  • 鼠标悬停3D翻转效果
    • 代码实现
    • 效果
  • 3D旋转木马效果
    • 代码实现
    • 效果
  • flex弹性布局-酷狗音乐播放列表
    • 代码实现
    • 效果
  • 资源包

本人说明

本专栏为记录博主的毕业设计而开创，感兴趣的码友可以持续关注本专栏，会定期更新相关内容，我的论文选题为——基于神经网络的智能学习系统，侧重于考研专业课的智能化学习，目前跟着B站上手一些前端实战项目，把之前忘掉的东西都捡起来。
本次的五个小案例，前四个侧重于动画特效的实现，大家在抖音上可能经常看到类似的效果图，今天我们就来学习一下这些特效是如何是实现的！

全屏加载动画效果

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>全屏加载动画效果</title><link rel="stylesheet" href="css/animate.min.css"><style type="text/css">body {margin: 0;padding: 0;}.container {width: 100%;/* 浏览器整个高度被分为100份,100vh即为整个页面高度 */height: 100vh;background-color: aqua;position: relative;}.box {width: 1080px;height: 540px;/* background-color: beige; */position: absolute;/* 设置水平居中效果 */left: 50%;margin-left: -540px;top: 50%;margin-top: -270px;}.box .item{float: left;margin: 10px;border-radius: 10px;}.item1{width: 250px;height: 520px;background-image: linear-gradient(to bottom,#fff,pink);}.item2,.item3{width: 380px;height: 250px;background-image: linear-gradient(to bottom,pink,#fff);}.item4,.item5,.item6{width: 250px;height: 250px;background-image: linear-gradient(to bottom,#fff,pink);}</style></head><body><div class="container"><div class="box"><div class="item item1 animate__animated animate__backInDown">可是</div><div class="item item2 animate__animated animate__backInLeft">遗憾的是。</div><div class="item item3 animate__animated animate__backInRight">我们生活在</div><div class="item item4 animate__animated animate__backInUp">两条平行直线</div><div class="item item5 animate__animated animate__bounceIn">永远不会相交的</div><div class="item item6 animate__animated animate__fadeInDown">世界里</div></div></div></body>
</html>

效果

吃豆豆动画效果

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>吃豆豆动画效果</title><style type="text/css">body {margin: 0px;padding: 0px;}.eat-peas {width: 600px;height: 200px;/* background-color: antiquewhite; */margin: 150px auto 0;position: relative;}.eat-peas .head {width: 200px;height: 200px;/* border: 2px solid blue; */border-radius: 50%;/* 隐藏多余盒子部分 */overflow: hidden;position: relative;z-index: 2;}/* 利用伪元素构造盒子 */.eat-peas .head::before {content: "";display: block;width: 200px;height: 100px;background-color: tomato;/* 以盒子底部中心为轴向上旋转盒子 */transform-origin: bottom center;transform: rotate(0deg);/* 引入动画 */animation: rotate1 .4s ease infinite alternate;}.eat-peas .head::after {content: "";display: block;width: 200px;height: 100px;background-color: tomato;/* 以盒子顶部中心为轴向下旋转盒子 */transform-origin: top center;transform: rotate(0deg);/* 引入动画 */animation: rotate2 .4s ease infinite alternate;}@keyframes rotate1 {0% {transform: rotate(0deg);}100% {transform: rotate(-30deg);}}@keyframes rotate2 {0% {transform: rotate(0deg);}100% {transform: rotate(30deg);}}/* 眼睛 */.eat-peas .eye{width: 20px;height: 20px;background-color: #000;border: 2px solid #fff;position: absolute;top: 20px;left: 80px;border-radius: 50%;}/* 豆豆 */.eat-peas .peas{width: 40px;height: 40px;background-color: tomato;border-radius: 50%;position: absolute;left: 120px;top: 50%;margin-top: -20px;box-shadow: 70px 0px 0px tomato,140px 0px 0px tomato,210px 0px 0px tomato,280px 0px 0px tomato,350px 0px 0px tomato;animation: move .8s ease infinite;}@keyframes move {0%{transform: translateX(0px);}100%{transform: translateX(-70px);}}</style></head><body><div class="eat-peas"><div class="head"><div class="eye"></div></div><div class="peas"></div></div></body>
</html>

效果

鼠标悬停3D翻转效果

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标悬停3D翻转效果</title><style type="text/css">body,h3,p{margin: 0;padding: 0;}.scene{width: 400px;height: 400px;/* border: 2px solid red; */margin: 100px auto 0;/* 视距,决定了3D效果*/perspective: 800px;}.scene .box{width: 400px;height: 300px;/* background-color: yellow;*//* 添加过渡动画 */transition: all ease 1s;position: relative;/* 令元素呈现3D效果 */transform-style: preserve-3d;}.scene .box:hover{transform: rotateY(-180deg);}.box .box-front{width: 400px;height: 300px;background-color: pink;position: absolute;left: 0;top: 0;/* 调高层级 */z-index: 2;}.box .box-mid{width: 400px;height: 300px;background-color: rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: 0;transform: translateZ(-1px);}.box .box-back{width: 200px;height: 200px;background-color: skyblue;background-image: linear-gradient(to bottom right,pink,#fff,skyblue);position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -100px;transform: translateZ(-100px) rotateY(-180deg);font-size: 14px;line-height: 20px;box-sizing: border-box;border-radius: 10px;}.box .box-back h3{text-align: center;color: #000;font-weight: 400;font-size: 16px;}.box .box-back p{font-size: 13px;margin: 10px;font-weight: 200;line-height: 20px;}</style></head><body><div class="scene"><div class="box"><div class="box-front"><img src="data:images/3d01.jpg" alt=""></div><div class="box-mid"></div><div class="box-back"><h3>每日一言</h3><p>遗憾的是我们生活在两条平行直线永远不会相交的世界里。</p></div></div></div></body>
</html>

效果

3D旋转木马效果

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D旋转木马效果</title><style type="text/css">body{margin: 0;padding: 0;background-color: #000;}.scene{width: 600px;height: 300px;/* border: 2px solid red; */margin: 150px auto 0;/* 设置视距 */perspective: 800px;}.scene .box{width: 600px;height: 300px;/* background-color: yellow; *//* 设置动画 *//* transition: all 1s ease; */position: relative;transform-style: preserve-3d;animation: rotate 5s ease infinite;}/* .scene:hover .box{transform: rotateY(-300deg);} */.scene .box .item{width: 200px;height: 200px;background-color: skyblue;position: absolute;bottom: 0;left: 50%;margin-left: -100px;/* transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px); */}.box .item:nth-child(1){transform:  translateZ(300px);}.box .item:nth-child(2){transform: rotateY(40deg) translateZ(300px);}.box .item:nth-child(3){transform: rotateY(80deg) translateZ(300px);}.box .item:nth-child(4){transform: rotateY(120deg) translateZ(300px);}.box .item:nth-child(5){transform: rotateY(160deg) translateZ(300px);}.box .item:nth-child(6){transform: rotateY(200deg) translateZ(300px);}.box .item:nth-child(7){transform: rotateY(240deg) translateZ(300px);}.box .item:nth-child(8){transform: rotateY(280deg) translateZ(300px);}.box .item:nth-child(9){transform: rotateY(320deg) translateZ(300px);}.box:hover{animation-play-state: paused;}@keyframes rotate {0%{transform: rotateX(-10deg) rotateY(0deg);}100%{transform: rotateX(-10deg) rotateY(-360deg);}}</style></head><body><div class="scene"><div class="box"><div class="item --i:0"><img src="data:images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:1"><img src="data:images/gg2.jpg" alt="" width="200" height="200"></div><div class="item --i:2"><img src="data:images/gg3.jpg" alt="" width="200" height="200"></div><div class="item --i:3"><img src="data:images/gg4.jpg" alt="" width="200" height="200"></div><div class="item --i:4"><img src="data:images/gg4.jpg" alt="" width="200" height="200"></div><div class="item --i:5"><img src="data:images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:6"><img src="data:images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:7"><img src="data:images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:8"><img src="data:images/gg1.jpg" alt="" width="200" height="200"></div></div></div></body>
</html>

效果

flex弹性布局-酷狗音乐播放列表

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex弹性布局-酷狗音乐播放列表</title><style type="text/css">body {margin: 0;padding: 0;}a {text-decoration: none;}.container {width: 100%;/* height: 600px; *//* background-color: antiquewhite; *//* 设置最小宽度,防止缩至过少造成挤压 */min-width: 680px;margin-top: 100px;/* 弹性布局 */display: flex;flex-wrap: wrap;}.container .item {width: 25%;display: flex;/* 调成内容居中显示 */justify-content: center;margin-bottom: 20px;}.container .item .item-con {width: 150px;/* border: 1px solid red; *//* 弹性布局方向设置为纵向 */display: flex;flex-direction: column;}.item-con a.item-con-img {height: 150px;/* background-color: antiquewhite; */position: relative;}.item-con a.item-con-img img {border-radius: 10px;}/* 下方文字 */.item a.item-con-img span {font-size: 14px;color: #fff;/* background-color: red; */display: flex;position: absolute;bottom: 10px;left: 10px;z-index: 2;}.item-con a.item-con-img span img {margin-right: 5px;}/* 图片半下方遮罩层 */.item-con a.item-con-img::after{content: '';width: 100%;height: 50%;/* 使用渐变色 */background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.5));display: block;position: absolute;left: 0;bottom: 0;border-radius: 0px 0px 10px 10px;}.item-con a.item-con-title{font-size: 14px;color: #333;margin-top: 10px;}.item-con a.item-con-title:hover{color: tomato;}</style></head><body><div class="container"><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-01.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-02.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-03.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-04.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-05.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-06.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-07.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="data:images/flex-08.jpg" alt=""><span><img src="data:images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div></div></body>
</html>

效果

资源包

相关代码及其图片素材，持续更新中。。。

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

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

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

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

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

  3. 30个HTML+CSS前端开发案例（四）

    30个HTML+CSS前端开发案例(17-20) 鼠标移入文字加载动画效果 代码实现 效果 鼠标悬停缩放效果 实现代码 效果 鼠标移入旋转动画 实现代码 效果 loding加载动画 实现代码 效果 资 ...

  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. openresty 前端开发入门五之Mysql篇

    2019独角兽企业重金招聘Python工程师标准>>> openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysq ...

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

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

  9. openresty json mysql_openresty 前端开发入门五之Mysql篇

    openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...

最新文章

  1. selenium如何操作HTML5的画布canvas上的元素
  2. java struts2相关记录
  3. mx3 android 5.1,魅族MX3揭晓：猎户座处理器5.1寸屏幕
  4. 虚拟服务器设置upnp,TP-Link路由器如何设置UPNP开启【设置步骤】
  5. [转】：VS 2010 : 如何开发和部署Outlook 2010插件(Add-in)
  6. base64链接转为地址php,php将图片链接转换为base64编码文件流
  7. 一次Nginx负载均衡的安装与配置
  8. 自动驾驶路径规划论文解析(3)
  9. editor.md使用php,Editor.md提示修改
  10. 成功在MP4封装的H264视频中提取能播放的裸流
  11. 【EOS】2.1 EOS Hello World合约
  12. FreeSwitch命令：切换视频会议画面布局
  13. kido机器人没反应_QQ机器人常见故障排除方法
  14. matlab脉冲调制,基于matlab脉宽调制方法的研究
  15. Poco库学习——1
  16. 配置了yml文件但是提示cannot resolve property XXX
  17. 量变到质变--技术的爆发或许就在20年之间
  18. c语言整点报时,C语言编写一个简单整点报时工具源代码
  19. CAD杀毒V2.6 正式版
  20. 网络RTK服务和GPS有什么区别？现在哪些品牌在提供网络RTK服务？

热门文章

  1. C语言约分、求最大公约数？三角形用分数格式输出其较小锐角的正弦值
  2. 关于flask入门教程-ajax+echarts实现热力图
  3. javaweb技术及应用QST
  4. 网站代码该如何优化？
  5. MybatisPlus自动填充（建立、更新时间）
  6. Trash Problem
  7. nfs挂载和取消挂载命令
  8. 如何防止勒索病毒入侵
  9. 车用乙烯基薄膜市场现状及未来发展趋势
  10. fivem服务器文件,云梦YumVGTA5 FiveM 服务器插件管理器