CSS3动画和3D转换

最新推荐文章于 2022-10-18 20:47:42 发布
最新推荐文章于 2022-10-18 20:47:42 发布
阅读量418 收藏
点赞数
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiutiandepaomo/article/details/121361370
版权

一、动画

1、0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。或者用关键词"from"和"to"，等同于0%和100%。

2、里面的百分比要是整数。

3、里面的百分比就是总的时间的划分。

4、在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一步 定义动画 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 第二步 使用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

5、动画属性

属性描述
@keyframes规定动画
animation所有动画属性的简写，除了animation-play-state属性
animation-name规定@keyframes动画的名称(必须)
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认为0(必须)
animation-timing-function规定动画的速度曲线，默认是"ease"
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，infinite无限
animation-direction规定动画是否在下一周期逆向播放，默认是"normal"，alternate逆播放
animation-play-state规定动画是否正在运行或暂停，默认是"running"，还有"paused"
animation-fill-mode

规定动画结束后状态，保持forwards

回到起点backwards

animation

动画名称 持续时间 动画曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

注意：简写属性里面不包含animation-play-state

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 */
            animation-fill-mode: forwards;
            /*简写   前两个属性是一定要写的*/
            animation: move 2s linear 2s 1 alternate forwards;
        }
        
        div:hover {
            /* 鼠标经过div 让div停止动画 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

利用动画属性实现波纹效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 实现波纹效果 */
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* 这里不用scale的原因是它会让阴影变大 */
                /* transform: scale(5); */
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted">

            </div>
            <div class="pulse1">

            </div>
            <div class="pulse2">

            </div>
            <div class="pulse3">

            </div>
        </div>
    </div>
</body>

</html>

6、animation-timing-function

规定动画的速度曲线，默认是"ease"

属性值描述
linear动画从头到尾的速度是相同的，匀速
ease默认。动画以低速开始，然后加快，在结束前放慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量(步长)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 30px;
            background-color: pink;
            /* steps就是分几步来完成我们的动画  */
            animation: w 6s steps(10) infinite;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

二、3D转换之3D移动 translate3d

需要注意的是translateZ后面的单位我们一般跟px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* translate3d里面的xyz是不能省略的，如果没有就写0 */
            transform: translate3d(50%, 50%, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

三、3D转换之透视perspective

透视我们也称为视距，就是人的眼睛到屏幕的距离。距离视觉点越近的在电脑平面成像越大，越远成像越小。透视的单位是像素。

透视写在被观察元素的父盒子上面。

d：视距，就是人眼到屏幕的距离。

z：就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 透视写在被观察元素的父盒子上面  */
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* translate3d里面的xyz是不能省略的，如果没有就写0 */
            transform: translate3d(500px, 500px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

四、3D转换之旋转rotate3d

1、语法：

rotateX(45deg)：沿着x轴正方向旋转45度

rotateY(45deg)：沿着y轴正方向旋转45度

rotateZ(45deg)：沿着z轴正方向旋转45度

rotate(x,y,z,deg)：沿着自定义方向旋转

2、左手准则：

rotateX()：左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴正方向旋转的方向。

 

 rotateY()：左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴正方向旋转的方向。

 

rotateZ()：同样的，左手的大拇指指向z轴的正方向，其余手指的弯曲方向就是该元素沿着z轴正方向旋转的方向。

五、3D呈现 transform-style

控制子元素是否开启三维立体环境。代码写给父级，但是影响的是子盒子。

transform-style:flat子元素不开启3d立体空间，默认
transform-style:preserve-3d子元素开启立体空间

3D导航栏案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            width: 120px;
            height: 35px;
            margin: 0 5px;
            list-style: none;
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 35px;
        }
        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: purple;
            /* 如果有移动和其他样式 必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">汪苏泷</div>
                <div class="bottom">万有引力</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">张韶涵</div>
                <div class="bottom">隐形的翅膀</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">汪苏泷</div>
                <div class="bottom">有点甜</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">张碧晨</div>
                <div class="bottom">年轮</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">王靖雯</div>
                <div class="bottom">说说话</div>
            </div>
        </li>
    </ul>
</body>

</html>

旋转木马案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 800px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }
        
        section:hover {
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/yuner1.jpeg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 因为是旋转60度，这个必须先旋转，再移动 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 因为是旋转60度，这个必须先旋转，再移动 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 因为是旋转60度，这个必须先旋转，再移动 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 因为是旋转60度，这个必须先旋转，再移动 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 因为是旋转60度，这个必须先旋转，再移动 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

流星雨^-^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery和css3平面图片转换为3d模型动画效果
12-12
这是一款神奇的jQuery和css3平面图片转换为3d模型动画效果插件。该插件可以将平面图片转换为3d模型，并且该插件还带有地标动画，点击地标可以看到改点地标的内容。
CSS3动画
drogan_的博客
03-07 165
【逆战班的课程讲解】 一、过渡属性 过渡：CSS3的transition属性能够让元素的CSS属性值变化过程在一个时间段内来平滑的过渡呈现，这种效果可 以在用户对元素产生变化时来呈现，例如：鼠标滑过，点击，获得焦点等。我们再写这个属性的时候，他的单位 会以秒（s）来结束。表示属性值发生改变的元素在几秒（我们规定的值）内发生了平滑的过渡动画效果。 二、2D动画 1.2D动画是指通过...
CSS3动画是什么？
gzxiaomei的博客
07-17 209
动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 实例 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变： @keyframes myfirst { 0% {background: red;} ...
CSS3动画Animation总结
yqdid的博客
10-18 145
如需使用 CSS 动画，必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
css3动画-transform属性
磷火的博客
05-14 1万+
css3动画--transform属性（translate，scale，rotate）
CSS3-动画
m0_52660785的博客
07-22 357
CSS3动画
css3动画效果小结(推荐)
12-13
1、transition(过度属性)2、animation(动画属性)3、transform(2D/3D转换属性) 下面逐一进行介绍我的理解： 1、transition:<过渡属性名称> <过渡时间> <过渡模式> 如-webkit-transition:color 1s; 等同于: -...
CSS3的鼠标悬停效果和动画
08-10
CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的...因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。
使用css3实现动态效果
06-10
2.需要使用css3中的至少两种效果，并且用到css3的地方请注释，例如阴影效果，动画效果，2D转换，3D转换，css3过渡等等。 3.要求css样式写在head的style里，或者新建一个css文件写在里面。图片放在单独建立的文件夹下...
2D文字与3D图像粒子转换动画特效.rar
最新发布
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
CSS3：动画的使用（如何定义一个动画）及动画常用的一些属性
weixin_46682277的博客
01-08 1074
制作动画分两步： 1.先定义好动画； 2.再使用（调用）该动画； 和创建一个类class，然后再调用这个类class是一样的道理。 用@keyframes来定义动画，例如： /*move就是创建的动画名称*/ @keyframes move { 0% { width: 100px; } 50% { /*先向X轴移动500像素*/ transform: translate(500px,0); } 100% { /*再向Y轴移动500像素*/ transform: translate(
Web前端学习笔记4（scale的应用（分页按钮），tranform的综合使用，动画）
m0_60531106的博客
07-27 699
实现当鼠标碰到按钮时，按钮放大且不会影响其他盒子，用scale可以不影响其他盒子。
css3实现图片360度旋转及animation、@keyframes的详解
xz182838的博客
07-04 2933
每天记录一点点知识，日积月累下来，你会发现，你已经会的比别人多！！！！！ 下边的两块css代码，可以实现图片360度旋转 @keyframes rotateImage { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .content-play-cover img { animation: rotateImage 10s linear infinite; width:
在父节点transform: translate(0, 0)子节点部分position:fixed部分浏览器无效
心之所向
08-16 1063
在bootstrap模态框中使用一个全屏模态框在使用fixed属性后，测试在IE11、Firefox、safari中均没有问题，在Opera和Chrome中无效。 解决办法：将带有fixed属性弹框放到外面来，html或js转移都行。 原理
css3旋转动画
sinat_41292836的博客
11-26 253
html <div class="rotate_bg"> <img class="rotateImages" src="images/01.png" /> </div> css .rotate_bg{ width: 500px; height: 500px; background: #59d1b6; m...
小程序实现音乐播放界面---黑胶唱片转动与唱针旋转
weixin_30898109的博客
10-22 1304
参考网址：https://blog.csdn.net/sinat_19327991/article/details/79083885 页面部分： <view class="record flex1"> 　　<!-- 唱片 --> 　　<image src="../images/musicCD.png" class="{{playStatus === ...
CSS3复习之动画
my_love_download的博客
11-08 110
在前端的开发过程中,一般在写CSS的时候,会需要使用到css的动画知识,本文主要是实现一个简单的魔方来对动画和3D进行一个复习: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <styl...
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅
热门推荐
菜菜菜菜鸟の成长记
03-13 1万+
前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使用canvas标签做图片滤镜效果，chrome浏览器居然显示不了滤镜效果，然而其他浏览器均能正常显示，大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么.
css3实现3D动画
08-05
通过使用CSS3的3D转换和过渡属性，我们可以在网页中创建各种令人惊叹的三维动画效果。 首先，我们可以使用`transform`属性来对HTML元素进行3D转换。例如，通过设置`transform: translateX(100px) translateY(100px)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值