zoukankan      html  css  js  c++  java
  • css基础3

    transition过渡(与:hover同时使用)
    当元素从一种样式变换为另一种样式时
    兼容到IE10
    规定希望把效果添加到哪个css属性上(规定名称)
    规定效果的时长(一般以秒为单位)时长未规定,默认值为0
    当指针移出元素时,他会组件变回原来的样式
    transition-property: none|all|property;
    transition-property 规定应用过渡的 CSS 属性的名称。【常用】 transition-property: none|all所有属性都将获得过渡效果。|property定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔;
    transition-duration 定义过渡效果花费的时间。默认是 0。 【常用】
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
    transition-delay 规定过渡效果何时开始。默认是 0。

    css3动画是使元素从一种样式逐渐变化为另一种样式的效果。
    css @keyframes规则(规定动画的规则,就能创建由当前央视逐渐改为新样式的动画效果)
    IE九以下的版本都不支持
    创建动画时,请把它捆绑到某个选择器,否则就不会产生动画效果
    通过规定至少以下两项css3动画属性,即可以将动画绑定到选择器:
    规定动画的名称;规定动画的时长
    animationdiv
    {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s; /* Safari 和 Chrome */
    -o-animation: myfirst 5s; /* Opera */
    }

    可以使用0——100%规定

    @keyframes MYfirst
    {0% {background:red;}
    25% {background:yellow;}
    50% {background:blue;}
    100% {background:green;}
    }
    0%开始。100%结束

    from开始
    to结束
    (无限次播放)

    animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
    animation-name 规定 @keyframes 动画的名称。 3
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
    animation-delay 规定动画何时开始。默认是 0。 3
    animation-iteration-count 规定动画被播放的次数。默认是 1。 3
    animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
    animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
    animation-fill-mode 规定对象动画时间之外的状态。

  • 相关阅读:
    推荐.Net、C# 逆向反编译四大工具利器
    逆向工具/反编译工具 集合
    秒杀系统-并发处理
    react动态渲染组件
    通过dom获取react节点
    mac上安装windows触摸板不能右键
    STM32F103智能配网mqtt协议EMQ安卓App远程控制LED采集温湿度ESP8266
    itop4412 基于物联网技术的商品支付系统 毕业设计
    STM32F103 单片机最小系统 核心板 C8T6 MINI 飞控 小车 主控制板
    31865 MAX31865 RTD铂电阻温度检测器 PT100至PT1000传感器模块
  • 原文地址:https://www.cnblogs.com/duanfuying/p/5879431.html
Copyright © 2011-2022 走看看