网站首页 > 技术文章 正文
实现效果视频：
https://m.toutiaoimg.com/i7012628289806139918/?gd_ext_json=%7B%22enter_from%22%3A%22click_creation_center%22%2C%22category_name%22%3A%22creation_center%22%7D&enter_from=click_creation_center&category_name=creation_center&share_token=c3b59c5c-c95d-43a9-a842-4cd30e321a34&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_android&utm_campaign=client_share
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转、缩放</title>
<style type="text/css">
.box {
width: 750px;
height: 520px;
margin: 50px auto;
background-image: url(狼王-灵梦狼王.jpg);
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
.box img {
/* 设置图片位置 */
position: absolute;
top: 0;
left: 0;
}
.img1 {
z-index: 100;
/* 动画 */
animation: image1 2s linear 1s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image1 {
0% {
transform: scale(1);
}
50% {
/* 缩放，缩小 */
transform: scale(0.5);
}
100% {
transform: scale(0.0001);
}
}
.img2 {
z-index: 98;
/* 动画 */
animation: image2 2s linear 3s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image2 {
0% {
transform: scale(1);
}
50% {
/* 缩放，缩小 */
transform: scale(1.5);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: scale(5);
opacity: 0;
}
}
.img3 {
z-index: 97;
/* 动画 */
animation: image3 2s linear 5s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image3 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0;
}
}
.img4 {
z-index: 96;
/* 动画 */
animation: image4 2s linear 7s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image4 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-180deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotate(-360deg);
opacity: 0;
}
}
.img5 {
z-index: 95;
/* 动画 */
animation: image5 2s linear 9s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image5 {
0% {
/* 绕y轴旋转 */
transform: rotateY(0deg);
}
50% {
transform: rotateY(-90deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateY(-180deg);
opacity: 0;
}
}
.img6 {
z-index: 94;
/* 动画 */
animation: image6 2s linear 11s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image6 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(90deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
.img7 {
z-index: 93;
/* 动画 */
animation: image7 2s linear 13s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image7 {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(180deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateZ(360deg);
opacity: 0;
}
}
.img8 {
z-index: 92;
/* 动画 */
animation: image8 2s linear 15s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image8 {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(-180deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateZ(-360deg);
opacity: 0;
}
}
.img9 {
z-index: 91;
/* 动画 */
animation: image9 2s linear 17s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image9 {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(-90deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateX(-180deg);
opacity: 0;
}
}
.img10 {
z-index: 90;
/* 动画 */
animation: image10 2s linear 19s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image10 {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
/* 设置不透明度 */
opacity: 1;
}
100% {
transform: rotateX(180deg);
opacity: 0;
}
}
.img11 {
z-index: 89;
/* 动画 */
animation: image11 2s linear 21s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: top;
}
@keyframes image11 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.img12 {
z-index: 88;
/* 动画 */
animation: image12 2s linear 23s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: top;
}
@keyframes image12 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
.img13 {
z-index: 87;
/* 动画 */
animation: image13 2s linear 25s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: top;
}
@keyframes image13 {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(-45deg);
}
100% {
transform: rotateX(-90deg);
}
}
.img14 {
z-index: 86;
/* 动画 */
animation: image14 2s linear 27s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: top;
}
@keyframes image14 {
0% {
transform: rotateX(0deg);
/* 设置模糊度 */
filter: blur(0px);
}
50% {
transform: rotateX(45deg);
}
100% {
transform: rotateX(90deg);
filter: blur(1);
}
}
.img15 {
z-index: 85;
/* 动画 */
animation: image15 2s linear 29s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: bottom;
}
@keyframes image15 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
.img16 {
z-index: 84;
/* 动画 */
animation: image16 2s linear 31s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: bottom;
}
@keyframes image16 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.img17 {
z-index: 83;
/* 动画 */
animation: image17 2s linear 33s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: bottom;
}
@keyframes image17 {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(45deg);
}
100% {
transform: rotateX(90deg);
}
}
.img18 {
z-index: 82;
/* 动画 */
animation: image18 2s linear 35s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: bottom;
}
@keyframes image18 {
0% {
transform: rotateX(0deg);
filter: blur(0px);
}
50% {
transform: rotateX(-45deg);
}
100% {
transform: rotateX(-90deg);
filter: blur(1px);
}
}
.img19 {
z-index: 81;
/* 动画 */
animation: image19 2s linear 37s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: left;
}
@keyframes image19 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
.img20 {
z-index: 80;
/* 动画 */
animation: image20 2s linear 39s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: left;
}
@keyframes image20 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.img21 {
z-index: 79;
/* 动画 */
animation: image21 2s linear 41s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: left;
}
@keyframes image21 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(90deg);
}
}
.img22 {
z-index: 78;
/* 动画 */
animation: image22 2s linear 43s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: left;
}
@keyframes image22 {
0% {
transform: rotateY(0deg);
filter: blur(0px);
}
50% {
transform: rotateY(-45deg);
}
100% {
transform: rotateY(-90deg);
filter: blur(1px);
}
}
.img23 {
z-index: 77;
/* 动画 */
animation: image23 2s linear 45s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: right;
}
@keyframes image23 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
.img24 {
z-index: 76;
/* 动画 */
animation: image24 2s linear 47s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: right;
}
@keyframes image24 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.img25 {
z-index: 75;
/* 动画 */
animation: image25 2s linear 49s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: right;
}
@keyframes image25 {
0% {
transform: rotateY(0deg);
filter: blur(0px);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(90deg);
filter: blur(1px);
}
}
.img26 {
z-index: 74;
/* 动画 */
animation: image26 2s linear 51s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: right;
}
@keyframes image26 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-45deg);
}
100% {
transform: rotateY(-90deg);
}
}
.img27 {
z-index: 73;
/* 动画 */
animation: image27 2s linear 53s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: left top;
}
@keyframes image27 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.img28 {
z-index: 72;
/* 动画 */
animation: image28 2s linear 55s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
/* 设置旋转原点 */
transform-origin: right top;
}
@keyframes image28 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-180deg);
}
}
.img29 {
z-index: 71;
/* 动画 */
animation: image29 2s linear 57s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image29 {
0% {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(180deg) scale(0.5);
}
100% {
transform: rotateZ(360deg) scale(0.0001);
}
}
.img30 {
z-index: 70;
/* 动画 */
animation: image30 2s linear 59s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image30 {
0% {
transform: rotateX(0deg) scale(1);
}
50% {
transform: rotateX(180deg) scale(0.5);
}
100% {
transform: rotateX(360deg) scale(0.0001);
}
}
.img31 {
z-index: 69;
/* 动画 */
animation: image31 2s linear 61s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image31 {
0% {
transform: rotateY(0deg) scale(1);
}
50% {
transform: rotateY(180deg) scale(0.5);
}
100% {
transform: rotateY(360deg) scale(0.0001);
}
}
.img32 {
z-index: 68;
/* 动画 */
animation: image32 2s linear 63s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image32 {
0% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(0.0001);
}
}
.img33 {
z-index: 67;
/* 动画 */
animation: image33 2s linear 65s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image33 {
0% {
transform: rotateY(0deg) scaleX(1);
}
50% {
transform: rotateY(180deg) scaleX(0.5);
}
100% {
transform: rotateY(360deg) scaleX(0.0001);
}
}
.img34 {
z-index: 66;
/* 动画 */
animation: image34 2s linear 67s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image34 {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.5);
}
100% {
transform: scaleY(0);
}
}
.img35 {
z-index: 65;
/* 动画 */
animation: image35 2s linear 69s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image35 {
0% {
transform: rotateY(0deg) scaleY(1);
}
50% {
transform: rotateY(180deg) scaleY(0.5);
}
100% {
transform: rotateY(360deg) scaleY(0);
}
}
.img36 {
z-index: 64;
/* 动画 */
animation: image36 2s linear 71s;
/* 让动画停留在最后一帧，不回到开始处 */
animation-fill-mode: forwards;
}
@keyframes image36 {
0% {
transform: rotate(0deg) scaleY(1);
}
50% {
transform: rotate(180deg) scaleY(1.5);
opacity: 1;
}
100% {
transform: rotate(360deg) scaleY(5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="box">
<img class="img1" src="狼蛛.jpg" alt="" />
<img class="img2" src="狼蛛-紫魅毒姬.jpg" alt="" />
<img class="img3" src="洛神.jpg" alt="" />
<img class="img4" src="猎魔人.jpg" alt="" />
<img class="img5" src="猎魔人-蜂针魔女.jpg" alt="" />
<img class="img6" src="猎魔人-原力神枪.jpg" alt="" />
<img class="img7" src="猎魔人-挚爱甜心.jpg" alt="" />
<img class="img8" src="罗刹郡主.jpg" alt="" />
<img class="img9" src="罗刹郡主-玫红冰晶.jpg" alt="" />
<img class="img10" src="罗刹郡主-耀世神皇.jpg" alt="" />
<img class="img11" src="罗刹郡主-樱落飞翎.jpg" alt="" />
<img class="img12" src="洛神-北境仙姬.jpg" alt="" />
<img class="img13" src="洛神-飞羽女王.jpg" alt="" />
<img class="img14" src="洛神-惊鸿仙子.jpg" alt="" />
<img class="img15" src="绿野花仙.jpg" alt="" />
<img class="img16" src="绿野花仙-精灵公主.jpg" alt="" />
<img class="img17" src="绿野花仙-矩阵天翼.jpg" alt="" />
<img class="img18" src="绿野花仙-绿梦天仙.jpg" alt="" />
<img class="img19" src="魅魔公主.jpg" alt="" />
<img class="img20" src="魅魔公主-炼金魔女.jpg" alt="" />
<img class="img21" src="魅魔公主-梦有灵犀.jpg" alt="" />
<img class="img22" src="魅魔公主-星幻少女.jpg" alt="" />
<img class="img23" src="哪吒.jpg" alt="" />
<img class="img24" src="哪吒-飞轮公主.jpg" alt="" />
<img class="img25" src="哪吒-黄金威灵.jpg" alt="" />
<img class="img26" src="哪吒-轮刃审判.jpg" alt="" />
<img class="img27" src="哪吒-异界仙将.jpg" alt="" />
<img class="img28" src="聂小倩.jpg" alt="" />
<img class="img29" src="聂小倩-黛染幽情.jpg" alt="" />
<img class="img30" src="聂小倩-勾魂灯使.jpg" alt="" />
<img class="img31" src="聂小倩-海洋之心.jpg" alt="" />
<img class="img32" src="聂小倩-绿影魔仙.jpg" alt="" />
<img class="img33" src="聂小倩-仲夏清和.jpg" alt="" />
<img class="img34" src="女武神.jpg" alt="" />
<img class="img35" src="女武神-火羽流炎.jpg" alt="" />
<img class="img36" src="女武神-金枪战神.jpg" alt="" />
</div>
</body>
</html>实现效果视频：
https://www.ixigua.com/i7012628289806139918/
猜你喜欢
- 2025-01-01 组态图不搞点3d效果，真的拿不出手了。
- 2025-01-01 AI设计创意海报:对比色配叠色，两种效果，两种感觉
- 2025-01-01 3D版生产工艺流程图，在展现效果上绝对是碾压的。
- 2025-01-01 直播点赞实现，浮动消失效果
- 2025-01-01 CSS Loaders:开箱即用的 500+ CSS loading 效果
- 2025-01-01 2.5D拓扑图—3D的逼真效果，2D的制作成本
- 2025-01-01 「Vue项目」中的滚动组件&联动效果从0到1(建议收藏)
- 2025-01-01 污水处理工艺流程放入智慧水务大屏，效果立马上来了。
- 2025-01-01 加入Unity3D的可视化大屏，效果绝对的震撼!
- 2025-01-01 电商可视化大屏效果拉满，所有数据一目了然
欢迎 你 发表评论:
- 559℃Oracle分析函数之Lag和Lead()使用
- 555℃几个Oracle空值处理函数 oracle处理null值的函数
- 544℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 541℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 538℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 529℃【数据统计分析】详解Oracle分组函数之CUBE
- 519℃最佳实践 | 提效 47 倍，制造业生产 Oracle 迁移替换
- 507℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端密码加密 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)