用css函数和animation制炫酷的特效

Zhu Xiaopi

于 2021-08-07 14:08:53 发布

阅读量205

点赞数

分类专栏： css特效集合文章标签： css

本文链接：https://blog.csdn.net/qq_46063425/article/details/119485710

版权

css特效集合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用css函数和animation制炫酷的特效

刚在B站上看到一个特别炫酷的特效，仅仅由css和html代码编写成的，来看看这个好看的特效吧

在这里插入图片描述

看到这个炫酷的特效是不是有小伙伴认为代码一定很难，其实这个代码就是我们平常写过的一些css效果代码，就让我们一起来看看代码

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="./index.css"/>
	<body>
		<div class="container">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
</html>

css代码

body{
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.container{
	width: 30em;
	height: 30em;
	font-size: 10px;
	--deg:calc(var(--percent) / 100 * 360deg);
	color: hsl( var(--deg),100%,50%);
	animation: changecolor  2.5s linear infinite;
}
@keyframes changecolor{
	0%,100%{
		--percent: 0;
	}
	10%{
		--percent: 10;
	}
	20%{
		--percent: 20;
	}
	30%{
		--percent: 30;
	}
	40%{
		--percent: 40;
	}
	50%{
		--percent: 50;
	}
	60%{
		--percent: 60;
	}
	70%{
		--percent: 70;
	}
	80%{
		--percent: 80;
	}	90%{
		--percent: 90;
	}
}


.container span{
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	--diameter:calc(5em + (var( --n) - 1) * 3em);
	width: var(--diameter); 
	height: var(--diameter);
	border-style: solid;
	border-color: currentcolor transparent;
	border-width: 1em 1em 0 0;
	border-radius: 50%;	
	animation: rotating linear infinite;
	animation-duration:calc(4s / (9 - var(--n) + 1));
}


@keyframes  rotating{
	to{
		transform: rotate(1turn);
        /*1turn：一圈，一个圆共一圈。

		90deg = 0.25turn。*/
	}
}

.container span:nth-child(1){
	--n: 1;
}
.container span:nth-child(2){
	--n: 2;
}
.container span:nth-child(3){
	--n: 3;
}
.container span:nth-child(4){
	--n: 4;
}
.container span:nth-child(5){
	--n: 5;
}
.container span:nth-child(6){
	--n: 6;
}
.container span:nth-child(7){
	--n: 7;
}
.container span:nth-child(8){
	--n: 8;
}
.container span:nth-child(9){
	--n: 9;
}

好了以上就是本次demo的所有代码，没错就是所有代码，是不是感觉自己的学的东西好有成就感，快去悄悄地写代码，然后惊艳身边的朋友，本次的分享就到这里，那就拜拜了……

嗨！嘿！哈！，大家等等，你看我正事还没有做完，就急着和大家说再见了，年纪大了请大家见谅，这次demo还要给大家分享一下css中的变量声明和一些函数的使用。

css变量声明

在css中声明的变量需要以两个减号开头，在使用变量的时候也需要将两个减号带上哟

--percent: 1;
--deg:calc(var(--percent) / 100 * 360deg);

css中的calc函数

calc函数是css中的计算函数，它能够做 + 、- 、 * 、/ 等基本运算，但这里需要注意在计算加法和减法的时候需要将运算符号的左右用空格隔开，对于乘除法可以不用空格隔开，但建议在用运算符的时候都用空格隔开

--n:1;
animation-duration:calc(4s / (9 - var(--n) + 1));

css中的var函数

var函数是在使用变量的时候使用的，每当要使用变量时，都需要用var包裹

animation-duration:calc(4s / (9 - var(--n) + 1));
--deg:calc(var(--percent) / 100 * 360deg);

css中的hsl函数

hsl函数包含三个参数：色相、饱和度、亮度，用这三个参数来定义颜色

--deg:calc(var(--percent) / 100 * 360deg);
color: hsl( var(--deg),100%,50%);

好了本次的分享就真的结束了，拜拜了~~~
其他相关css函数点击了解详情css函数

Zhu Xiaopi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css函数和animation制炫酷的特效

用css函数和animation制炫酷的特效刚在B站上看到一个特别炫酷的特效，仅仅由css和html代码编写成的，来看看这个好看的特效吧看到这个炫酷的特效是不是有小伙伴认为代码一定很难，其实这个代码就是我们平常写过的一些css效果代码，就让我们一起来看看代码html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </
复制链接

扫一扫