css实现伸缩性透明文字提示点击查看更多效果代码-html代码-BFW代码库

css实现伸缩性透明文字提示点击查看更多效果代码

代码语言：html

代码描述：css实现伸缩性透明文字提示点击查看更多效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .teaser {
          background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
          backdrop-filter: blur(2px);
          box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), inset 10px 10px 30px rgba(255, 255, 255, 0.2), inset -10px -10px 30px rgba(255, 255, 255, 0.2);
          border-top: 1px solid rgba(255, 255, 255, 0.5);
          border-left: 1px solid rgba(255, 255, 255, 0.5);
          border-radius: 32px;
          padding: 30px 40px;
          max-width: 250px;
          max-height: 250px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          flex-direction: column;
          cursor: pointer;
          transition: 500ms max-width cubic-bezier(0.25, 0.75, 0.5, 1.25) calc(500ms * 2), 500ms max-height cubic-bezier(0.25, 0.75, 0.5, 1.25) 500ms;
        }
        .teaser.active {
          max-width: 400px;
          max-height: 400px;
          transition: 500ms max-width cubic-bezier(0.25, 0.75, 0.5, 1.25) 0ms, 500ms max-height cubic-bezier(0.25, 0.75, 0.5, 1.25) 500ms;
        }
        .teaser h3 {
          margin: 10px 0;
        }
        .teaser .info {
          opacity: 0;
          max-width: 0;
          max-height: 0;
          transition: 500ms max-width cubic-bezier(0.25, 0.75, 0.5, 1.25) calc(500ms * 2), 500ms max-height cubic-bezier(0.25, 0.75, 0.5, 1.25) 500ms, 500ms opacity cubic-bezier(0.25, 0.75, 0.5, 1.25) 0ms;
        }
        .teaser .info p {
          margin: 10px 0;
        }
        .teaser .info.active {
          max-width: 400px;
          max-height: 400px;
          opacity: 1;
          transition: 400ms max-width cubic-bezier(0.........完整代码请登录后点击上方下载按钮下载查看