houdini api 定义css属性解决渐变背景无法应用动画及变量在动画中不生效

今天你有学习吗

于 2024-07-30 15:28:21 发布

阅读量138

点赞数 7

分类专栏： h5 文章标签： css houdini css3

本文链接：https://blog.csdn.net/fyw1789/article/details/140798108

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				background-color: black;
			}
			/* houdini api 自定义css属性 */
			/* 解决了渐变背景无法应用动画	 */
			/* 解决了变量在动画中不生效的问题 */
			@property --desc {
				syntax: "<angle>";
				initial-value: 0deg;
				inherits: false;
			}
			.container {
				width: 200px;
				height: 400px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				/* 渐变背景本质上是浏览器绘制的一张图片 ,后面传递的是告诉浏览器的参数 ,在绘制期间开发者是无法干预的
				 ,但是css属性是可以参与绘制过程的 */
				background-image: linear-gradient(
					var(--desc),
					#5ddcff,
					#3c67e3 43%,
					#4e00c2
				);
				animation: rotate 3s linear infinite;
			}
			@keyframes rotate {
				to {
					--desc: 360deg;
				}
			}
			.inner {
				width: 180px;
				height: 380px;
			    background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="inner"></div>
		</div>
	</body>
</html>

今天你有学习吗

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
houdini api 定义css属性解决渐变背景无法应用动画及变量在动画中不生效

* 渐变背景本质上是浏览器绘制的一张图片 ,后面传递的是告诉浏览器的参数 ,在绘制期间开发者是无法干预的。/* houdini api 自定义css属性 */,但是css属性是可以参与绘制过程的 *//* 解决了变量在动画中不生效的问题 *//* 解决了渐变背景无法应用动画 */
复制链接

扫一扫