前端CSS学习:旋转、缩放效果的实现(代码)
itomcoil 2025-01-05 18:05 24 浏览
实现效果视频：
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/
相关推荐
- Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)
-
在开始本文之前提醒各位朋友，Python记得安装PyQt5库文件，Python语言功能很强，但是Python自带的GUI开发库Tkinter功能很弱，难以开发出专业的GUI。好在Python语言的开放...
- Connect 2.0来了，还有Nuke和Maya新集成
-
ftrackConnect2.0现在可以下载了--重新设计的桌面应用程序，使用户能够将ftrackStudio与创意应用程序集成，发布资产等。这个新版本的发布中还有两个Nuke和Maya新集成，...
- Magicgui:不会GUI编程也能轻松构建Python GUI应用
-
什么是MagicguiMagicgui是一个Python库,它允许开发者仅凭简单的类型注解就能快速构建图形用户界面(GUI)应用程序。这个库基于Napari项目,利用了Python的强大类型系统,使得...
- Python入坑系列:桌面GUI开发之Pyside6
-
阅读本章之后，你可以掌握这些内容：Pyside6的SignalsandSlots、Envents的作用，如何使用？PySide6的Window、DialogsandAlerts、Widgets...
- Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI
-
通过本文章，你可以了解一下内容：如何安装和使用Pyside6designerdesigner有哪些的特性通过designer如何转成python代码以前以为Pyside6designer需要在下载...
- pyside2的基础界面（pyside2显示图片）
-
今天我们来学习pyside2的基础界面没有安装过pyside2的小伙伴可以看主页代码效果...
- Python GUI开发:打包PySide2应用（python 打包pyc）
-
之前的文章我们介绍了怎么使用PySide2来开发一个简单PythonGUI应用。这次我们来将上次完成的代码打包。我们使用pyinstaller。注意，pyinstaller默认会将所有安装的pack...
- 使用PySide2做窗体，到底是怎么个事?看这个能不能搞懂
-
PySide2是Qt框架的Python绑定，允许你使用Python创建功能强大的跨平台GUI应用程序。PySide2的基本使用方法：安装PySide2pipinstallPy...
- pycharm中conda解释器无法配置（pycharm安装的解释器不能用）
-
之前用的好好的pycharm正常配置解释器突然不能用了？可以显示有这个环境然后确认后可以conda正在配置解释器，但是进度条结束后还是不成功！！试过了pycharm重启，pycharm重装，anaco...
- Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建
-
Conda虚拟环境在Linux下的全面使用指南：从基础操作到Llama-Factory大模型微调环境搭建在当今的AI开发与数据分析领域，conda虚拟环境已成为Linux系统下管理项目依赖的标配工具。...
- Python操作系统资源管理与监控（python调用资源管理器）
-
在现代计算环境中，对操作系统资源的有效管理和监控是确保应用程序性能和系统稳定性的关键。Python凭借其丰富的标准库和第三方扩展，提供了强大的工具来实现这一目标。本文将探讨Python在操作系统资源管...
- 本地部署开源版Manus+DeepSeek创建自己的AI智能体
-
1、下载安装Anaconda，设置conda环境变量，并使用conda创建python3.12虚拟环境。2、从OpenManus仓库下载代码，并安装需要的依赖。3、使用Ollama加载本地DeepSe...
- 一文教会你，搭建AI模型训练与微调环境，包学会的!
-
一、硬件要求显卡配置：需要Nvidia显卡，至少配备8G显存，且专用显存与共享显存之和需大于20G。二、环境搭建步骤1.设置文件存储路径非系统盘存储：建议将非安装版的环境文件均存放在非系统盘（如E盘...
- 使用scikit-learn为PyTorch 模型进行超参数网格搜索
-
scikit-learn是Python中最好的机器学习库，而PyTorch又为我们构建模型提供了方便的操作，能否将它们的优点整合起来呢？在本文中，我们将介绍如何使用scikit-learn中的网格搜...
- 如何Keras自动编码器给极端罕见事件分类
-
全文共7940字，预计学习时长30分钟或更长本文将以一家造纸厂的生产为例，介绍如何使用自动编码器构建罕见事件分类器。现实生活中罕见事件的数据集：背景1.什么是极端罕见事件？在罕见事件问题中，数据集是...
- 一周热门
- 最近发表
-
- Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)
- Connect 2.0来了，还有Nuke和Maya新集成
- Magicgui:不会GUI编程也能轻松构建Python GUI应用
- Python入坑系列:桌面GUI开发之Pyside6
- Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI
- pyside2的基础界面（pyside2显示图片）
- Python GUI开发:打包PySide2应用（python 打包pyc）
- 使用PySide2做窗体，到底是怎么个事?看这个能不能搞懂
- pycharm中conda解释器无法配置（pycharm安装的解释器不能用）
- Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)