圆形div变形动画-html代码-BFW代码库

圆形div变形动画

代码语言：html

代码描述：圆形div变形动画

代码标签：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap');

html, body{
        padding:20px 0;
        margin:0;
        background:white;
        background-image:radial-gradient(#FFF, #E1E1E1);
        width:100vw;
        height:100vh;
        display:table-cell;
        vertical-align:middle;
}

#blob, button{
        margin:auto;
        display:block;
}

#blob{
        position:relative;
        width:300px;
        height:300px;
        /*debug - background-color:red;*/
        border-radius:50%;
        overflow:hidden;
}

button{
        margin-top:80px;
        border-radius:6px;
        background-color:transparent;
        border:4px solid #3F3D56;
        font-family:"Exo", Arial, sans-serif;
        font-size:20px;
        font-weight:600;
        padding:10px 20px;
        outline:none;
        color:#3F3D56;cursor:pointer;
}

button:active{
        color:#6C63FF;
        border-color:#6C63FF;
        transform:rotate(0.........完整代码请登录后点击上方下载按钮下载查看