Css3 设置背景 设置动画

 

选择器的使用，利用border-radius属性将矩形调整为其他图形，利用box-shadow给图形附加内阴影或外阴影，使用filter给图片附加滤镜属性，学到10种滤镜的用法和区别，在使用多个滤镜时，用空格隔开。

笔记

CSS3

1. CSS3选择器

1. 属性选择器

等于 开头^ 结束$ 包含*

1. 连字符（~）

针对一个元素的同一个父级节点的所有兄弟级别元素（排在元素下面的）

1. 伪类选择器

first-child  last-child  nth-child(n)  only-child(某个元素是它父元素唯一的子节点)  empty(当元素为空的时候被选中)  ::first-letter(内联元素无法使用，选中文本的第一个字母，此处双冒号)  ::first-line(选中文本首行)  自动换行和人为换行都只能选择第一行

::before 在元素之前

::after 在元素之后

语法：xx::before{content:”xxx”}

outline 轮廓 边框描边常常出现在input里面，使用before after时必须书写content

1. 阴影

盒子阴影  box-shadow：A B C D；

文本阴影  text-shadow：A B C D；

A表示左右（正数右）B表示上下（正数下）C表示模糊程度（阴影大小）D表示颜色

多重阴影  box-shadow：2px 2px 2px red, 4px 4px 2px blue；中间使用，逗号隔开

内阴影 使用inset  文字阴影没有内阴影

1. 字体类型

firefox、Chrome、Safari以及Opera支持.ttf和.otf的字体

IE9+仅支持.eot类型的字体

cursor：pointer  鼠标手指

兼容写法

