各种炫酷的CSS特效
前言
这篇文章是我自己在学习CSS过程中，记录的一些使用CSS实现的np的特效，供大家参考一下，如果可以顺手点一下赞就更好了。
1、渐变背景颜色过渡动画
由于CSS不支持背景渐变色的直接过渡变化，故通过transition: 1s background来实现渐变动画无效，我们可以使用@property语法来自定义属性，通过针对CSS Houdini自定义变量设定过渡。
那@property是什么呢？很多小伙伴应该不知道吧，这里介绍一下这个CSS的新特性。
顾名思义@property和属性有关，用于自定义CSS属性，效果和JavaScript的CSS.registerProperty一样。
示例
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
p {
color: var(--property-name);
}
</style>
简单解读下：
@property --property-name 中的 --property-name就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用
syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
inherits：是否允许继承
initial-value：初始值
其中，@property 规则中的 syntax 和 inherits 描述符是必需的。
在JavaScript 内定义如下：
CSS.registerProperty({
name: "--property-name",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee"
});
支持的 syntax 语法类型
syntax 支持的语法类型非常丰富，基本涵盖了所有你能想到的类型。
- length
- number
- percentage
- length-percentage
- color
- image
- url
- integer
- angle
- time
- resolution
- transform-list
- transform-function
- custom-ident (a custom identifier string)
syntax 中的 +、#、| 符号
定义的 CSS @property 变量的 syntax 语法接受一些特殊的类型定义。
- syntax: ‘<color#>’ ：接受逗号分隔的颜色值列表
- syntax: ‘<length+>’ ：接受以空格分隔的长度值列表
- syntax: ‘<length | length+>’：接受单个长度或者以空格分隔的长度值列表
渐变过渡效果实现如下：
**Html: **
<div class="cs-box"></div>
CSS:
@property --colorA {
syntax: '<color>';
inherits: false;
initial-value: fuchsia;
}
@property --colorB {
syntax: '<color>';
inherits: false;
initial-value: #f79188;
}
@property --colorC {
syntax: '<color>';
inherits: false;
initial-value: red;
}
@keyframes change {
20% {
--colorA: red;
--colorB: #a93ee0;
--colorC: fuchsia;
}
40% {
--colorA: #ff3c41;
--colorB: #e228a0;
--colorC: #2e4c96;
}
60% {
--colorA: orange;
--colorB: green;
--colorC: teal;
}
80% {
--colorA: #ae63e4;
--colorB: #0ebeff;
--colorC: #efc371;
}
}
.cs-box {
width: 300px;
height: 300px;
background: linear-gradient(45deg,
var(--colorA),
var(--colorB),
var(--colorC));
animation: change 10s infinite linear;
}
效果：
首先定义了三个表示颜色的属性，然后定义了一个动画change，在change中改变定义属性的值，之后给div添加背景色的使用用定义的属性值来表示背景颜色，之后再加上定义的动画，就可以实现渐变的背景色动画。
这里我们将原本定义在 background 的过渡效果嫁接到了 color 之上，而 CSS 是支持一个颜色变换到另外一个颜色的，这样，我们巧妙的实现了渐变背景色的过渡动画。
需要注意的是@property各个浏览器的支持还不是很好
2、纯CSS实现波浪效果
Html:
<div class="container">
<div class="wave"></div>
</div>
CSS:
.container {
position: absolute;
width: 200px;
height: 200px;
padding: 5px;
border: 5px solid rgb(118, 218, 255);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
}
.wave::before,
.wave::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 42%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear infinite;
}
.wave::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
50% {
transform: translate(-50%, -73%) rotate(180deg);
}
70% {
transform: translate(-50%, -80%) rotate(360deg);
}
100% {
transform: translate(-50%, -110%) rotate(540deg);
}
}
效果：
3、数值加减的图标按钮
效果：
Html：
<button class="btn-add"></button>
<button class="btn-sub"></button>
CSS：
.btn-add,
.btn-sub {
width: 1.5rem;
height: 1.5rem;
border: 1px solid gray;
background: linear-gradient(currentColor, currentColor)
no-repeat center /.875em 2px,
linear-gradient(currentColor, currentColor)
no-repeat center / 2px .875em
ghostwhite;
color: dimgray;
}
.btn-sub {
background-size: .875em 2px;
}
CSS渐变本质上也是一种图像，它也可以作为background-image的属性值。再加上多背景和下面两点，就可以实现很多图形。
（1）CSS渐变可以实现纯色效果，只要渐变起止颜色一样即可。
（2）background-size属性也支持多背景，且可以任意控制尺寸。
4、图片透明背景纹理图
效果：
Html：
<div class="bg"></div>
CSS：
.bg {
width: 200px;
height: 200px;
background-color: #fff;
background-image: linear-gradient(45deg, #eee 25%, transparent 25% 75%, #eee 75%),
linear-gradient(45deg, #eee 25%, transparent 25% 75%, #eee 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
5、文字渐变色
效果：
Html：
<div class="bg">我是渐变文字</div>
CSS：
.bg {
width: fit-content;
font-size: 30px;
background: linear-gradient(deepskyblue, deeppink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
文字渐变色效果实现的关键在于background-clip:text属性。
background-clip:text原本是webkit内核浏览器的私有声明，只在Safari浏览器和Chrome浏览器中有效。后来，因为这个特性还挺实用，所以其被加入了最新的CSS边框和背景模块规范，目前Firefox浏览器和Edge15+ 浏览器也提供了支持。
background-clip:text可以让背景图像按照字符形状进行剪裁，此时我们只要隐藏文字，就可以看到字符形状的背景效果了。这个特性可以用来实现文字纹理效果和更常见的文字渐变效果.
6、炫酷的充电动画
效果：
Html：
<div class="container">
<div class="battery"></div>
</div>
CSS：
.container {
position: relative;
top: 200px;
width: 140px;
margin: auto;
}
.battery {
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
background: #fff;
}
.battery::before {
content: "";
position: absolute;
width: 26px;
height: 5%;
left: 50%;
top: 0;
transform: translate(-50%, -100%);
border-radius: 5px 5px 0 0;
background: #fff;
}
.battery::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 97%;
background: linear-gradient(to bottom, #7abcff 0%,
#00BCD4 44%, #2196F3 100%)
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0),
0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 6s linear infinite;
filter: hue-rotate(160deg);
}
@keyframes charging {
20% {
filter: hue-rotate(90deg);
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83),
0px 4px 10px rgba(9, 188, 215, 0.4);
}
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83),
0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2),
0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0),
0 10px 10px rgba(9, 188, 215, 0.4);
}
}
这是一个普通的待颜色渐变的充电效果，由于我们无法对一个渐变色直接进行 animation ，这里通过filter: hue-rotate()滤镜对色相进行调整，从而实现了渐变色的变换动画。
我们还可以加上前面说过的波浪效果，实现更逼真的充电动画。
效果：
Html：
<div class="container">
<div class="header"></div>
<div class="battery">
</div>
<div class="battery-copy">
<div class="g-wave"></div>
<div class="g-wave"></div>
<div class="g-wave"></div>
</div>
</div>
CSS：
.container {
position: relative;
top: 200px;
width: 140px;
margin: auto;
}
.header {
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(255, 255, 255, .88);
}
.battery-copy {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden;
}
.battery {
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
background: #fff;
}
.battery::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%,
#00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0),
0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg);
}
.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
transform: translate(-26%, 0);
z-index: 1;
animation: move 10s linear infinite;
}
.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-26%, 0) rotate(-135deg);
}
.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-26%, 0) rotate(135deg);
}
@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83),
0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2),
0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0),
0 10px 10px rgba(9, 188, 215, 0.4);
}
}
@keyframes move {
100% {
transform: translate(-26%, -200px) rotate(720deg);
}
}
7、旋转木马
效果：
Html：
<div class="stage">
<div class="container">
<img src="../images/1.jpg" style="--index:0" alt="">
<img src="../images/2.jpg" style="--index:1" alt="">
<img src="../images/3.jpg" style="--index:2" alt="">
<img src="../images/4.jpg" style="--index:3" alt="">
<img src="../images/5.jpg" style="--index:4" alt="">
<img src="../images/6.jpg" style="--index:5" alt="">
<img src="../images/7.jpg" style="--index:6" alt="">
<img src="../images/8.jpg" style="--index:7" alt="">
<img src="../images/9.jpg" style="--index:8" alt="">
</div>
</div>
CSS：
@keyframes rotate{
0 {
transform: rotateY(0deg);
}
8.9% {
transform: rotateY(0deg);
}
11.1% {
transform: rotateY(40deg);
}
20% {
transform: rotateY(40deg);
}
22.2% {
transform: rotateY(80deg);
}
31.1% {
transform: rotateY(80deg);
}
31.1% {
transform: rotateY(80deg);
}
33.3% {
transform: rotateY(120deg);
}
42.2% {
transform: rotateY(120deg);
}
44.4% {
transform: rotateY(160deg);
}
53.3% {
transform: rotateY(160deg);
}
55.5% {
transform: rotateY(200deg);
}
64.4% {
transform: rotateY(200deg);
}
66.6% {
transform: rotateY(240deg);
}
75.5% {
transform: rotateY(240deg);
}
77.7% {
transform: rotateY(280deg);
}
86.6% {
transform: rotateY(280deg);
}
88.8% {
transform: rotateY(320deg);
}
97.7% {
transform: rotateY(320deg);
}
100% {
transform: rotateY(360deg);
}
}
.stage {
perspective: 2000px;
perspective-origin: 50% 70%;
margin: 200px 0 0;
}
.container {
width: 288px;
height: 180px;
margin: auto;
transform: rotateY(0deg);
transform-style: preserve-3d;
animation: rotate 22.5s linear infinite;
}
img {
width: inherit;
height: inherit;
position: absolute;
transform: rotateY(calc(var(--index) * 40deg)) translateZ(475.6px);
box-shadow: 0 0 3px 1px #eee;
}
在这里定义动画的时候用js帮助的话要简单许多，但是我们这叫纯css动画，所以怎么能有js代码呢？
具体实现有些复杂，涉及较多的CSS 3D变换，感兴趣的同学可以评论区留言一波，我单独出一篇文章讲解。
8、流动的渐变色
效果：
Html：
<div class="flow-colorful"></div>
<h2 class="flow-slogon">CSS新世界</h2>
CSS：
@keyframes hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
.flow-colorful {
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
animation: hue 6s linear infinite;
}
.flow-slogon {
font-size: 120px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
animation: hue 6s linear infinite;
}
二、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
二、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
二、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
9、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
二、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
二、
效果：
Html：
在这里插入代码片
CSS：
在这里插入代码片
``
1829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
