变形、过渡、渐变、滤镜、阴影、动画

阴影 shadow

CSS 阴影效果 (w3school.com.cn)

可以在文本和元素上添加阴影

阴影不会对布局产生影响

box-shadow: 给元素添加阴影
box-shadow: 给文本添加阴影
阴影：横向偏移量纵向偏移量模糊距离阴影颜色

div{width: 300px;height: 300px;background-color: skyblue;box-shadow: 50px 50px 100px tomato;
}

给一个区域或者文本四周加阴影

div{text-shadow: 5px 5px 5px black,-5px 5px 5px black,5px -5px 5px black,-5px -5px 5px black;
}
div{box-shadow: 0px 0px 40px black;
}

文字周围创建纯边框（无阴影）

h1 {color: yellow;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

渐变 gradient

CSS 渐变 (w3school.com.cn)

渐变使您可以显示两种或多种指定颜色之间的平滑过渡

linear-gradient 和 radial-gradient 也具有浏览器不兼容性特点

前缀为“-webkit-”的属性，能够在以webkit为内核的浏览器中正常使用

-webkit-是针对safari和chrome的

-moz代表firefox浏览器私有属性；

-ms代表IE浏览器私有属性；

-o代表Opera私有属性。

实际开发中可以为了多种内核的浏览器能够适配会写各种内核的前缀和没有前缀的

线性渐变

是沿着某个方向颜色的变化

linear-gradient

渐变的方向

top、to bottom（默认）从上到下

left、to right 从左到右

left top、to right bottom 从左上到右下

div{background-image: -webkit-linear-gradient(left, cyan 20%, gold 50%, tomato, hotpink, skyblue);background-image: linear-gradient(left, cyan 20%, gold 50%, tomato, hotpink, skyblue);
}

径向渐变

CSS 径向渐变 (w3school.com.cn)

以某个点向周围的颜色变化（辐射）

radial-gradient

center（默认）从中心向周围辐射

left top 从左上角向外辐射

center bottom 以下边界的中心点向外辐射

div{background-image:-webkit-radial-gradient(top left, skyblue, hotpink, black, yellow);background-image:radial-gradient(top left, skyblue, hotpink, black, yellow);
}

应用

透明渐变

div{background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

彩虹

div{background-color: white;background-image: -webkit-radial-gradient(center bottom, transparent 40%, purple, deepskyblue, cyan, greenyellow, gold, orange, transparent 60%);background-image: radial-gradient(center bottom,transparent 40%, purple, deepskyblue, cyan, greenyellow, gold, orange, transparent 60%);
}

过渡 transition

CSS 过渡 (w3school.com.cn)

在不适合动画的情况下变换状态

transition: all 1s 0.1s linear 简写

顺序：属性名时间延迟时间速度曲线

transition-property 设置过渡的属性

值：全部css属性
transition-duration 定义过渡时间

值：单位s
transition-delay 定义延时时间

transition-timing-function 过渡效果的时间曲线

值	贝塞尔曲线函数	速度
linear	cubic-bezier(0,0,1,1)	匀速
ease	cubic-bezier(0.25,0.1,0.25,0.1)	慢，块，慢（默认）
ease-in	cubic-bezier(0.42,0,1,1)	慢，快
ease-out	cubic-bezier(0,0,0.58,1)	快，慢
ease-in-out	cubic-bezier(0.42,0,0.58,1)	慢，快，慢
n的值的范围在0~1	cubic-bezier(n,n,n,n)	贝塞尔曲线函数可视化生成网站

变形 transform

CSS 2D 转换 (w3school.com.cn)

CSS 3D 转换 (w3school.com.cn)、

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

transform: 属性

一个元素有X、Y、Z三个轴

X轴水平指向右面、Y轴竖直指向上面、Z轴穿过屏幕指向自己

平移不会对布局产生影响但是会遮挡下面文字

transform-orgin: 变换元素的原点

eg:

div{transform-origin: left top;/* transform-origin: 0px 0px; 等同上面的 */
}

transform-style: preserve-3d; 开启3D效果

平移

translate()方法

值：单位px（正数沿轴正方向移动，负数沿反方向移动）

div{/* 沿X轴正方向移动 */transform: translate(100px);/* 沿X轴负方向移动 */transform: translateX(-100px);  /* 沿Y轴正方向移动 */transform: translateY(100px);/* 沿Z轴负方向移动，2D下没有效果 */transform: translateZ(-100px);
}

旋转

rotate() 方法

值：单位1deg=1°、 1turn = 360°、 400grad = 360°

div{/* 沿Z轴顺时针旋转 */transform: rotate(180deg);/* 沿Z轴逆时针旋转 */transform: rotateZ(-100px);/* 沿X轴逆时针旋转 2D下没有效果 */transform: rotateX(-100px);  /* 沿Y轴顺时针旋转 2D下没有效果 */transform: rotateY(100px);
}

缩放

scale() 方法

值：没有单位相对之前的倍数

div{/* 增大为其原始宽度的两倍和其原始高度的三倍 */transform: scale(2，3);/* 减小为其原始宽度和高度的一半 */transform: scale(0.5);/* 增大为其原始宽度的两倍： */transform: scaleX(2);/* 增大到其原始高度的三倍 */transform: scaleY(3);
}

拉扯

skew() 方法拉扯/倾斜

值：单位 deg、turn、grad

div{/* 沿 X 轴倾斜 20 度 */transform: skew(20deg);/* 沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度 */transform: skew(20deg, 10deg);/* 沿X轴倾斜 20 度 */transform: skewX(20deg);/* 沿 Y 轴倾斜 20 度 */transform: skewY(20deg);
}

matrix()

matrix() 方法

把所有 2D 变换方法组合为一个

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {transform: matrix(1, -0.3, 0, 1, 0, 0);
}

过滤 filter

相当于给元素加滤镜

属性	值	作用
`filter: blur(4px)`	大于0	模糊
`filter: brightness(2)`	0-1降低亮度大于1增大亮度	亮度
`filter: contrast(2)`	0-1降低对比度大于1增大对比度	对比度
`filter: drop-shadow()`	值同box-shadow	阴影
`filter: grayscale(1)`	0到1	灰度
`filter: hue-rotate(360deg)`	正数	色相旋转
`filter: invert(1)`	0到1	反转图像
`filter: opacity(.25)`	0到1	透明度
`filter: saturate(1)`	正自然数	饱和度
`filter: sepia(.5)`	[0,1]	褐色

动画 animation

CSS 动画 (w3school.com.cn)

增加用户体验，但不要过渡使用

定义关键帧

@keyframes

使用css动画，必须先为动画指定一些关键帧。

关键帧包含元素在特定事件所拥有的样式。

@keyframes example{from {background-color: red;}to {background-color: yellow;}
}
@keyframes example{0%{background-color: tomato;}50%{background-color: gold;}100%{background-color: tomato;}
}

为元素绑定动画

animation-name 动画属性名
```
div{animation-name: example;}
```
animation-duration 动画持续时间
```
div{animation-duration: 4s;}
```
animation-delay 动画开始的延迟时间

如果使用负值，则动画将开始播放，如同已播放 N 秒。
```
div{animation-delay: 4s;}
```
animation-iteration-count 定义循环次数

infinite为无限循环
```
div{animation-iteration-count: 3;}
```

animation-direction 动画轮流反向播放

值	作用
`normal`	动画正常播放（向前）。默认值
`reverse`	动画以反方向播放（向后）
`alternate`	动画先向前播放，然后向后
`alternate-reverse`	动画先向后播放，然后向前

div{animation-direction: alternate;}

animation-timing-function 动画速度曲线

值	作用
`ease`	从慢速开始，然后加快，然后缓慢结束的动画（默认）
`linear`	从开始到结束的速度相同的动画
`ease-in`	慢速开始的动画
`ease-out`	慢速结束的动画
`ease-in-out`	开始和结束较慢的动画
`cubic-bezier(n,n,n,n)`	贝塞尔曲线函数可视化生成网站

animation-fill-mode forwards保留最后一帧动画

值	作用
`none`	动画在执行之前或之后不会对元素应用任何样式。默认
`forwards`	元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
`backwards`	元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
`both`	动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

animation动画简写属性（常用）

div{animation-name: example;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;/* 使用animation属性实现上面6种动画属性 */animation: example 5s linear 2s infinite alternate;
}

animate用法

animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。

在BootCDN网站中搜索animate.css

直接使用link标签外部引用css文件

<link rel="stylesheet" href="css/animate.min.css">

可以在Animate中文网里在线演示动画效果，确定自己使用的动画

div{width: 100px;height: 100px;background-color: tomato;animation: fadeOutRight 1s infinite;
}

前端入门之特效、动画相关推荐

【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...
java页面要素_Web前端入门技术之网页制作三要素
原标题:Web前端入门技术之网页制作三要素 Web前端技术开发是由网页制作演变而来的,主要由HTML.CSS.Java三大要素组成.专业的Web前端开发入门常识也必定会包含这些内容,今日千锋教师就给我 ...
web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
零基础前端入门系列（八）
CSS精讲(二) CSS体系知识介绍选择器优先级为什么关注优先级优先级处理原则 !important 和内联样式样式继承一个继承的例子继承属性和非继承属性范例选择器权重计算范例1 ...
写给栋栋的前端入门到熟悉教程
写给栋栋的前端入门到熟悉教程目前栋栋的情况了解HTML语法了解CSS作用 Javascript学了都忘了 jQuery也忘了 Ajax是啥都不知道写在开始大部分知识都是空缺的,因此想作为一名 ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
什么是前端？前端入门需要学习哪些技术？前端找工作需要具备什么样的条件？
一.web前端是什么简单的来说就是,我们使用的APP.网站.小程序中所有可以直接看到的东西.比如:淘宝首页,中间部分的天猫新品.充值中心.右下角我的淘宝,这些按钮都属于前端.那点一下按钮,跳到另一 ...

前端入门之特效、动画