CSS动画与LESS、SASS框架

ssq11
772 阅读10分钟

实体字符

可通过html代码、css代码来实现

调整实体字符在页面的显示方向：

顺时针转换方向

transform: rotate(361deg)

字体字符

通过link www.fontawesome.com.cn/引入字体字符样式表

控制大小需要在后面加一个类名单独控制

类名前加上 fa-spin可以让图标旋转

fa-pulse可以让图片八个方位旋转

1、通过bootCDN 搜索font-awesome 选择4.7.0版本，复制link路径min.css
2、打开字体图标www.fontawesome.com.cn，复制图标代码

CSS文本效果

添加文本阴影：text-shadow: 5px 5px #ff0000;

h1
{
    /* 三个值分别表示水平阴影，垂直阴影，模糊的距离，至少要有两个值 */
    text-shadow: 5px 5px 5px #FF0000;
}

添加盒子阴影：box-shadow: 5px 5px 5px pink;

div
{
    width:300px;
    height:100px;
    background-color:yellow;
    /* 前三个值与文本阴影表示的相同，盒子阴影可以取四个值，第四个值越大，盒子阴影的范围越大 */
    box-shadow: 10px 10px 5px #888888;
}

写 box-shadow 的依次顺序为：

h-shadow   v-shadow   blur   spread   color   insect
​
水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影
也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
当容器中的内容不能完全显示时，控制多余部分的显示样式

1、显示省略号：text-overflow: ellipsis;

2、裁剪：text-overflow: clip;

.box5 {
    width: 300px;
    height: 100px;
    overflow: hidden
     /* 溢出的文本会显示省略号 */
    text-overflow: ellipsis;
    /* 溢出的文本会直接被截断 */
    text-overflow: clip;
}
允许长文本换行:

字换行：p {word-wrap:break-word;}

单词拆分换行：p {word-break: keep-all;}

p{
    width: 11em;
    border: 1px solid;
    /* 强制换行 */
    word-wrap:break-word;
}
不生成盒子，内容不显示：display：none；

不显示内容，会生成盒子占位置：visibility：hidden；

2D转换

translate() 方法

1、转换位置：transform

translate（50px，100px）是从元素左边移动50个像素，并从顶部移动100像素。

.box2{
    width: 400px;
    height: 200px;
    background-color:darksalmon;
    /* 要给两个值  第一个值表示水平位置，第二个值表示垂直位置 */
    transform: translate(100px,200px);
}

2、transform:转换角度

rotate(90deg)在一个给定度数顺时针旋转的元素。允许负值，这样是元素逆时针旋转。使它旋转必须要更改display的值为行内块盒

div
{
    width:200px;
    height:100px;
    background-color:yellow;
    /* 使它旋转必须要更改display的值 */
    display: inline-block;
    transform:rotate(30deg);
}

3、转换大小：transform:scale(2,3);

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

.box3{
    width: 400px;
    height: 200px;
    background-color:rgb(203, 233, 122);
    /* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度 */
    transform: scale(2,3);
}

4、transform: skew(30deg,20deg);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

  • skewX();表示只在X轴(水平方向)倾斜。

  • skewY();表示只在Y轴(垂直方向)倾斜。

    matrix() 方法

    matrix()方法和2D变换方法合并成一个。

    matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

    利用matrix()方法旋转div元素30°

    div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
画三角形：
设置四个方向的边框线，其他三个方向设置透明transparent

置换元素

1、置换元素就是浏览器根据元素的标签和属性，来决定元素的具体展示内容。

一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。置换元素一般有内在尺寸，所以具有width和height，可以进行设定。

HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

2、非置换元素

可以认为除去置换元素都是非置换元素

CSS动画

创建动画：

@keyframes myfirst
{
    /* 起始 */
    from {background: red;}
    /* 结束 */
    to {background: yellow;}
}

绑定动画：

div
{
    animation: myfirst 5s;
}

.mydiv3{
    width: 250px;
    height: 250px;
    position: absolute;
    animation: mydiv3 3s linear infinite;   
    /* infinite表示无限循环 */
}
@keyframes mydiv3{
    0%{
        left: 0;
        top: 0;
    }
    25%{
        left: 1000px;
        top: 0;
    }
    50%{
        left: 1000px;
        top: 600px;
        transform: rotateX(150deg);   
    }
    75%{
        left: 0;
        top: 600px;
    }
    100%{
        left: 0;
        top: 0;
    }
    0%{
        background-color: pink;
    }
    20%{
        background-color: blueviolet;
    }
    50%{
        background-color: chartreuse;
    }
    80%{
        background-color: darkorange;
    }
    100%{
        background-color: pink;
    }
}

 /* 为了更精确的效果，可将from、to改为百分数 */
