Java教程

动画的位移.旋转.呈现等8.7

本文主要是介绍动画的位移.旋转.呈现等8.7,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

过渡延迟:

  •  transition: height 2s 2s, width 2s 3s ;
  • 多个属性之间用逗号隔开,第二个值代表的是过渡延迟;  

注意:行内元素添加转换无效;

注意:加了转换的盒子层级会提高,很像加了相对定位;

注意:绝对定位的盒子父元素有了转换,盒子偏移参考父元素;

空间位移:

  •   perspective: 1000px;

  • 视距:是屏幕距眼睛的距离,添加到父元素上,取值800-1200px;
  •  transform: rotateX(100px);
  •  有X,Y,Z三个值表示,用大写表示;

  •  总写: transform: translate3d(X,Y,Z,60deg),调用哪个就把轴写成1,然后后边写数值  ;

立体呈现:

  • 给父元素添加:  ransform-style: preserve-3d;

百分比动画:

 @keyframes tf {
            /* 百分比动画,复杂动画(多状态动画),百分比分配时间*/
            0% {
                transform: translate(0, 0);
            }

            5% {
                transform: translate(500px, 0);
            }

            50% {
                transform: translate(500px, 200px);
            }

            75% {
                transform: translate(0, 200px);
            }

            100% {
                transform: translate(0, 0);
            }

 体验动画:

  • .box {
                width: 200px;
                height: 200px;
                background-color: #ccc;
                border-radius: 50%;
                /* 属性值,播放时长,循环播放 */
                /* animation: tf 2s infinite; */
                /*  调用动画的名称*/
                animation-name: tf;
                /* 动画执行的时间 */
                animation-duration: 2s;
                /* 动画播放的次数 默认一次 */
                /* animation-iteration-count:infinite ; */
                /* 动画执行的方向 alternate逆播 */
                animation-direction: alternate;
                /*  动画延迟 要多久才开始*/
                animation-delay: 2s;
                /* 动画速度曲线 linear匀速*/
                animation-timing-function: linear;
                /* 动画停在那个状态  forwards停在结束状态*/
                animation-fill-mode: forwards;
                /* infinite循环播放和forwards停在结束状态有冲突,连写的时候写一个就可以*/
                /* 第一个时间是动画播放的时间,第二个是延迟的时间 */
                animation:tf 2s alternate 2s linear infinite forwards ;
            }
    

这篇关于动画的位移.旋转.呈现等8.7的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!