当前位置：网站首页>520 bubble source code

520 bubble source code

2022-06-21 06:35:00 【GUIDM】

This week, I'm in a hurry , The seventh issue will be updated next week , At the end of the weekend , Take my last 520 The moving bubble code is stuck to blog in , Missing placement ha ha 

<!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> Bubble </title>
    <style>
*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(150deg,#d299c2,#fef9d7);
    overflow: hidden;
}
.container{
     width: 200px;
     height: 200px;
     position: relative;
}
.bubble{
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px #fff,
                inset 10px 0 46px #eaf5fc,
                inset 80px 0 60px #efcde6,
                inset -20px -60px 100px #f9f6de,
                inset 0 50px 140px #f9f6de,
                0 0 90px #fff;     
    animation: bubble 4s ease-in-out infinite;                      
}
.showed{
    background-color:rgba(39, 211, 139, 0.15);
    
    animation: showed 4s ease-in-out infinite;
}
@keyframes bubble{
     0%,100%{
         transform: translateY(0);
     }
     50%{
         transform: translateY(-80px);
     }
}
@keyframes showed{
    0%,100%{
        transform: scale(0.5);

    }
    50%{

        transform: scale(1);
    }
}
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="bubble"></div>
    <div class="showed"></div>
</body>
</html>

 

 

原网站

版权声明
本文为[GUIDM]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/172/202206210606586015.html

边栏推荐

猜你喜欢

随机推荐