css入门笔记(下)

时间  2019-11-07
标签 css 入门 笔记 栏目 CSS 繁體版
原文   原文链接

若是基础很差，建议先学习javascript

css入门笔记(上)css

juejin.im/post/5cc569…html

15 CSS3选择器

结构选择器

:nth-child(n)第几个元素 从1开始设置
:nth-child(2n)偶数元素 从0开始设置
:nth-child(2n+1) 奇数元素
:nth-of-type(n) 某个元素下同种类型中的第几个子元素
:first-child -> nth-child(1)
:first-of-type->nth-of-type(1)
:last-child
:last-of-type
:only-child仅有一个子元素
:only-of-type 同种类型的子元素只有一个
:empty 知足条件的html5

否认选择器

:not()java

属性选择器

E[attr=val]
E[attr|=val] 只能等于val 或只能以val-开头
E[attr*=val] 包含val字符串
E[attr~=val] 属性值有多个，其中一个是val
E[attr^=val] 以val开头
E[attr$=val] 以val结尾web

目标伪类选择器

:target 用来匹配url指向的目标元素
存在url指向该匹配元素时，样式效果才会生效浏览器

伪元素

:first-line 匹配第一行文本
:first-letter 匹配第一首字符
:before 和 after DOM元素先后插入额外的内容bash

16 圆角 border-radius

border-radius :1-4个数字/1-4个数字ide

  • 前面是水平半价，后面是垂直半径
  • 四个数字方向分别是左上 右上 右下  左下
  • 不给 "/" 则水平半径和垂直半径同样
    • border-radius:10px/5px
    • border-radius:60px 40px 30px 20px/30px 20px 10px 5
  • 例子:圆 椭圆 半圆 扇形

17 线性渐变

linear-gradientsvg

  • linear-gradient([<起点>||<角度>,]?<点>,<点>...)
  • 只能用背景上
  • 颜色是沿着一条直线轴变化
  • 参数
    • 起点:从什么方向开始渐变
      • left、top、left top
    • 角度:丛书名角度开始渐变
      • xxx deg的形式
    • 点: 渐变点的颜色和位置
      • red 50%,位置可选
  • 重复线性渐变

image.png

18 径向渐变

background: radial-gradient(shape size at position, start-color, ..., last-color);

shape 肯定圆的类型:
- ellipse (默认): 指定椭圆形的径向渐变。
- circle ：指定圆形的径向渐变
size 定义渐变的大小，可能值：
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置。可能值：
- center（默认）：设置中间为径向渐变圆心的纵坐标值。
- top：设置顶部为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color 用于指定渐变的起止颜色。 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */ } </style>
</head>
<body>

<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及以前的版本不支持渐变。</p>

</body>
</html>
复制代码

image.png

19 阴影

盒子阴影

box-shadow

h v blur spread color inset

  • h:水平方向偏移
  • v:垂直方向偏移
  • blur:模糊半径
  • spread:拓展半径
  • color:颜色
  • inset:加上这个表示内阴影  默认是外阴影

文字阴影

text-shadow

x y blur color

  • x轴偏移 y轴偏移 模糊度 颜色
  • 多层阴影制做文字立体效果，设置多种颜色，中间以逗号隔开

文字添加边框
text-stroke:2px blue

  • 经过设定1px的透明边框，可让文字变得平滑
  • 颜色设成透明建立镂空字体

20 滤镜

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意: 滤镜一般使用百分比 (如：75%), 固然也可使用小数来表示 (如：0.75)。

Filter 描述
none 默认值，没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一块儿， 因此值越大越模糊；

