前端入门笔记学习CSS3

老规矩，每日一句正能量！

人类一生的工作，精巧还是粗劣，都由他每个习惯所养成。──富克兰林

然后就是css3的笔记

01.css3

1.浏览器前缀

 

2.CSS3新增选择器

关系选择器~ //兄弟选择器：选择该元素后面的同级的兄弟元素

 属性选择器：

 伪类选择器：

 

注意：

1.nth-child(n)中的n可以是数字、关键字和公式。

数字:选择第n个子元素，里面数字从1开始；

关键字：even偶数、odd奇数；

公式：常见的公式如下：（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被

忽略。

2n：偶数；2n+1：奇数；5n：五的倍数；n+5：从第五个开始（包括第五个）到最后；-n+5：前五个

（包含第五个）......

3.css3边框

圆角效果border-radius

单位可以是px,%,em,顺序是左上角开始顺时针走

阴影效果box-shadow

语法：box-shadow:h-shadow v-shadow blur spread color inset;

 

彩虹七色：赤red、橙orange、黄yellow、绿green、青cyan、蓝blue、紫purple

4.文本与字体

1.text-overflow

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出

语法：text-overflow:clip/ellipsis

clip：表示剪切，默认值

ellipsis：表示显示省略标记

2.阴影text-shadow

1.文本阴影

水平 垂直 模糊 颜色

语法：text-shadow:h-shadow v-shadow blur color;

 

2.盒子阴影

box-shadow:1.水平 2.垂直 3.模糊 4.大小 5.颜色 6.内外

3.嵌入字体@font-face

语法： @font-face{ 
    font-family:字体名称; 
    src:字体文件在服务器上的相对或绝对路径;
}

 

5.CSS3背景

语法：background-size:auto | <长度值> | <百分比> | cover | contain

1.背景透明度

1.rgba（）

2.opacity不透明度 0-1 ，0是透明，1是不透明

6.CSS渐变色

1.线性渐变

语法：background-image: linear-gradient(to right, red , yellow);

第一个参数的to right的to到哪就是去哪个方向。

2.径向渐变

background-image: radial-gradient(color-stop1, color-stop2, color-stop3);

以中心点为原点，向四周渐变。

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），颜色值

后面可以加上百分比或者px用来抑制颜色占比。

7.过渡transition

四个属性

1.过渡样式名 transition-property：width;

取值 常用all，具体样式名none

2.过渡花费时间（动完的时间，一般是1-3秒）

transition-duration:2s;

3.过渡等待时间

transition-delay:500ms;

4.过渡时间

transition-timing-function:linear;(匀速)

简写样式transition

transition：transition-property transition-duration transition-timing-function transition-delay；

默认值： all 0 ease 0

注意：transition-duration的值必须写；没有顺序要求，浏览器默认以第一个时间为持续时间

过渡放在原来的选择器中，移入移出都有过渡效果

8.动画

CSS3 动画分为两步：

1.@keyframes：创建动画，

2.animation：设置动画属性；来调用动画

动画是复杂的过渡，过渡是简单的动画

@keyframes changecolor{ 
    0%{
        样式 
    } 
    ...... 
    100%{ 
        样式 
    } 
}

animation：动画名 执行时间 执行方式 等待时间 执行次数 播放状态 播放方向...
animation-name: none | IDENT;动画名
animation-duration: time s/ms;动画播放时间
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out 动画播放方式
animation-delay:<time> s/ms 动画开始播放时间
animation-iteration-count: infinite | <number>动画播放次数
reverse反着播放 alternate 奇数正向播放，偶数反向播放
animation-play-state：running/paused

9.transform2D转换

1.translate 移动的位置

transform: translate(x, y) 终点的坐标
transform: translateX(n) 
transfrom: translateY(n)

2.rotate旋转

/* 单位是：deg */ 
transform: rotate(度数)

设置元素旋转中心点

transform-origin: x y;

3.scale是缩放

transform: scale(2, 2) 宽和高都放大了两倍

scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4.skew是倾斜

transform：skew（45deg,45deg）deg是度数

简写样式：

transform: translate() rotate() skew() scale()

div:hover { 
    transform: translate(200px, 0) rotate(360deg) skew(5deg) scale(1.2) 
}

好啦，今天的分享就到这里，c3的主要难点在于2D转换以及动画的知识的理解与应用。需要勤加练习，每天都要学点东西哦。后面还会陆续更新练习题目以及js的知识点。