特效

知识点1.box-shadow盒子阴影

text
1 2 3 4 
定义：盒在显示时产生阴影效果。
box-shadow:  X轴偏移量  Y轴偏移量 模糊距离  阴影尺寸  颜色 投影方式
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
text
1 2 
是指阴影水平偏移量其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
v-shadow 必需。垂直阴影的位置。允许负值。
text
1 2 3 
是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
blur 可选。模糊距离。
text
1 2 3 
此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
spread 可选。阴影的尺寸。
text
1 2 3 
此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
color 可选。阴影的颜色。请参阅 CSS 颜色值。
text
1 2 3 
此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
inset 可选。将外部阴影 (outset) 改为内部阴影。
text
1 2 
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
box-shadow: h-shadow v-shadow blur spread color inset;
text
1 2 
在这里插入代码片

知识点2.text-shadow文本阴影

text
1 2 3 
text-shadow: h-shadow v-shadow blur color;
text-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
h-shadow 必需。水平阴影的位置。允许负值。
text
1 2 
这两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。使用text-shadow属性时必须指定这两个参数，可以对这两个参数指定负数值。
v-shadow 必需。垂直阴影的位置。允许负值。
text
1 2 
在这里插入代码片
blur 可选。模糊的距离。
text
1 2 3 
text-shadow:所使用的第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径越大，则外阴影向外模糊的范围也就越大，模糊半径的值越小，阴影向外模糊的范围越小。
模糊半径参数为可选参数，省略这个参数时，该参数默认值为0，代表阴影不向外模糊。
color 可选。阴影的颜色。
text
1 2 
text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色，该参数可以放置在其他三个参数之后，也可放在其他三个参数之前，成为第一个参数。该参数为可选参数，不对这个参数进行指定时，使用文字颜色。

知识点3.gradient渐变

text
1 2 3 
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。渐变分为径向渐变和线性渐变。
绘制线性渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
text
1 2 3 4 5 6 7 8 9 10 
background:linear-gradient(to bottom,red,yellow);
第一个参数可指定的参数值如下：
参数值      渐变方向
to bottom    从上往下
to  right    从左往右
to  top      从下往上
to  left    从右往左
 
第二个参数和第三个参数分别表示渐变的起点色和终点色。
径向渐变（Radial Gradients）- 由它们的中心定义
text
1 2 3 4 
background:radial-gradient(red,yellow);
    第一个参数和第二个参数分别表示渐变的起点色和终点色。
background:radial-gradient(circle at left top,red,yellow);

知识点4.transform

第1项.transform-origin转换原点
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 
ransform-origin 属性用来指定元素的转换原点位置
默认情况下，转换的原点在元素的中心点
或者是 X 轴和 Y 轴的 50% 处
transform-origin : 数值/百分比/关键字;

两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴
#d1
{
   transform:rotate(90deg) scale(0.5);
   transform-origin:right top;
}

#d2
{
   transform:rotate(90deg) scale(0.8);
   transform-origin:100% 100%;
}
第2项.translate位移
text
1 2 3 4 5 6 7 8 9 10 11 
translate() 方法将元素从其当前位置移动
移动到 x 坐标和 y 坐标位置参数
translate(x) 或者 translate(x,y)
可取值
数值、百分比
也可以是负值
也可以使用单向位移函数
translateX(x)
translateY(y)
是css3得属性；渲染效率高，相比较定位来说；
第3项.scale缩放
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 
scale() 方法用于改变元素的尺寸
根据给定的宽度（X 轴）和高度（Y 轴）
scale(x) 或者 scale(x,y)
一个参数时，第二个参数默认与第一个值相等
可取值
默认值为1
缩小：0 到 1 之间的数值
放大：大于 1 的数值
也可以使用单向缩放函数
scaleX(x)
scaleY(y)


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      #imgs
      {
         position: absolute;
         width: 108px;
         height: 67px;
      }
      #imgs::after,#imgs::before
      {
         display: block;
         content: "";
         position: absolute;
         left:0;
         right: 0;
         top: 0;
         bottom: 0;
         background-image:url("image/icon_c.jpeg");
         background-size: cover;
         background-position: center;
      }
      #imgs::before
      {
         top: 0;
         bottom: 49%;
         transform: scaleY(-1);
      }
      #imgs::after
      {
         top:49%;
         bottom: 0;
      }

   </style>

</head>

<body>
<div id="imgs" ></div>


</body>
</html>
第4项.Rotate旋转
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
rotate() 方法用于旋转元素
根据原点，将元素按照顺时针旋转给定的角度
允许负值，元素将逆时针旋转
rotate(deg)
div
{
   width:150px;
   height:150px;
   border:1px solid black;
}
#d1
{
   transform:rotate(45deg);
   background-color:#ccc;
}
#d2
{
   transform:rotate(-45deg);
   transform-origin:right top;
   background-color:#ccc;
}

rotateY

text
1 2 
3D旋转

perspective透镜

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 
父级元素的透镜
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      #div0
      {
         width: 400px;
         height: 400px;
         perspective: 500px;
      }
      #div0 div
      {
         width: 200px;
         height: 200px;
         background-color: chartreuse;
         transition: all 1s;
         margin: auto;
      }
      #div0 div:hover
      {
         transform: rotateY(30deg);
         transition: all 1s;
      }
   </style>
</head>
<body>
<div id="div0">
   <div></div>
