0
0

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

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

本人说明

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

全屏加载动画效果

代码实现

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>全屏加载动画效果</title><linkrel="stylesheet"href="css/animate.min.css"><styletype="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><divclass="container"><divclass="box"><divclass="item item1 animate__animated animate__backInDown">可是</div><divclass="item item2 animate__animated animate__backInLeft">遗憾的是。</div><divclass="item item3 animate__animated animate__backInRight">我们生活在</div><divclass="item item4 animate__animated animate__backInUp">两条平行直线</div><divclass="item item5 animate__animated animate__bounceIn">永远不会相交的</div><divclass="item item6 animate__animated animate__fadeInDown">世界里</div></div></div></body></html>

效果

吃豆豆动画效果

代码实现

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>吃豆豆动画效果</title><styletype="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><divclass="eat-peas"><divclass="head"><divclass="eye"></div></div><divclass="peas"></div></div></body></html>

效果

鼠标悬停3D翻转效果

代码实现

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>鼠标悬停3D翻转效果</title><styletype="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><divclass="scene"><divclass="box"><divclass="box-front"><imgsrc="images/3d01.jpg"alt=""></div><divclass="box-mid"></div><divclass="box-back"><h3>每日一言</h3><p>遗憾的是我们生活在两条平行直线永远不会相交的世界里。</p></div></div></div></body></html>

效果

3D旋转木马效果

代码实现

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>3D旋转木马效果</title><styletype="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><divclass="scene"><divclass="box"><divclass="item --i:0"><imgsrc="images/gg1.jpg"alt=""width="200"height="200"></div><divclass="item --i:1"><imgsrc="images/gg2.jpg"alt=""width="200"height="200"></div><divclass="item --i:2"><imgsrc="images/gg3.jpg"alt=""width="200"height="200"></div><divclass="item --i:3"><imgsrc="images/gg4.jpg"alt=""width="200"height="200"></div><divclass="item --i:4"><imgsrc="images/gg4.jpg"alt=""width="200"height="200"></div><divclass="item --i:5"><imgsrc="images/gg1.jpg"alt=""width="200"height="200"></div><divclass="item --i:6"><imgsrc="images/gg1.jpg"alt=""width="200"height="200"></div><divclass="item --i:7"><imgsrc="images/gg1.jpg"alt=""width="200"height="200"></div><divclass="item --i:8"><imgsrc="images/gg1.jpg"alt=""width="200"height="200"></div></div></div></body></html>

效果

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

代码实现

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>flex弹性布局-酷狗音乐播放列表</title><styletype="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><divclass="container"><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-01.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-02.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-03.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-04.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-05.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-06.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-07.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div><divclass="item"><divclass="item-con"><ahref=""class="item-con-img"><imgsrc="images/flex-08.jpg"alt=""><span><imgsrc="images/icon_play.png"alt=""width="14">
                            2444.0万
                        </span></a><ahref=""class="item-con-title">
                        催眠：Delta脑波音乐减压深度睡眠
                    </a></div></div></div></body></html>

效果

资源包

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

标签： css html 前端
本文转载自: https://blog.csdn.net/pipihan21/article/details/129008792
版权归原作者 终成大师 所有， 如有侵权，请联系我们删除。
登录后发布评论

“30个HTML+CSS前端开发案例（五）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航