div+css实现软硬菜刀云朵效果代码-html代码-BFW代码库

div+css实现软硬菜刀云朵效果代码

代码语言：html

代码描述：div+css实现软硬菜刀云朵效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
        overflow: hidden;
}

.btn-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
        padding: 20px;
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
}

.btn {
        background-color: #fff;
        color: #fff;
        height: 4.4rem;
        width: 10rem;
        text-align: center;
        line-height: 4.5rem;
        margin: 0 auto;
        font-size: 1.5rem;
        user-select: none;
}

.btn-txt{
        height: 100%;
        width: 60%;
        position: relative;
        margin: 0 auto;
        font-size: 1.8rem;
}

.btn:hover {
        cursor: pointer;
}

.soft-container {
        min-width: 20rem;
        height: 100vh;
        background: #f9f9f9;
}
.sharp-container{
        background: #222;
        min-width: 20rem;
        height: 100vh;
}

.soft {
        color: #222;
        background: #fff;
        border-radius: 2rem;
        transition: .2s;
        animation: puff infinite 5s;
        filter: drop-shadow(10px 7px 0.75rem #ddd);
        top: 50%;
        left: 0;
        position: relative;
}

.soft-txt{
        font-family: 'Rubik Bubbles';
  background: -webkit-linear-gradient(#89CFF0,#87CEEB);
        -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.soft div:nth-child(2) {
        background-color: #fff;
        height: 60px;
        width: 60px;
        border-radius: .........完整代码请登录后点击上方下载按钮下载查看