08.发光液体碗动画

Posted @大迁世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了08.发光液体碗动画相关的知识,希望对你有一定的参考价值。

效果

源码

<!DOCTYPE html>
<html>
<head>
<title>Colorful Glowing Liquid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<section>
		<div class="shadow"></div>
		<div class="bowl">
			<div class="liquid"></div>
		</div>
	</section>
</body>
</html>

css

*

    margin: 0;
    padding: 0;
    box-sizing: border-box;

section 

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #121212;

.bowl 

    position: relative;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.1);
    bor

以上是关于08.发光液体碗动画的主要内容,如果未能解决你的问题,请参考以下文章

33.丰富多彩的发光液体碗动画特效

33.丰富多彩的发光液体碗动画特效

css 灯泡发光动画,挺有意思

css 灯泡发光动画,挺有意思

光电式液位传感器的工作原理及功能特点分类

CSS 跨浏览器动画技巧(液体/粘糊糊的复选框动画)