水滴融合！
说到融合，我真的是激动不已，奥特融合回荡在我的脑海！系啊~~~~
泽塔提姆光线-------
让我们先来看看实现的效果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第八天</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
</div>
</body>
</html>
css代码
:root{
--background-color:rgb(39, 40, 43);
}
*{
margin: 0;
padding: 0;
}
html{
font-size:14px;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
}
.container{
position: relative;
width: 200px;
height: 200px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
filter: contrast(30);
z-index: 10;
overflow: hidden;
}
.drop{
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 100%;
filter: blur(10px);
animation: drop 2.5s linear infinite;
z-index: 2;
}
.drop:nth-child(2){
animation-delay: 1s;
}
.drop:nth-child(3){
animation-delay: 2s;
}
.collection{
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 100%;
filter: blur(10px);
animation: collection 2s linear infinite;
}
@keyframes drop{
0%{
transform: scale(0.8) translateY(-150px);
}
50%{
transform: scale(0.5) translateY(-50px);
}
100%{
transform: scale(0.2) translateY(0px);
}
}
@keyframes collection{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.3) rotate(180deg);
height: 30px;
}
100%{
transform: scale(1) rotate(360deg);
}
}
今日份知识总结
| 标签 | 作用 |
|---|---|
| transform | 应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等 |
| scale | 实现元素的缩放效果 |
| translateY | 在页面垂直移动元素 |
| rotate | 旋转而不变形的转换 |
| contrast | 用于应用滤镜以设置图像的对比度 |