• 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 的数值。
    ————勇敢的少年啊 快去创造奇迹————
  • 相关阅读:
    oracle 数据库安全审计
    oracle 共享服务器监控
    oralce MTS
    配置一个Oracle共享服务器进程环境需要哪两项参数
    python3 小技巧(2)
    python3 操作注册表
    PYC文件简介
    常见HTTP状态(304,200等)
    用Python模拟浏览器操作
    python3下的IE自动化模块PAMIE
  • 原文地址:https://www.cnblogs.com/masterccc/p/4637780.html
Copyright © 2020-2023  润新知