• css 3d 动画 相关


    transform-style: preserve-3d; 设置3D模式
    perspective:700px ;属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
    perspective-origin:50% 50% ;属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。


    设置动画
    @keyframes mymove
    { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }

    div
    {
    100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite; 绑定上面设置好的动画 时间 infinite规定动画应该无限次播放
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
    }

    animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

    
    

    描述测试
    linear 动画从头到尾的速度是相同的。 测试
    ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
    ease-in 动画以低速开始。 测试
    ease-out 动画以低速结束。 测试
    ease-in-out 动画以低速开始和结束。 测试
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
    ————勇敢的少年啊 快去创造奇迹————
  • 相关阅读:
    查看内置命令和非内置命令帮助的几种方法(man、help、info)
    手写js的insertAfter
    Java 单链表简单实现
    StudentMain控屏后如何关闭
    python3 twisted问题
    python3 you-get
    数据库方言(这是啥玩意儿?)
    vi/vim用法
    sublime text3
    数据库命令大全(也不是很全哈)
  • 原文地址:https://www.cnblogs.com/masterccc/p/4637780.html
Copyright © 2020-2023  润新知