Vue纯CSS实现掷色子

效果图:

在这里插入图片描述

在这里插入图片描述

实现代码

直接利用CSS3动画实现的效果,无js代码。

<template>
    <div class="wrap">
        <input type="checkbox" id="roll">
        <label for="roll">
            <div class="content"></div>
        </label>
    </div>
  </template>
     
  <script>
    export default {
      name: "App",
      created() {
  
      },
      data(){
          return{
  
          }
      },
      methods: {
      }
    };
  </script>
  
  <style lang="scss" scoped>
      .wrap {
        display: flex;
        width: 100vw;
        height: 100vh;
        margin:0;
        padding:0;
        justify-content: center;
        align-items: center;
    }
    .content {
        background: url(./dice.webp);
        background-position: 0% 100%;
        width: 366px;
        height: 366px;
        animation: roll .2s steps(5,start) infinite;
        position:relative;
    }
    @keyframes roll {
      /* from {
        background-position: 0% 100%;
      } */
      to {
        background-position: 100% 100%;
      }
    }
    #roll {
      display: none;
    }
    #roll:checked + label .content {
      animation-play-state: paused;
    }
    .content::before {
      content:'?';
      background:rgba(255,255,255,.8);
      width: inherit;
      height: inherit;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:320px;
      font-family: Helvetica;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 60px;
    }
    #roll:checked +label .content::before{
      display: none;
    }
  </style>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue提供了过渡动画的内置支持,可以通过Vue的transition组件来实现过渡动画。在transition组件中,可以定义进入动画、离开动画和过渡模式等。同时,CSS也提供了丰富的动画效果,可以通过CSS的transition属性来实现过渡动画。 下面是一个使用VueCSS实现过渡动画的示例: ```html <template> <div> <button @click="show = !show">Toggle</button> <transition name="fade"> <p v-if="show">Hello, World!</p> </transition> </div> </template> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <script> export default { data() { return { show: false }; } }; </script> ``` 在上面的示例中,我们定义了一个按钮和一个包裹着文本的transition组件。文本的显示与隐藏通过控制show属性来实现。同时,我们也定义了一个名为"fade"的transition,它定义了进入和离开动画的方式。 在CSS中,我们定义了两个类名为"fade-enter-active"和"fade-leave-active",它们分别表示进入和离开动画的状态。这里我们使用了CSS的transition属性,它指定了过渡的属性和时长。在这个例子中,我们使用opacity属性和0.5秒的时长来实现淡入淡出的效果。 同时,我们也定义了类名为"fade-enter"和"fade-leave-to",它们分别表示进入和离开动画的初始和结束状态。在这个例子中,我们将opacity属性的值设置为0,表示文本初始时是透明的,离开时也是透明的。 通过这样的方式,我们就可以使用VueCSS实现过渡动画了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值