zoukankan      html  css  js  c++  java
  • css的一些总结2

    列表样式

    1.list-style 头部图案 比如:disc实心圆  circle空心圆

    2.list-style-image 自定义头部图案 比如:url(a.jpg)

    变形样式(下面是真的要复制黏贴了)

    translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    transform:translate(50px,200px); /* 最好有前缀 */

    transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。

    translateX(): 指定对象X轴(水平方向)的平移

    translateY(): 指定对象Y轴(垂直方向)的平移

    rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义

    transform: rotate(45deg);
    transform-origin:60% 10%;

    scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

    -moz-transform:scale(1,1.5); /* 貌似是倍数 */

    skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    -moz-transform:skew(30deg,0deg); /* deg是指度数 */

    translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

    -moz-transform:translate3d(30px,60px,20px);/* 我真的搞不懂跟2d平移有什么区别*/

    过渡动画(!记得要先申明初始状态和最终状态)

    1.transition-property 要过渡的属性 比如: transition-property:all(全部属性); 或者 transition-property:width,height;

    2.transition-duration 过渡的时间 比如 :transition-duration:.5s  ; 0.5s或者 5s

    3.transition-timing-function:过渡函数(速度曲线) 比如:

      ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))

      linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))

      ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

      ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

      ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))

      cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)

    4.transition-delay 过渡延迟时间 比如.1s或者1s

     transition简写规则是 前面的秒数是过渡时间 后面的是过渡延迟时间 除此之外没有限制

    自定义动画

    1.animation-name 动画(关键帧 当动画播完以后会回归原来状态)名称 比如:aaa bbb(不要用空格和-)

    2.@keyframes 关键帧(前缀是@-moz-keyframes这样的)比如:

     @keyframes kkk{

     0%{color:#000;}

     50%{color:#0f0}

     100%{color:#ff0;}}

     或者:

     @keyframes hhh{ from {left: 0; } to {left: 800px; } }

    3.animation-duration 动画时间 比如.3s  2s

    4.animation-timing-function 动画过渡速度曲线 值同上

    5.animation-delay 动画延迟时间 比如:.1s 或者1s

    6.animation-iteration-count 动画执行次数 比如2 (2次) infinite(不断重复)

    7.animation-direction 动画播放顺序 比如:

     normal:正常方向

     reverse:反方向运行

     alternate:动画先正常运行再反方向运行,并持续交替运行

     alternate-reverse:动画先反运行再正方向运行,并持续交替运行

    8.animation-play-state 动画状态 比如running运动 或paused暂停

    9.animation-fill-mode 动画时间之外的状态 比如:

     none:默认值。不设置对象动画之外的状态

     forwards:设置对象状态为动画结束时的状态

     backwards:设置对象状态为动画开始时的状态

     both:设置对象状态为动画结束或开始的状态

      animation简写规则是 名字 过渡时间  延迟时间 

  • 相关阅读:
    [Oracle][Partition][Controlfile]Partition 操作是否和 Controlfile有关?
    [Oracle]如何观察Table 的各种Lock 之间的冲突
    [Oralce][InMemory]如何确定一个表已经被Populate 到In Memory 中?
    Arduino和C51之串口通信
    XC文件管理器-打造优美易用的文件管理器
    Android 控件进阶修炼-仿360手机卫士波浪球进度控件
    Android控件进阶-自定义流式布局和热门标签控件
    Windows开发之VC++仿QQ迷你首页(迷你资讯)
    Android自定义控件进阶-打造Android自定义的下拉列表框控件
    Android 自定义控件-高仿猎豹清理大师自定义内存开口圆环控件
  • 原文地址:https://www.cnblogs.com/zhiwudenengliang/p/5770693.html
Copyright © 2011-2022 走看看