CSS3核心
@ 姜波 | 星期二,七月 16 日,2019 年 | 2 分钟阅读 | 更新于 星期二,七月 16 日,2019 年

动画

滚动条

<div class="line"></div>
.line {
    width: 980px;
    height: 100px;
    margin: 100px auto;
    border-radius: 10px;

    /* 线性渐变 */
    background-image: linear-gradient(
        135deg,
        yellow 25%,
        green 25%,
        green 50%,
        yellow 50%,
        yellow 75%,
        green 75%,
        green 100%
    );
    background-size: 100px 100px;
    animation: move 2s linear infinite;
}

@keyframes  move {
    from {
        background-position: 0px;
    }
    to {
        background-position: 100px;
    }
}

背景

设置背景对齐位置

background-image: url("1.png");
background-repeat: no-repeat;
background-origin: padding-box;/* padding-box、border-box、content-box */

设置背景裁切

background: url("1.png");
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;;/* border-box、padding-box、content-box */

背景尺寸大小设置

background: url("1.jpg") no-repeat;
background-size: auto;/* auto、200px 200px、cover、contain */

边框

设置边框图片

/* 设置边框图片 */
border-image-source: url("1.png");
/* 边框裁切 */
border-image-slice: 20;
/* 设置边框平铺方式 */
border-image-repeat: stretch;
/* 设置边框宽度 */
border-image-width: 20px;

选择器

属性选择器

[属性名=] {}
[属性名] {}     /* 匹配对应的属性即可 */
[属性名^=] {} /* 以值开头 */
[属性名*=] {} /* 包含 */
[属性名$=] {} /* 以值结束 */

结构伪类选择器

:first-child {}         /* 选中父元素中第一个子元素 */
:last-child {}          /* 选中父元素中最后一个子元素 */
:nth-child(n) {}        /* 选中父元素中正数第n个子元素 */
:nth-last-child(n) {}   /* 选中父元素中倒数第n个子元素 */
  • tip 备注
    • n 的取值大于等于0
    • n 可以设置预定义的值
    • odd[选中奇数位置的元素]
    • even[选中偶数位置的元素]
    • n 可以是一个表达式:an+b的格式

其他选择器

:target {}          /* 被锚链接指向的时候会触发该选择器 */
::selection {}	    /* 当被鼠标选中的时候的样式 */
::first-line {}	    /* 选中第一行 */
::first-letter {}	/* 选中第一个字符 */

过渡

过渡效果

.box {
    width: 343px;
    height: 200px;
    background: url("1.png") no-repeat left top,rgba(0,0,0,.5) url("1.png") no-repeat right bottom;
    transition: all 2s linear;
}

.box:hover {
    background-position: left bottom,right top;
}
css
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接