</div>
</body>
</html>
第5项.Skew倾斜（skewX，skewY）
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
skew() 方法用于让元素倾斜
以原点位置，围绕 X 轴和 Y 轴按照一定的角度倾斜
可能会改变元素的形状
skew(x) 或者 skew(x,y)，取值为角度
也可以使用单向倾斜函数
skewX(x)
skewY(y)
div {
   width:150px;
   height:150px;
   border:1px solid black;
}
#d1 {
   transform:skewX(45deg);
   background-color:#ccc;
}
#d2 {
   transform:skewY(45deg);
   transform-origin:right top;
   background-color:#ccc;
}
简写transform:translate(60px,-120px) scale(2);
3D动画

3D转换

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换




CSS3 允许您使用 3D 转换来对元素进行格式化。
3D 翻转方法：
rotateX(30deg)
rotateY(30deg)
注： Internet Explorer 和
 Opera 
不支持 rotateX, rotateY 方法。
扩展
rotate和rotateZ()效果一样

3D位移

text
1 2 3 4 5 6 7 8 
3D位置移动 的3种写法
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);

在2D的基础上多了1D (Z轴)

3D视距

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
3D视距
perspective
元素要使用3D效果 需要perspective属性配合
方法1：
<div>



</div> 
方法2:
text
1 2 3 4 5 6 7 
div{perspective:200px;}
p{width:100px;height:100px;
transform:translate3d(0,0,-50px);background:#ff9;}
   p{width:100px;height:100px;
transform:perspective(200px) translate3d(0,0,-50px);
background:#ff9;}

3D视角

text
1 2 3 4 5 6 7 8 9 10 11 
3D缩放翻转
scaleZ
父框设置
perspective:1200px(3D视距)
transform-style:preserve-3d;(3D视角)
（子元素保持3D位置）
transform-origin:left/top/right/bottom
翻转位置
例：preserve-3d.html
text
1 2 
平面上看3D是看视距，但是旋转上观看是看3D视角(在加视角的时候删除视距)

动画

知识点1.过渡动画（transition）

text
1 2 
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover。CSS3 提供了 transition 属性来实现这个过渡功能
transition-property
text
1 2 3 4 
设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元 素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性
设置背景和文字颜色采用过渡效果 
transition-property: background-color, color, margin-left;
text
1 2 3 4 5 
        none
        all
        指定样式属性
        就是那些属性需要进行设置该过度的
transition-duration
text
1 2 3 
如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默 认情况下过渡时间为 0。 
transition-duration: 1s;
text
1 2 
        就是变化的过度需要的时间
transition-timing-function
text
1 2 
当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过 渡到终止状态时速度由快到慢，逐渐变慢，即 ease。也是默认值，其他几种缓动方式如下 表所示：

ease：慢快慢

text
1 2 
由快到慢

linear：匀速

text
1 2 
恒速

ease-in：慢开始

text
1 2 
越来越快，加速

ease-out：慢结束

text
1 2 
越来越慢，减速

ease-in-out：慢开始慢结束

text
1 2 
先加速再减速
cubic-bezier：自定义贝兹尔曲线
transition-delay延迟多长时间开始
text
1 2 
这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用 transition-delay 属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。
transition 简写
text
1 2 3 4 5 
我可以直接使用 transition 来简写，有两种形式的简写。第一种是，每个样式单独声 明；第二种是不去考虑样式，即使用 all 全部声明。 //单独声明 
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
//如果每个样式都是统一的，直接使用 all 
transition: all 1s ease 0s;

知识点2.动画（animation ）

text
1 2 3 4 5 
CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 
animation 实现动画效果主要由两个部分组成： 
1.通过类似 Flash 动画中的关键帧声明一个动画； 
2.在 animation 属性中调用关键帧声明的动画。
第1项.animation 与关键帧

animation 属性

text
1 2 
animation: name duration timing-function delay iteration-count direction;
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
            animation-name    规定需要绑定到选择器的 keyframe 名称。。
            animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
            animation-timing-function    规定动画的速度曲线。
           ease由快到慢
           linear恒速
           ease-in越来越快，加速
           ease-out越来越慢，减速
           ease-in-out先加速再减速
            animation-delay    规定在动画开始之前的延迟。
            animation-iteration-count    规定动画应该播放的次数。
           n
           infinite无限次
            animation-direction    规定是否应该轮流反向播放动画。
           normal
           alternate一次前一次后交替效果
            animation-fill-mode 结束后不返回
           forwards 结束停留在最后一帧
           none

关键帧 @keyframes

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
@keyframes myani { 
0% { 
background-color: white; 
margin-left:0px; } 
50% { 
background-color: black; 
margin-left:100px; } 
100% { 
background-color: white; 
margin-left:0px; } 
}


重复
@keyframes myani { 
0%, 100% { 
background-color: white; 
margin-left:0px; 
} 
50% { 
background-color: black; 
margin-left:100px;
}
}
text
1 2 
的先设置动画，之后就可以启动动画
第2项.animate css插件的使用

1、首先引入animate css文件

text
1 2

2、给指定的元素加上指定的动画样式名

text
1 2 3 4 5 6 7 
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#jq22{
   animate-duration: 2s;   //动画持续时间
   animate-delay: 1s;   //动画延迟时间
   animate-iteration-count: 2;   //动画执行次数
}
text
1 2 3 
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

text
1 2 
$('#yourElement').addClass('animated bounceOutLeft');

原文地址：https://blog.csdn.net/stenphencurry/article/details/100083075?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-30-100083075-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88