• CSS3新特性学习(2)


    1.2D转换之移动translate(类似定位)

    1.语法
    transform:translate(x,y);
    transform:translateX(n);
    transform:translateY(n);
    2.重点
    1.定义2D转换中的移动沿着X和Y移动元素
    2.translate最大的优点,不会影响到其他元素位置
    3.translate中的百分比单位是相对于自身的translate:(50%,50%)
    4.对行内元素没有效果
    

    2.2D转换中心点transform-origin(我们可以设置元素转换的中心点)

    1.语法
    transform-origin:x y;
    2.重点 
    1.注意后面的参数x和y用空格隔开
    2.x和y默认转换的中心点是元素的中心点(50% 50%)
    3.还可以给x y设置像素或者方位名词(top bottom left right center)
    

    3.2D转换之缩放scale(可以给元素放大缩小)

    1.语法
    transform:scale(x,y);
    2.重点
    1.注意其中的x y 用逗号分隔
    2.transform:scale(2,2);宽和高放大了两倍
    3.transform:scale(2);宽和高放大了两倍
    4.transform:scale(0.5,0.5);缩小0.5倍
    5.最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。
    

    4.2D转换综合性写法

    注意:
    同时使用多个转换,且格式为:transform:translate(),rotate(),scale()等
    其顺序会影响转换的效果
    当我们同时有位移和其他属性的时候,要把位移放到最前。
    

    5.CSS3动画

    5.1.动画的基本使用
    制作动画的步骤
    1.定义动画
    2.调用动画
    语法:用keyframed定义动画(类似定义类选择器)
    @keyframes 动画名称{
    0%{
    width:100px;
    }
    100%{
    200px;
    }
    调用:animation-name:动画名称;
    animation-during:持续时间;
    

    5.2动画属性
    属性                              描述
    @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 ,还有pasued
    animation-fill-mode              规定动画结束后状态保持forwards,回到起始位置backwards
    

    5.3动画简写属性
    animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
    

    5.4速度曲线调节
    值                          描述
    linear                  动画从头到尾匀速
    ease                    默认,动画以低速开始然后加快到结束变慢
    ease-in                 动画以低速开始
    ease-out                动画以低速结束
    ease-in-out             动画以低速开始和结束
    steps()                 指定函数中的间隔数量(步长)
    

    6.3D转换

    1.移动translate3d
    transform:translate3d(x,y,z)
    
    2.透视perspective
      1.产生的视觉近小远大
      2.透视的单位是像素
      3.透视写在被观察元素的父盒子上面
    
    3.3D旋转rotate3d
    transform:rotateX(deg)沿着X正方向旋转deg度  左手法则,大拇指指向x轴正向
    transform:rotateY(deg)沿着Y正方向旋转deg度  左手法则,大拇指指向y轴正向
    transform:rotateZ(deg)沿着Z正方向旋转deg度  
    transform:rotate3d(x,y,z,deg)沿着正方向旋转deg度,其中xyz显示1或0
    
    4.3D呈现transform-style
    控制子元素是否开启三维立体环境
    transform-style:flat子元素不开启3D空间默认的
    transform-style:preserve-3d子元素开启立体空间
    代码写给父级,但是影响的是子盒子
    这个属性很重要后面必用
  • 相关阅读:
    php实现上传图片保存到数据库的方法
    支付宝集成——如何在回调地址中使用自定义参数
    QQ音乐的各种相关API
    xampp默认mysql密码设置,修改mysql的默认空密码
    node.js 初体验
    php调用empty出现错误Can't use function return value in write context
    ecshop数据库操作函数
    ecshop中$user对象
    为什么我的联想打印机M7450F换完墨粉之后打印机显示请更换墨粉盒?这是我的墨盒第一次灌粉·、
    PHP中获取当前页面的完整URL
  • 原文地址:https://www.cnblogs.com/xing--/p/12776121.html
Copyright © 2020-2023  润新知