zoukankan      html  css  js  c++  java
  • 3D与动画

    • 形成3D空间

    transform-style:preserve-3d;

    • 景深:观察物体时,近大远小

    perspective:800px;(给父级元素添加)

    • 观察点位置设置

    perspective-origin:;
                                left right top bottom px

    • 背面不可见

    backface-visibility:;
                               hidden 不可见
                               visible 可见

    animation 

    1、定义动画

    @keyframes name{

    from{}起始位置
    to{}终点位置
    }

    @keyframes name{

    0%{}起始位置
    25%{}过程1
    ...
    100%{}终点位置
    }

    2、调用动画

    animation-name:mz;                      动画名字
    animation-duration:;                      运动时间
    animation-delay:;                           延迟时间
    animation-iteration-count:infinite;  运动次数:无限次(数字)
    animation-direction:reverse;          运动方向:逆时针
                                   alternate                           先顺再逆(奇顺偶逆)
                                   alternate-reverse              先逆再顺(奇逆偶顺)
    animation-timing-function:;        运动类型

    linear:线性过渡
    ease:平滑过渡
    ease-in:由慢到快
    ease-out:由快
    ease-in-out:由慢到快再到慢
    step-start:马上跳到动画每一结束桢的状态

    animation-play-state:running/paused;动画状态:运动/暂停

    综合写法
    animation:名字 运动时间 速度 延迟时间 次数;

     

    animation vs transition

    • 相同点:都是随着时间改变元素的属性值。

    • 不同点:transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,css3的animation就需要明确的动画属

     

    选择器:target{} 当元素被点击时的指向,发生样式的改变

    css样式 圆角

    border-radius:;
    元素是正方形    宽度值一半的px    50%   正圆
    元素是长方形    较小值的一半px              半圆
                             50%                           椭圆

  • 相关阅读:
    SSH框架(一)Hibernate
    我要创业啦(基于MVC的在线教育系统)
    面向对象语言高并发技术数据库部分(一)----MyCat做MySQL负载均衡(享学课堂,咕泡学院听课笔记)
    数据库优化MySQL数据库性能优化(享学课堂听课笔记)
    系统集成项目管理工程师考试(经历)
    CSND使用(一直在学习)
    仓央嘉措不负如来不负卿
    Java与.net的选择和比较
    .Net编程之Web Service 和WCF的历史和特性
    .Net项目之分享自己的MVC+angularjs项目经历
  • 原文地址:https://www.cnblogs.com/strongerPian/p/12487638.html
Copyright © 2011-2022 走看看