js+css实现投票调查百分百显示柱状图动画效果代码-html代码-BFW代码库

js+css实现投票调查百分百显示柱状图动画效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现投票调查百分百显示柱状图动画效果代码

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");

:root {
    --canvas: 220;
    --bg: hsl(var(--canvas), 15%, 22%);
    --fg: hsl(var(--canvas), 39%, 95%);
    --link: hsl(var(--canvas), 90%, 80%);
    --linkh: hsl(150, 95%, 70%);
    --wgt: 200;
}

body,
html {
    font-family: heebo, sans-serif;
    color: var(--fg);
    background: var(--bg);
    font-weight: var(--wgt);
    padding: 0 0 50px;
    display: grid;
    place-items: center;
    height: 100%;
}

a {
    color: var(--link);
    text-decoration: none;
    font-weight: 450;
    transition: all 0.3s ease;
}
a:hover,
a:focus,
a:active {
    color: var(--linkh);
}
button {
    background: hsl(var(--canvas), 10%, 10%);
    color: inherit;
    border: none;
    border-radius: 0.5em;
    padding: 0.25em 0.5em;
    font-family: inherit;
    font-size: inherit;
}
.social-icon {
    stroke-width: 1.25;
    stroke: currentColor;
    fill: transparent;
    background: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    z-index: 10;
    animation: iconsLoad 10s ease both 5s;
}
.social-icon path {
    fill: none;
}
.social-icon.twitter {
    right: 40px;
    animation-delay: 4s;
}
.social-icon.codepen {
    bottom: 10px;
    right: 80px;
    width: max-content;
    animation-delay: 3s;
}
@keyframes iconsLoad {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
    :root {
  /* vars */
  --post-bg: rgb(14, 14, 17);
  --t: .4s;
  --ease: linear(0,.005,.02 2.2%,.045,.081 4.9%,.16 7.3%,.465 16.2%,.561,.642,.713 25.8%,.773,.825 32.7%,.868 36.5%,.905 40.9%,.935 45.7%,.958 51.1%,.975 57.4%,.986 64.4%,.993 73.1%,.997 84.1%,.999);
  --ease-bar: linear(
    0, 0.005, 0.02, 0.045, 0.081 5%, 0.16 7.6%, 0.463 16.6%, 0.558, 0.639, 0.709,
    0.769, 0.82 33.3%, 0.863 37.1%, 0.902 41.6%, 0.932 46.5%, 0.956 51.9%,
    0.973 58.2%, 0.985 65.3%, 0.992 73.8%, 0.997 84.7%, 0.999
  );
  --trans: all var(--t) var(--ease);
  --star-color: 210deg; 
  --star-time: 7s;
  --star-ease: cubic-bezier(0.75, 0, 0.25, 1);
}



.post {
  padding:  1.5rem 1rem 2rem;
  padding-left: 3rem;
  border-bottom: 1px solid hsl(0deg 0% 100% / 10%);
}

.poll.........完整代码请登录后点击上方下载按钮下载查看