美文网首页
css3课件

css3课件

作者: lucky_yao | 来源:发表于2020-09-19 10:54 被阅读0次

    第一章 字体属性
    1:css3属性具有兼容性,不兼容IE9以下浏览器,IE9部分兼容。

    2:各大浏览器的内核兼容写法?

    内核是浏览器的核心,作用是渲染页面

    IE -ms-

    火狐 -moz-

    欧朋 -o-

    谷歌 -webkit-

    3:css3属性和标签更主要是用在移动端

    4:文字阴影

    text-shadow:x y blur color, …

    参数

    x 横向偏移

    y 纵向偏移

    blur 模糊距离

    color 阴影颜色

    文本阴影如果加很多层,会很卡很卡很卡

    例子:

    层叠:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
    
    光晕:color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    
    火焰文字:text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
    

    5:文字描边

    webkit-text-stroke strok:宽度 颜色
    

    6:文字排列

    direction  dairuokeshen  定义文字排列方式(全兼容)
    
    rtl 从右向左排列
    
    ltr 从左向右排列
    
    注意要配合unicode-bidi:bidi-override; 一块使用
    

    7:省略号

    text-overflow 定义省略文本的处理方式

    clip 无省略号

    ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

    举例:

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    第二章 背景属性
    1:背景阴影:

    box-shadow:x y 模糊度(可选) 颜色;

    box-shadow: 20px 20px 20px yellow,30px 30px 30px green;

    2:背景渐变:

    分为2种:

    普通渐变 linear 径向渐变 radial

    /background:-webkit-linear-gradient(top,yellow,blue);/

    /background:-webkit-linear-gradient(left,yellow,blue,green,pink);/

    /background:-webkit-linear-gradient(top right,yellow,blue,green,pink);/

    /background:-webkit-linear-gradient(top right,yellow 50%,blue 20%,green 30%,pink);/

    /background:-webkit-linear-gradient(top,yellow 200px,blue 100px,);/

    background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));*/

    background: -webkit-radial-gradient(50%,yellow, red,blue,pink,green);*/

    第三章 变形
    transform:变换/变形

    transition:1s all;

    transition:过渡

    translate:移动

    translate(X px,Y px);

    rotate:旋转/负值就是倒转;

    rotate(-360deg);

    scale:缩放

    scale(x,y)

    skew:扭曲

    skew(x deg,y deg)

    第四章 过渡
    transition:过渡

    过渡时间

    transition-duration: 3s;

    过渡属性(定义宽还是高)

    transition-property: all;

    过渡函数(运动的方式)

    transition-timing-function: ease;

    过渡延迟时间

    transition-delay: 4s;运动方式

    ease:开始和结束慢 中间快 相当于cubic-bezier(0.25, 0.1, 0.25,1)

    ease-in:(加速) 开始慢 相当于cubic-bezier(0.42, 0, 1, 1)

    ease-in-out:先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)

    ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1)

    linear:匀速 相当于cubic-bezier(0, 0, 0.58, 1)-webkit-transition: 2s width;

    safari浏览器需要加前缀,-webkit- ,其他浏览器不需要添加

    transition: 2s width, 4s height, 1s background-color;

    transition: 2s width, 2s 2s height, 1s 4s background-color;

    transition: 3s 2s width, 4s 2s height, 8s 4s background-color;

    过渡: 时间 延迟时间 样式 方式

    第五章 动画
    动画属性

    animation

    animation-name:动画的名字

    animation-duration:动画完成一个周期所花费的时间(秒/毫秒)

    animation-timing-function:动画的速度曲线

    (linear ease ease-in ease-out ease-in-out 贝塞尔曲线)

    animation-delay:动画何时开始

    animation-iteration-count:动画被播放的次数 number/infinite(无限循环)

    animation-direction:动画是否在下一周期逆向的播放 normsl/alternate(反向播放)

    animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放)

    animation-fill-mode:动画时间之外的状态

    规定动画/帧数

    @keyframes name{

    from{}

    to{}

    }

    @keyframes name{

    0%{}

    10%{}

    20%{}

    30%{}

    40%{}

    50%{}

    60%{}

    70%{}

    100%{}

    }/step-end:以跳跃方式运动/

    /step-start 以跳跃方式运动/

    第六章 3D
    1:

    transform-origin:基点

    定义x轴的写法 :left/center/right/length/%

    定义Y轴的写法 :top/center/bottom/20px/50%

    transform-origin:x y;

    2:

    等价写法

    transform: translate3d(30px,30px,800px)

    transform:translateZ(800px) translateX(30px) translateY(30px);

    transform:translateZ(800px) translate(30px,30px);

    3:

    transform-style:把2D转换成3D/ preserve-3d;

    perspective: 像素px;

    perspective 属性定义 3D 元素视图的距离,以像素计。

    当元素定义 perspective 属性时,其子元素会获得透视效果

    perspective翻译过来叫 景深

    相关文章

      网友评论

          本文标题:css3课件

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