若是没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。若是值是0%，图像会全黑。值是100%，则图像无变化。其余的值对应线性乘数效果。值超过100%也是能够的，图像会比原来更亮。若是没有设定值，默认是1。
contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值能够超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，能够有模糊度的，能够以特定颜色画出的遮罩图的偏移版本。 函数接受 (在CSS3背景中定义)类型的值，除了"inset"关键字是不容许的。该函数与已有的box-shadow box-shadow属性很类似；不一样之处在于，经过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数以下：``**<offset-x>** **<offset-y>** (必须)这是设置阴影偏移量的两个 <length>值. **<offset-x>** 设定水平方向距离. 负值会使阴影出如今元素左边. **<offset-y>**设定垂直距离.负值会使阴影出如今元素上方。查看**<length>**可能的单位.<br />**若是两个值都是0**, 则阴影出如今元素正后面 (若是设置了 and/or `，会有模糊效果).````  (可选)这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不容许负值 若未设定，默认是0 (则阴影的边界很锐利).  (可选)这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素同样大小). 
注意: Webkit, 以及一些其余浏览器 不支持第四个长度，若是加了也不会渲染。   (可选)查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color color属性的值。另外, 若是颜色值省略，WebKit中阴影是透明的。```````
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则彻底转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值至关于又绕一圈。
invert(%) 反转输入图像。值定义转换的比例。100%的价值是彻底反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是彻底透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也至关于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很类似，不一样之处在于经过filter，一些浏览器为了提高性能会提供硬件加速。
saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是彻底不饱和，值为100%则图像无变化。其余值，则是效果的线性乘子。超过100%的值是容许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则彻底是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且能够包含一个锚点来指定一个具体的滤镜元素。
例如：filter: url(svg-url#element-id)
initial 设置属性为默认值
inherit 从父元素继承该属性

21 遮罩

mask和background用法是相仿的，mask的值有这些

image.png 

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
复制代码
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style> .mask{ width:475px; height:260px; background-image:url("http://img.blog.csdn.net/20170701221659356"); /* 取值是图片路径 */ -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018"); } </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>
复制代码

22 transition 过渡动画

transition-property 过分属性 all[attr]
transition-dunration 过分时间
transition-delay 延迟时间
transition-timing-function 运动类型

  • ease:(逐渐变慢)默认值
  • linear:(匀速)
  • ease-in:(加速)
  • ease-out:(减速)
  • ease-in-out:(先加速后减速)
  • cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> #div{ width: 100px; height:100px; background: red; transition:width 1s 1s; /* 延迟的一秒 */ } #div:hover{ width: 300px; transition:width 1s 1s; /* 延迟的一秒 */ } </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>
复制代码

项目案例

image.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> /* 过渡动画效果思考的步骤 1.找到过渡属性 2.找到过渡属性起始值和结束值 3.在合适的位置上增长transition属性 过渡属性 box-shadow 起始值 30px transparent 结束值 0 white */ body{ background:#2192bc; } .box{ width: 100px; height: 100px; background: #2c9dc4 url("./1991841492744344.jpg") no-repeat center center; border-radius: 50%; margin: 100px auto; box-shadow: 0 0 0 30px transparent; -o-transition: box-shadow 1s; -ms-transition: box-shadow 1s; -moz-transition: box-shadow 1s; -webkit-transition: box-shadow 1s; transition: box-shadow 1s; } .box:hover{ box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
复制代码

23 transform 2D变换

rotate() 旋转函数

  • deg 度数
  • transform-origin 旋转的基点

skew()倾斜函数

  • skewX()
  • skewY()

scale()缩放函数 默认值是1

  • scaleX()
  • scaleY()

translate() 位移函数

  • translateX()
  • translateY()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style> #div1{ width: 200px; height: 300px; border: 1px solid red; } #div1 img{ width:100%; height: 100%; transition: all 1s; } #div1:hover img{ transform: skew(-15deg,15deg); } </style>
</head>
<body>
    <div id="div1">
        <img src="./1991841492744344.jpg" alt="" srcset="">
    </div>

</body>
</html>
复制代码

24 animation帧动画

关键帧 --

相似于flash定义动画在每一个阶段的样式，即帧动画

关键帧的时间单位

  • 数字: 0%、25%、100%等(设置某个时间段内的任意时间点的样式)
  • 字符:form(0%)、to(100%);

格式

@keyframes 动画名称
{
	动画状态
}
复制代码
<!DOCTYPE html>
<html>
<head>
<style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { from {background:red;} to {background:yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} } @-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;} } </style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

复制代码

格式

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
复制代码

25 transform3d变形

1.3d 和2d不一样点是多了一个z轴,2d都是一些平移效果，3d可让它按照轴为中心旋转
2.为了增长空间想象多了一个左手法则
解释：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向
前方。这样咱们就创建了一个左手坐标系，拇指、食指和中指分别表明X、
Y、Z轴的正方向。以下图
复制代码
  • 方向判断的口诀
x左边是负的，右边是正的
y上面是负的， 下面是正的
z里面是负的， 外面是正的
复制代码

rotateX()

1.就是沿着 x 立体旋转.例如transform:rotateX(180deg);旋转时候也是图片中
心为轴旋转
复制代码

rotateY()

1.就是沿着 y 立体旋转.例如transform:rotateY(180deg);旋转时候也是图片中
心为轴旋转
复制代码

rotateZ()

1.就是沿着 z 立体旋转.例如transform:rotateZ(180deg);旋转时候也是图片中
心为轴旋转
复制代码

移动 translateX(x)/translateY(y)/translateZ(z)

1.3d比2d 移动多了一个 translateZ(z)
2.[注意]其中，x和y能够是长度值，也能够是百分比，百分比是相对于其本
身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
3.简写：translate3d(x,y,z)
复制代码

透视 -- perspective

1.电脑显示屏是一个2D平面，图像之因此具备立体感（3D效果），其实只是一种视觉呈现，经过透视能够实现此目的。
2.透视能够将一个2D平面，在转换的过程中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的全部图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
3.并不是任何状况下须要透视效果，根据开发须要进行设置。
4.perspective 通常做为一个属性，设置给父元素，做用于全部3D转换的子元素
复制代码

使用透视案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> body { perspective: 1000px; /*视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显*/ } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(360deg); } </style>
</head>
<body>
<img src="images/x.jpg" alt=""/>
</body>
</html>
复制代码

元素不面向屏幕时是否可见 -- backface-visibility

1.backface-visibility 属性定义当元素不面向屏幕时是否可见。
复制代码

反转盒子案例

div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s; 
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
		}
		div:hover img {
			transform: rotateY(180deg);
}
复制代码

案例

1570286906545-888bf5ca-a6ab-4335-83ca-3e8f45ecb5e6.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> section{ width: 500px; height: 500px; margin: 0 auto; background: url('http://pic22.nipic.com/20120725/9676681_001949824394_2.jpg') no-repeat; background-size: cover; position: relative; perspective: 1000px; /*给父盒子添加透视效果 必定要加透视效果*/ } .ldoor,.rdoor{ position: absolute; background-color: red; border:1px solid #000; top:0; width: 250px; height: 500px; } .ldoor{ transform-origin: left;/*旋转轴*/ left: 0; } .rdoor{ transform-origin: right;/*旋转轴*/ right: 0; } /*鼠标通过section 盒子 两个门盒子 翻转 rotateY*/ section:hover .ldoor { transform: rotateY(-130deg); /*由于往左边翻转，因此是负值*/ } section:hover .rdoor { transform: rotateY(130deg); } </style>
</head>
<body>
<section>
    <div class="ldoor"></div>
    <div class="rdoor"></div>
</section>
</body>
</html>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程