@keyframes mymove{
0%{
    background-color: rgb(219, 163, 219);left: 0;top: 0;
}
20%{
    background-color: greenyellow;left: 200px;top: 200px;
}
50%{
    background-color: indianred;left: 150px;top: 70px;
}
80%{
    background-color:lightseagreen;left: 50px;top: 200px;
}
100%{
    background-color: rgb(219, 163, 219);left: 0;top: 0;
}
 .box2{
    width: 100px;
    height: 100px;
    background-color: rgb(219, 163, 219);
    position: absolute;
    animation: mymove linear 5s infinite;
}

LESS框架与SASS框架

三角形

宽高为0，设置四周边框，其中一边设置透明

div{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid green;
    border-bottom: 100px solid transparent;
    border-left: 100px solid pink;
}

less与CSS区别

1、注释：

单行注释：// 不会出现在css里面

2、嵌套

可以根据dom树（html文档结构）嵌套

3、可以定义变量

全局作用域：写在最外面，没有包含块，可以复用

局部作用域：写在包含块里面，其他元素不能复用

4、可以进行四则运算（加减乘除），颜色不能进行运算
5、mixins混入，声明一个样式快，直接运用

声明变量：@

@mycolor:red;
@width:300px;
@height:100px;
​
.box1{
    width: @width;
    height: @height;
    background-color: @mycolor;
}

全局作用域：

// 其他元素可以复用当前变量
@mycolor:red;
@width:300px;
@height:100px;
.box1{
    width: @width;
    height: @height;
    background-color: @mycolor;
}
.box2{
    width: @width;
    height: @height;
    background-color: @mycolor;
}

局部作用域：

//声明块里面的变量 其他元素不能复用
//访问不到变量，会报错
.box3{
    @masize:30px;
    font-size: @masize;    
}
.box4{
    font-size: @masize;
}
​

嵌套：

直接写到父元素里面，css里面会以后代选择器的方式显示

 <div class="box5">
        <p>王盗盗</p>
        <p>
            <a href="">盆鱼宴</a>
        </p>
    </div>

.box5{
    width: @width;
    height: @height;
    p{
        width: 50px;
        height: 50px;
        background-color: pink;
    }
    a{
        text-decoration: line-through;
    }
}

mixins（混入）

直接引入其他带有声明块的（class）属性

.border{
    border: 2px dotted;
}
.box6{
    width: @width;
    height: @height;
    .border;
}

默认不带值

用的时候需要给他传值

.common(@radius,@padding,@color){
    border-radius: @rodius;
    padding: @padding;
    color: @color;
}
//设置值之后传回.common计算
.box7{
    width: @width;
    height: @height;
    background-color: @mycolor
    .common(100%,30px,pink);
}
.box8{
    width: @width;
    height: @height;
    background-color: @mycolor
    .common(100%,30px,pink);
}

带值

.common(@radius,@padding:30px,@color:green){
    border-radius: @radius;
    padding: @padding;
    color: @color;
}
.box9{ 
    width: @width;
    height: @height;
    background-color: @mycolor;
    .common(100%,@padding,@color);
}

不带值(要传值)的写在最前面,不传值的写在后面，可以不写

.common(@radius：20%,@padding：20px,@color){
    color: @color;//不带值，需要传值的写在最前面
    border-radius: @radius;
    padding: @padding;    
}
.box9{ 
    width: @width;
    height: @height;
    background-color: @mycolor;
    .common(pink,@radius，@padding//不传值的写在后面，可以不写);
}

两个都有值的时候，优先使用距离最近的值

.common(@radius,@padding:30px,@color:green){
    border-radius: @radius;
    padding: @padding;
    color: @color;
}
.box9{ 
    width: @width;
    height: @height;
    background-color: @mycolor;
    .common(100%,50px,pink);
}
//padding会取50px的值

可以进行四则运算，除号需要用括号包起来

 /* 减号前后要空一格*/
.common(@radius,@padding,@color:green){
    border-radius: @radius;
    padding: @padding;
    color: @color;
}
.box10{ 
    width: (@width/2);
    height: （@height /3）;
    background-color: @mycolor;
    .common(100%,50px,pink);
}

SCSS

什么时候声明变量

1、该值至少重复出现2次

2、该值至少可能被更新一次

3、该值所有的表现都与变量有关

通过@include引用混合宏
/*default表示默认值*/
$mycolor:pink !default;
$margin:20px 0;
/*使⽤@mixin声明了⼀个混合宏后，需要使⽤ @include 来调⽤声明好的混合宏 
 混合宏传多个参数与less的混入规则相同*/

​
// 混合宏 声明变量
@mixin border-radius{
    border-radius: 30%;
}
button{
    //调用混合宏
    @include border-radius;
}

继承

通过@extend 来继承已经存在的样式块
.button {
    border   : 1px solid #ccc;
    padding  : 5px 10px;
    font-size: 20px;
}
.box {
    background: #f36;
    color     : white;
    @extend .button;
}
.box {
    background: #ddd;
    color     : #000;
    @extend .button;
}

占位符

/*占位符 %zhanwei声明的代码如果不被@extend调⽤的话，不会产⽣任何代码。取代从前CSS中的代码冗余的情形。*/
%zhanwei {
    margin-top: 5px;
    padding-top: 5px;
}
/*这段代码没有被 @extend 调⽤，他并没有产⽣任何代码块，只是静静的躺在你的某个 SCSS ⽂件中。
只有通过 @extend 调⽤才会产⽣代码：*/
.size {
    width: 100px;
    height: 100px;
}
.box4 {
    @extend .size ;
    background-color: $mycolor;
    @extend %zhanwei;
}

响应式布局

针对不同屏幕显示不同效果

媒体查询

媒体查询可以控制在不同屏幕宽度显示的效果

1、通过@media 关键字定义媒体查询

2、min-width 屏幕最小宽度

3、max-width 屏幕最大宽度

4、给定范围时，通过 and 连接

浏览器视口小于600px时
.box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
         @media (max-width:600px)/* 视口宽度小于600px */{
             .box1{
                 width: 600px;
                 height: 600px;
                 background-color: yellow;
             }
         }
浏览器视口大于或等于600px时
.box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        /* 屏幕（浏览器视口）宽度大于或等于600时 生效*/
         @media (min-width:600px){
            .box1{
                width: 500px;
                height: 500px;
                background-color: pink;
            }
        }
另一种写法 给定范围通过and连接
@media screen and (max-width:600px){
        }
屏幕宽度在600-1000之间时
 .box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        @media (min-width:600px) and (max-width:1000px){
            .box1{
                width: 600px;
                height: 600px;
                background-color: pink;
            }
        }
屏幕宽度在1000-1600px时
.box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        @media (min-width:1000px) and (max-width:1600px){
            .box1{
                width: 600px;
                height: 600px;
                background-color: orange;
            }
        }

单独创建媒体查询css样式，通过link引入

设置media范围

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./day16-1.css" media="(max-width:600px)">
    <link rel="stylesheet" href="./media600.css" media="(min-width:600px) and (max-width:1000px)">
    <link rel="stylesheet" href="./media1000.css" media="(min-width:1000px) and (max-width:1600px)">
</head>
<body>
    <div class="box1"></div>
</body>
</html>

media600.css

@media (min-width:600px) and (max-width:1000px){
    .box1{
        width: 500px;
        height: 300px;
        background-color: blue;
    }
}

media1000.css

@media (min-width:1000px){
    .box1{
        width: 600px;
        height: 300px;
        background-color: pink;
    }
}

开发方式

渐进增强，优雅降级

渐进增强：更新新功能、新人物、新玩法等

优雅降级：特殊性企业，为了保证安全等，一直保持低版本

业务挂钩，用户群体

开发采用的方式跟项目类型和所针对的用户群体有关，不同项目有不同的开发方式

浏览器兼容

浏览器兼容问题

因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不同意的情况

浏览器内核也称为引擎，渲染引擎

不同的浏览器内核处理同一段代码的时候思路不一样

浏览器间的内核差异是产生兼容性问题的根本原因

浏览器内核排版引擎JS引擎
IETridentTrident、EdgeHTMLJScript
FirefoxGeckoGeckoTraceMonkey
chromeWebkitWebkit、blinkV8
safariWebkitWebkitSquirreFish Extreme
operaprestoprestoCarakan

浏览器的工作模式常被称为渲染模式

到了09年3月19日，微软发布的IE8重新定义了“标准模式”，再次增强了对规范的支持，同时，为了保持对IE7的支持，IE8增加了“准标准模式”，于是IE8就分成了标准模式、准标准模式、混合模式

Hack

CSS Hack有三种实现方式

1、CSS 类内部的 Hack

2、CSS 选择器的 Hack

3、HTML 头部的 Hack

lte：less than or equal to 的简写意思是小于等于
lt：less than小于
gte：greater than or equal to大于等于
gt：greater than大于
！：不等于

厂商前缀

<style>
    div{
        /*火狐*/
        -moz-transform: ;
         /*欧朋*/
        -o-transform: ;
         /*微软*/
        -ms-flex: ;
         /*苹果*/
        -webkit-animation: ;
    }
</style>
avatar
文章
阅读
粉丝