CSS3复习之动画

最新推荐文章于 2022-10-20 22:05:29 发布
最新推荐文章于 2022-10-20 22:05:29 发布
阅读量129 收藏
点赞数
分类专栏： css css3 文章标签： CSS3动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_love_download/article/details/102979314
版权
css3 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏
在前端的开发过程中,一般在写CSS的时候,会需要使用到css的动画知识,本文主要是实现一个简单的魔方来对动画和3D进行一个复习:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

         ul {
             list-style: none;
             margin:0;
             padding:0;
         }
         .box {
              width: 400px;
              height: 400px;
              margin: 200px auto;
              position: relative;
              font-size: 50px;
              /*perspective: 1000px;*/
              transform-style: preserve-3d;

              animation: rotate 10s linear infinite alternate;
         }
        
         .box div {
              width: 400px;
              height: 400px;
              position: absolute;
         }
         .right {
             background-color: transparent;
             transform: rotateY(90deg) translateZ(200px);
         }
         .left {
             background-color: transparent;
             transform: rotateY(-90deg) translateZ(200px);
         }

         .top {
              background-color: transparent;
              transform: rotateX(90deg) translateZ(200px);
         }

        .bottom {
             background-color: transparent;
             transform: rotateX(-90deg) translateZ(200px);
        }

        .before {
             background-color: transparent;
             transform: translateZ(200px);
        }

        .back {
             background-color: transparent;
             transform: translateZ(-200px);
        }

        li {
             float: left;
             width: 90px;
             height: 90px;
             border-radius: 20px;
             margin: 5px;
             text-align: center;
             line-height: 90px;
        }

        .before li {
            background-color:#0000FF;
        }
         .back li {
             background-color:#008000;
         }

         .top li {
              background-color: #FFFF00;
         }

         .bottom li {
              background-color: #F8F8FF;
         }

         .left li {
              background-color: #FFA500;
         }

         .right li {
              background-color: #FF0000;
         }

        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(40deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(80deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(160deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(360deg);
            }
        }

    </style>
</head>
<body>
<!--
目的实现一个魔方来复习和巩固仔细学习的css3动画知识
1.魔方有是一个6面体,每个面上都有1-6这六个数字
2.我们需要将整个盒子设置为3D效果 ---   transform-style: preserve-3d;
3.分别给6个面设置透明色--- background-color: transparent;
4.分别给6个面一个旋转的角度  transform: rotateY(90deg) translateZ(200px);
5.给魔方设置旋转--- animation: rotate 10s linear infinite alternate;

-->
        <div class="box">
            <div class="before">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
            <div class="back">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
            <div class="top">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
            <div class="left">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
                </ul>
            </div>
        </div>
</body>
</html>

效果图
小魔方
总结

1.设置动画的旋转的进度
 @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(40deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(80deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(160deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(360deg);
            }
        }
2.设置动画旋转的事件和次数
 animation: rotate 10s linear infinite alternate;
3.动画的属性非常多,实际应用的时候多看看教程
my_love_download
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3复习3-形状变换-过渡动画-animation
余光的博客
08-22 1607
一、transform 可以实现元素的形状、角度、位置等的变化。 1、transform: rotate(45deg); 旋转45度，deg代表度数 rotateX（）//X轴旋转 rotateY（）//Y轴旋转 rotatez() rotate3d(x, y, z, angle) x, y, z 2、scale(); 以x/y为轴进行缩放 transfo...
CSS3实现5个常用的网页动画效果
2401_84091938的博客
04-19 972
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
css3实现图片360度旋转及animation、@keyframes的详解
xz182838的博客
07-04 3429
每天记录一点点知识，日积月累下来，你会发现，你已经会的比别人多！！！！！ 下边的两块css代码，可以实现图片360度旋转 @keyframes rotateImage { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .content-play-cover img { animation: rotateImage 10s linear infinite; width:
css3动画及案例
qq_42481626的博客
05-09 878
css3动画 1、2d动画 translate() ：平移。根据左（X轴）和顶部（Y轴）位置给定的参数，从当前位置移动。 rotate() ：旋转。在一个给定度数顺时针旋转的元素，负值是允许的，这样的元素逆时针旋转。（如rotate值（30deg）元素顺时针旋转30度。） scale() ：伸缩。该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如（scale（2,3）转变宽度为原...
css3旋转动画
sinat_41292836的博客
11-26 267
html <div class="rotate_bg"> <img class="rotateImages" src="images/01.png" /> </div> css .rotate_bg{ width: 500px; height: 500px; background: #59d1b6; m...
CSS3动画和3D转换
qiutiandepaomo的博客
11-18 440
一、动画 1、0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。或者用关键词"from"和"to"，等同于0%和100%。 2、里面的百分比要是整数。 3、里面的百分比就是总的时间的划分。 4、在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
html5一个圆圈旋转,CSS3 四个圆圈交叠旋转器
weixin_29859471的博客
06-01 519
CSS语言：CSSSCSS确定html {background: #111;height: 100%;overflow: hidden; }.cont {position: absolute;width: 40px;height: 140px;margin: auto;-webkit-animation: rotate 10s linear infinite;animation: rotate 1...
CSS/CSS3复习
WXY19990803的博客
10-20 314
css/css3复习
css动画复习以及实现心动效果
01-08
心形是一个非常流行的形状,在这片文章里我们将使用纯css画出心形,然后使用css动画实现心动的效果. 在此之前,我们必须要了解伪元素::after 和 ::before的作用,::before 创建一个伪元素，其将成为匹配选中的元素的第...
CSS3制作圆形滚动进度条动画的示例
01-18
 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效果而已，...
动画animation的三个应用（漂浮的白云、旋转的星球、正方体合成）
qq_32849999的博客
08-21 2417
参考https://www.cnblogs.com/xiaohuochai/p/5419236.html （含动画效果） 漂浮的白云 【效果演示】   【简要介绍】 　　漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果 【主要代码】 .box{ p...
Mali_Texture_Compression_Tool_v4_Windows_x64.zip
08-30
Mali_Texture_Compression_Tool_v4_Windows_x64.zip
高分项目-卡卡汽车 获取用户 设备信息小程序源码（优秀毕业设计源码）.zip
08-30
1. 精选系统小程序代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
基于Java的图书馆管理系统代码.rar
08-30
一键三连加关注私信up获取源码无偿分享群，以下为福利链接：https://pan.baidu.com/s/1niFL_7h0KhdJSW7r0XdtDw?pwd=1234 提取码：1234 基于springboot的XXXX管理系统，可以用于计算机专业毕设和课设使用 开发语言：Java 开发软件：eclipse/myeclipse/idea 框架：ssm JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 Maven包：Maven3.3.9 浏览器：谷歌浏览器 管理员账号：admin 管理员密码：admin 配置环境安装包： Java配置环境链接：https://cloud.189.cn/t/baeQZrAjEvyy （访问码：pfd5） 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/dist/inde
免费prometheus Mac 版本安装包
08-30
Prometheus是一个流行的开源监控和告警工具，特别适合于云原生环境和Kubernetes集群的监控。以下是Prometheus的详细描述： 一、概述 Prometheus是一个基于时序数据库的开源服务监控系统和时序数据库，其提供了通用的数据模型和快捷数据采集、存储和查询接口。自2012年启动以来，许多公司和组织都采用了Prometheus，该项目拥有非常活跃的开发人员和用户社区。Prometheus于2016年加入云原生计算基金会，成为继Kubernetes之后的第二个托管项目。 二、主要特性 多维数据模型：Prometheus的数据模型是基于时间序列的，每个时间序列由度量名称（metric name）和一系列键值对（key-value pairs，也称为标签labels）唯一标识。这种模型允许对数据进行多维度的查询和聚合。 PromQL查询语言：Prometheus提供了一个功能强大的查询语言PromQL（Prometheus Query Language），用户可以使用这个语言对收集到的时序数据进行查询和分析。 高效的数据采集和存储：Prometheus通过HTTP协议周
产品质量国家监督抽查承检工作规范
08-30
监督抽查
基于yolov8的手势识别0-9检测系统python源码+onnx模型+评估指标曲线+精美GUI界面.zip
最新发布
08-30
【测试环境】 windows10 anaconda3+python3.8 torch==1.9.0+cu111 ultralytics==8.2.70 【模型可以检测出类别】 0,1,2,3,4,5,6,7,8,9 视频演示：https://www.bilibili.com/video/BV1kwH5esEwv/ 博文地址：https://blog.csdn.net/FL1623863129/article/details/141719329
CSS伪元素与keyframe打造个性化页面加载动画
本文主要探讨如何利用纯CSS技术创建一个吸引眼球的页面加载动画。加载动画的重要性在于提升用户体验，尤其是在页面加载速度较慢时，视觉效果可以暂时填充空白，减轻用户的等待焦虑。然而，作者强调，并非所有页面都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值