• web@css样式进阶--图形字体、动画、显隐....


    1.图形字体
    <i class="fa fa-heart"></i> 操作类名,需
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">导入.css
    2.过渡动画
    transition: 过渡属性 过渡时长 运动速度 延迟时间;
    /*持续时间*/transition-duration: .3s;
    /*延迟时间*/transition-delay: 0.1s;
    /*过度曲线*/transition-timing-function: linear;
    /*过度属性*/transition-property: width,background-color;
    /*整体设置*//*transition: all .3s .1s linear;*/
       transition: .3s cubic-bezier(0,1,1,1);
    3.形变动画
    transform:translate(平移 px) rotate(旋转 deg) scale(比例 数字)
    4.动画
     @keyframes 动画名 {
       0%{样式}
       ...
       100%{样式}
    }
    /*标签添加动画样式*/
            div{
    /*绑定动画名*/animation-name: a1;
    /*持续时间*/animation-duration: 1.5s;
    /*延迟时间*/animation-delay: 0.5s;
    /*动画结束位置backwards forwards*/
       /*animation-fill-mode: forwards;*/
    /*运动次数来回算1次 infinite*/
                animation-iteration-count: 1;
    /*alternate来回alternate-reverse:终点开始来回 */
                /*animation-direction: alternate;*/
    /*动画状态 running paused*/
                animation-play-state: paused;
    /*整体设置*/animation: a1 1s 2 linear alternate running ;
    }
    5.盒子、文字阴影
    box-show:x轴偏移(可负) y轴偏移(可负) 虚化程度 阴影宽度 阴影颜色 内外阴影inset/outset
    text-shadow:x轴偏移(可负) y轴偏移(可负) 虚化程度 阴影颜色
    6.标签的隐藏
    /*脱离文档流*/display:none
    /*可以用来做动画透明度*/opacity:0
    /*隐藏*/visibility:
    个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见位置还在
    visible
    默认值。元素是可见的。
    hidden
    元素是不可见的。
    inherit
    规定应该从父元素继承 visibility 属性的值。
    7.a标签的4中状态
    <!--第一种状态: link       (默认)正常状态(初始状态,不用鼠标去触碰)-->
    <!--第四种状态: visited  点击之后()-->
    <!--第二种状态: hover     鼠标放上去的时候(但不点击)-->
    <!--第三种状态: active      点击的时候(鼠标还没放开)-->
    8.其他常用:
    /*超出框做处理*/ overflow:visible(默认)/hidden/scroll/auto/inherit(继承父的overflow)
    /*垂直对齐方式*/vertical-align:baseline(默认)/sub/super/top/text-top/middle/bottom/text-bottom 常用使用display:table-cell;vertical-align:middle;
    /*字体超出框处理*/word-wrap:break-word;
    /*改变按钮和其他控件的外观,使其类似于原生控件*/
    -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
    此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。
    -webkit-appearance:none | button | button-bevel ....

  • 相关阅读:
    python 网页cookie的使用
    python PIL 图像处理操作
    numpy linalg模块
    Robot Framework自动化测试Selenium2Library库详细用法
    Numpy 基本除法运算和模运算
    Java基础系列--基础排序算法
    java基础系列--SecurityManager入门(转)
    Java基础系列--ArrayList集合
    Java基础系列--instanceof关键字
    Java基础系列--throw、throws关键字
  • 原文地址:https://www.cnblogs.com/3sss-ss-s/p/9901136.html
Copyright © 2020-2023  润新知