[100天挑战100个前端效果]第八天---水滴融合(请把光的力量借给我吧！)

最新推荐文章于 2023-06-16 20:49:15 发布

钧桐

最新推荐文章于 2023-06-16 20:49:15 发布

阅读量213

点赞数

分类专栏： 100天挑战100个前端效果文章标签： html css3

本文链接：https://blog.csdn.net/qq_42136832/article/details/115260843

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

水滴融合！

让我们先来看看实现的效果
- html代码
- css代码
今日份知识总结

说到融合，我真的是激动不已，奥特融合回荡在我的脑海！系啊~~~~
泽塔提姆光线-------

让我们先来看看实现的效果

在这里插入图片描述

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	用于应用滤镜以设置图像的对比度