设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 【炫酷】纯CSS竟然能实现这么漂亮的卡片动画特效！ ...
返回列表 发新帖
查看: 37|回复: 0

【炫酷】纯CSS竟然能实现这么漂亮的卡片动画特效！

[复制链接]
yycvip

94

主题

36

回帖

849

积分

管理员

积分
849
发表于 7 天前 | 显示全部楼层 |阅读模式
动画展示

6401.gif
完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  10. <style>
  11.   .parent {
  12.     width: 290px;
  13.     height: 300px;
  14.     perspective: 1000px;
  15.   }

  17.   .card {
  18.     height: 100%;
  19.     border-radius: 50px;
  20.     background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
  21.     transition: all 0.5s ease-in-out;
  22.     transform-style: preserve-3d;
  23.     box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
  24.   }

  26.   .glass {
  27.     transform-style: preserve-3d;
  28.     position: absolute;
  29.     inset: 8px;
  30.     border-radius: 55px;
  31.     border-top-right-radius: 100%;
  32.     background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  33.     transform: translate3d(0px, 0px, 25px);
  34.     border-left: 1px solid white;
  35.     border-bottom: 1px solid white;
  36.     transition: all 0.5s ease-in-out;
  37.   }

  39.   .content {
  40.     padding: 100px 60px 0px 30px;
  41.     transform: translate3d(0, 0, 26px);
  42.   }

  44.   .content .title {
  45.     display: block;
  46.     color: #00894d;
  47.     font-weight: 900;
  48.     font-size: 20px;
  49.   }

  51.   .content .text {
  52.     display: block;
  53.     color: rgba(0, 137, 78, 0.7647058824);
  54.     font-size: 15px;
  55.     margin-top: 20px;
  56.   }

  58.   .bottom {
  59.     padding: 10px 12px;
  60.     transform-style: preserve-3d;
  61.     position: absolute;
  62.     bottom: 20px;
  63.     left: 20px;
  64.     right: 20px;
  65.     display: flex;
  66.     align-items: center;
  67.     justify-content: space-between;
  68.     transform: translate3d(0, 0, 26px);
  69.   }

  71.   .bottom .view-more {
  72.     display: flex;
  73.     align-items: center;
  74.     width: 40%;
  75.     justify-content: flex-end;
  76.     transition: all 0.2s ease-in-out;
  77.   }

  79.   .bottom .view-more:hover {
  80.     transform: translate3d(0, 0, 10px);
  81.   }

  83.   .bottom .view-more .view-more-button {
  84.     background: none;
  85.     border: none;
  86.     color: #00c37b;
  87.     font-weight: bolder;
  88.     font-size: 12px;
  89.   }

  91.   .bottom .view-more .svg {
  92.     fill: none;
  93.     stroke: #00c37b;
  94.     stroke-width: 3px;
  95.     max-height: 15px;
  96.   }

  98.   .bottom .social-buttons-container {
  99.     display: flex;
  100.     gap: 10px;
  101.     transform-style: preserve-3d;
  102.   }

  104.   .bottom .social-buttons-container .social-button {
  105.     width: 30px;
  106.     aspect-ratio: 1;
  107.     padding: 5px;
  108.     background: rgb(255, 255, 255);
  109.     border-radius: 50%;
  110.     border: none;
  111.     display: grid;
  112.     place-content: center;
  113.     box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
  114.   }

  116.   .bottom .social-buttons-container .social-button:first-child {
  117.     transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
  118.   }

  120.   .bottom .social-buttons-container .social-button:nth-child(2) {
  121.     transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
  122.   }

  124.   .bottom .social-buttons-container .social-button:nth-child(3) {
  125.     transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
  126.   }

  128.   .bottom .social-buttons-container .social-button .svg {
  129.     width: 15px;
  130.     fill: #00894d;
  131.   }

  133.   .bottom .social-buttons-container .social-button:hover {
  134.     background: black;
  135.   }

  137.   .bottom .social-buttons-container .social-button:hover .svg {
  138.     fill: white;
  139.   }

  141.   .bottom .social-buttons-container .social-button:active {
  142.     background: rgb(255, 234, 0);
  143.   }

  145.   .bottom .social-buttons-container .social-button:active .svg {
  146.     fill: black;
  147.   }

  149.   .logo {
  150.     position: absolute;
  151.     right: 0;
  152.     top: 0;
  153.     transform-style: preserve-3d;
  154.   }

  156.   .logo .circle {
  157.     display: block;
  158.     position: absolute;
  159.     aspect-ratio: 1;
  160.     border-radius: 50%;
  161.     top: 0;
  162.     right: 0;
  163.     box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
  164.     -webkit-backdrop-filter: blur(5px);
  165.     backdrop-filter: blur(5px);
  166.     background: rgba(0, 249, 203, 0.2);
  167.     transition: all 0.5s ease-in-out;
  168.   }

  170.   .logo .circle1 {
  171.     width: 170px;
  172.     transform: translate3d(0, 0, 20px);
  173.     top: 8px;
  174.     right: 8px;
  175.   }

  177.   .logo .circle2 {
  178.     width: 140px;
  179.     transform: translate3d(0, 0, 40px);
  180.     top: 10px;
  181.     right: 10px;
  182.     -webkit-backdrop-filter: blur(1px);
  183.     backdrop-filter: blur(1px);
  184.     transition-delay: 0.4s;
  185.   }

  187.   .logo .circle3 {
  188.     width: 110px;
  189.     transform: translate3d(0, 0, 60px);
  190.     top: 17px;
  191.     right: 17px;
  192.     transition-delay: 0.8s;
  193.   }

  195.   .logo .circle4 {
  196.     width: 80px;
  197.     transform: translate3d(0, 0, 80px);
  198.     top: 23px;
  199.     right: 23px;
  200.     transition-delay: 1.2s;
  201.   }

  203.   .logo .circle5 {
  204.     width: 50px;
  205.     transform: translate3d(0, 0, 100px);
  206.     top: 30px;
  207.     right: 30px;
  208.     display: grid;
  209.     place-content: center;
  210.     transition-delay: 1.6s;
  211.   }

  213.   .logo .circle5 .svg {
  214.     width: 20px;
  215.     fill: white;
  216.   }

  218.   .parent:hover .card {
  219.     transform: rotate3d(1, 1, 0, 30deg);
  220.     box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
  221.   }

  223.   .parent:hover .card .bottom .social-buttons-container .social-button {
  224.     transform: translate3d(0, 0, 50px);
  225.     box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
  226.   }

  228.   .parent:hover .card .logo .circle2 {
  229.     transform: translate3d(0, 0, 60px);
  230.   }

  232.   .parent:hover .card .logo .circle3 {
  233.     transform: translate3d(0, 0, 80px);
  234.   }

  236.   .parent:hover .card .logo .circle4 {
  237.     transform: translate3d(0, 0, 100px);
  238.   }

  240.   .parent:hover .card .logo .circle5 {
  241.     transform: translate3d(0, 0, 120px);
  242.   }
  243. </style>

  245. <body>
  246.   <div class="parent">
  247.     <div class="card">
  248.       <div class="logo">
  249.         <span class="circle circle1"></span>
  250.         <span class="circle circle2"></span>
  251.         <span class="circle circle3"></span>
  252.         <span class="circle circle4"></span>
  253.         <span class="circle circle5">
  254.           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
  255.             <path id="Path_6" data-name="Path 6"
  256.               d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z"
  257.               transform="translate(0 0)"></path>
  258.             <path id="Path_7" data-name="Path 7"
  259.               d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z"
  260.               transform="translate(-45.91 0)"></path>
  261.             <path id="Path_8" data-name="Path 8"
  262.               d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z"
  263.               transform="translate(0 -51.963)"></path>
  264.           </svg>
  265.         </span>

  267.       </div>
  268.       <div class="glass"></div>
  269.       <div class="content">
  270.         <span class="title">UIVERSE (3D UI)</span>
  271.         <span class="text">Create, share, and use beautiful custom elements made with CSS</span>
  272.       </div>
  273.       <div class="bottom">

  275.         <div class="social-buttons-container">
  276.           <button class="social-button .social-button1">
  277.             <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
  278.               <path
  279.                 d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z">
  280.               </path>
  281.             </svg></button>
  282.           <button class="social-button .social-button2">
  283.             <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
  284.               <path
  285.                 d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
  286.               </path>
  287.             </svg>
  288.           </button>
  289.           <button class="social-button .social-button3">
  290.             <svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
  291.               <path
  292.                 d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z">
  293.               </path>
  294.             </svg>
  295.           </button>
  296.         </div>
  297.         <div class="view-more">
  298.           <button class="view-more-button">View more</button>
  299.           <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round"
  300.             stroke-linejoin="round">
  301.             <path d="m6 9 6 6 6-6"></path>
  302.           </svg>
  303.         </div>
  304.       </div>
  305.     </div>
  306.   </div>
  307. </body>

  309. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表