css实现扑克牌抽牌倒计时计时动画效果代码-html代码-BFW代码库

css实现扑克牌抽牌倒计时计时动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现扑克牌抽牌倒计时计时动画效果代码盒子分解动画效果代码，没有任何js代码，纯css+div实现。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Heebo:wght@100;400&amp;display=swap'>

    <style>
        :root {
          --body-bi:
           linear-gradient(30deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(150deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(30deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(150deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(60deg, #D7D0C877 25%, transparent 25.5%, transparent 75%, #D7D0C877 75%, #D7D0C877),
           linear-gradient(60deg, #D7D0C877 25%, transparent 25.5%, transparent 75%, #D7D0C877 75%, #D7D0C877);
          --spades: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,5 5,45 45,45' fill='none' stroke='%23ffffff' stroke-width='3' /%3e%3c/svg%3e");
          --clubs: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3ccircle cx='25' cy='15' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3ccircle cx='13.5' cy='35' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3ccircle cx='36.5' cy='35' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3c/svg%3e");
          --diamonds: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,5 45,25 25,45 5,25' fill='none' stroke='%23e04633' stroke-width='3' /%3e%3c/svg%3e");
          --hearts: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,45 5,5 45,5' fill='none' stroke='%23e04633' stroke-width='3' /%3e%3c/svg%3e");
          --joker: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M87.72,57.93c0,2.78-2.26,5.04-5.04,5.04s-5.03-2.26-5.03-5.04c0-.43,.05-.85,.16-1.25l-7.79-1.9h-.42c.46,1.79,.71,3.68,.71,5.64,0,11.23-11.01,.........完整代码请登录后点击上方下载按钮下载查看