美文网首页
文字效果

文字效果

作者: 简单的名字吧 | 来源:发表于2017-03-09 23:32 被阅读0次

    H5
    header
    article
    nav
    ....
    选择器:
    querySelectorAll('')
    querySelector('')
    属性:
    data-
    obj.dataset 集合
    class:
    classList
    .add
    .remove
    .contains
    .toggle
    className 先清除所有class再加
    选择器:
    li:nth-child()
    伪类:
    :hover
    :active
    :link
    :visited
    :togget
    :target(**)
    transition:1s all ease 1s
    transform:rotate(20deg)

    @-webkit-keyframes mymove {
       
            from {top:0px;}
            to {top:200px;}
            0%{}
            20%{}
            50%{}
            100%{}
    }
    animation:1s mymove  ease
    

    css3
    颜色模式:
    a)red,blue
    b)#399
    c)rgb(255,255,0)
    d)rgba(255,0,0,1) 不兼容
    应用场景:背景透明、文字不透明
    以前:定位、多个层
    现在:rgba
    --优酷
    阴影:
    所有阴影可以叠加
    文字阴影:
    text-shadow:1px 1px 1px red
    x y 模糊度 颜色
    ----叠加效果!
    text-shadow:100px 2px 4px red,110px 4px 8px blue,120px 8px 16px green;
    文本描边:
    -webkit-text-stroke:2px #fff;
    文字模糊:
    color:rgba(0,0,0,0);
    text-shadow:0 0 100px #fff;
    块阴影--内
    text-shadow:1px 1px 1px 1px red
    x y 模糊度 大小 颜色
    box-shadow:(inset) 1px 1px 1px 1px red
    内 x y 模糊度 大小 颜色
    box-shadow:5px 0 2px red,0 2px 2px green;
    transform:变形
    transform:rotate(45deg)--旋转45deg;
    transform:translate(100px,200px)---平移!
    translate(x,y)
    x正数向右
    y正数向下
    transform:scale(1,2)-------缩放(比例)
    scale(2)
    x轴
    y轴
    transform:skew(0deg,45deg)-----倾斜(度)
    好处:
    物体本身没有发生变化,盒子模型没有改变,不会不会引起浏览器重绘,
    ---性能高!只是视觉上的变化!
    注意:span a 这些行内元素识别这些样式!
    必须的转换:块,行内快!
    简写:transform:多个值
    3D:
    变形
    transform:rotate
    transform:rotateX(180deg)-----高度变矮
    transform:rotateY(180deg)-----宽度变窄
    transform:rotateZ(180deg)-----旋转

    官方网站的登录

    css3时钟:
    以....为中心点!!
    transform-origin:50px 50px;
    找旋转的中心点(默认是正中心)
    transform-origin:x y;
    x与y的交叉处就是中心点!!!

    透视(景深):指的是观察物体的远近的程度!

    persepective(距离)
    
    加给变化的物体
    

    transform:perspective(800px) rotateX(45deg);
    一般来说距离取多少合适?
    800px
    1200px
    官网的作品展示:
    最少5张!
    [l2,l1,cur,r1,r2,,]

    [l1,cur,r1,r2,,,l2]

    [cur,r1,r2,,,l2,l1]

    有点瑕疵:
    1.点块了出事
    2.突然变大
    perspective用法:
    1.加给变化物体
    transform:perspective(1200px) translateX(200px) rotateY(-60deg);
    2.加给父级
    perspective:800px;
    真正的3D!
    transform-style:preserve-3d;---专门给Z轴加空间!

    把2维空间变成三维空间!
    ****想让一个子级在Z轴起来,必须把它的最近的父级变成三维空间!
    backface-visibility:hidden;---背面的可见度!
    立方体:
    6个面!

    相关文章

      网友评论

          本文标题:文字效果

          本文链接:https://www.haomeiwen.com/subject/xjaggttx.html