@font-face{

          font-family：“xxx”;

          src:url(“xxx.eot?#iefix)format(“”)

}

1. 图片美化

可设置 椭圆 圆形 缩略图图片

border-radius    50%为椭圆。设置正圆的话调整宽高为一样

1. 滤镜（filter）  filter : grayscale(90%)

灰度  grayscale  单位是%

褐色  sepia  单位是%

饱和度  saturate  单位是%

色相反转  hue-rotate  单位是deg（度）

反色  invert  单位是%

透明  opacity  单位是%

亮度  brightness  单位是%

对比度  contrast  单位是%

模糊  blur  单位是px像素

阴影  drop-shadow  单位是px像素

使用多个滤镜时，中间用空格隔开

 

 

八

内容大纲

背景渐变时的类型，线性渐变、径向渐变、重复渐变，这些渐变效果都可以通过裁减文本和设置文本填充为透明后，为文本添加渐变特效。图形可通过变形来实现变成另外一种图形，rotate 旋转（可按X、Y、Z轴旋转）、scale 缩放、translate 位移、skew 倾斜。对图形设置过渡值transition-property、过渡时间duration、过渡曲线 timing-function以及过渡延迟 delay后可以对图形设置过渡效果（使闪现变为疾走）。动画效果，简写：animation：动画名字、运行时间、运行曲线、延迟时间、是否重复、是否反向、动画暂停来为图形设置动画效果。设置好动画效果后还需要@keyframes来实现动画的轨迹。CSS颜色中rgba是在rgb的基础上多一个透明，1为完全不透明，0为完全透明。还可以用opacity属性来设置盒子透明，如果盒子透明则里面元素全部透明。通过rotateX或rotateY来旋转正方形的各个面来组合成一个立体的正方体，设置前加入3d属性。媒体查询功能帮助网页在各种屏幕大小下的显示也不同，越小的屏幕下，有些元素消失，在屏幕放大时，重新展现出来，1200为大屏幕，992-1200为中屏幕，768-992为小屏幕，768以下为超小屏幕。

 笔记

背景渐变

1. 语法（在背景上）

background：linear-gradient（方向起始颜色、中间颜色、结束颜色）

方向默认为从上到下，可用to right的值来表示

线性渐变

颜色占比 输入百分比，输入百分之多少就占比多少，线性渐变后面的占比一定要大于前面的占比，当后面占比为100%时，前面占比改变渐变大小。

占比可用使用负值，这样渐变从实际可见区域之外开始。

过渡颜色点（多个颜色）每个颜色之前用逗号，隔开

径向渐变

语法 background：radial-gradient（起始颜色，结束颜色）

没有方向，只有正圆

颜色占比规则同线性渐变一样

重复渐变

重复的线性渐变 repeating-linear-gradient（red，yellow，green 30%）

30%表示重复的，整个背景渐变的占比（100%占30%）

重复的径向渐变 repeating-radial-gradient

字体渐变特效

.text{

     font-size:50px;

           background:-webkit-gradient(linear,0 0,0 bottom,0 from(red),to(blue));

           -webkit-background-clip:text;

           -webkit-text-fill-color:transparent;

}

第一个为线性渐变，第二个渐变占比，第三个渐变方向，第四个起始颜色，第五个结束颜色

1. 变形（transform）

1. rotate（旋转）

旋转中心（transform-origin：top）

值可以为top这样的值（top right）

值可以为20px 20px这样的值，建议旋转的时候以坐标轴定位（x,y）2个值写全，也可以为20% 20%，第一个值为x轴，第二个为y轴

按照x轴旋转

旋转后添加一个大写X表示X轴旋转

transform：rotateX（30deg）

1. scale（缩放）

transform：scale（n）;

n表示缩小/放大的倍数

一个值表示X、Y两条边；两个值的时候，第一个表示X，第二个表示Y

1. 位移

语法 transform：translate（50px 50px）

可由X、Y、Z轴运动

1. 倾斜

transform：skew（45deg 0deg）

第一个值表示X轴倾斜，第二个值表示Y轴倾斜

1. 过渡

1. 使动画变得生动（使闪现变疾步）
2. 过渡的4个属性

transition-property：xxx 一般后面的值书写为 全部（all）

过渡时间 transition-duration 多少时间完成过渡，单位秒（s）

过渡曲线（运行曲线） transition-timing-function

过渡延迟（延迟运行的时间） transition-delay

1. 简写 transition：过渡属性、时间、曲线、延迟

1. 动画（帧动画）

1. 动画名字（自取） animation-name
2. 运行时间 animation-duration
3. 运行曲线 animation-timing-function
4. 延迟时间 animation-delay
5. 是否重复 animation-iteration-count  无限重复 infinite
6. 是否反向 animation-direction  alternate 反向
7. 动画暂停 animation-play-state

简写：animation：（1）~（7）

1. 定义动画轨迹 @keyframes name{

      0%{}表示起始

             100%{}表示结束

             from{}开始

             to{}结束

}

CSS3颜色

1. CSS3颜色

rgba在rgb的基础上多一个透明

语法 background-color：regba(255,255,255,0.5) 0.5叫半透明，1为完全不透明，0为完全透明

1. 透明（opacity）

如果盒子透明则里面元素全部透明

可制作从无到有的动画效果

1. 多栏式布局

仅了解

1. 特效正方体

定义一个放正方体的盒子

在盒子内定义大小相同的6个面

设置6个面

设置前需要设置3d属性：transform-style：preserve-3d

1. 媒体查询

1. 媒体类型

all 所有设备

screen 电脑显示器

handheld 便携设备

tv 电视类型设备

print 打印用纸打印浏览视图

1. 关键字

and 和

not 排除某种设备

only 限定某种设备

1. 媒体特性

接受min/max的前缀

表示大于等于/小于等于的逻辑

1. 语法

@media screen and (max-width:992px) and (min-width:768px)

电脑屏幕最大宽度为992，最小宽度为768。如果在这个范围之内则使用特殊样式，否则使用默认样式。

1200 大屏幕 992-1200 中屏幕 768-992 小屏幕 768以下 超小屏幕

 

补充

从一个帧停止之后立刻开始下一帧运动

animation-timing-function：step-start；

暂停动画

animation-play-state：paused；