css实现一个对话框

最新推荐文章于 2023-10-24 17:41:19 发布

芒果沙冰哟

最新推荐文章于 2023-10-24 17:41:19 发布

阅读量201

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_61476911/article/details/127498364

版权

看看效果图:

看一下代码:

<template>
  <div>
    <!-- 对话框 -->
    <div class="item"></div>
    <!-- 梯形 -->
    <div class="box"></div>
    <!-- 跳动的爱心 -->
    <div class="heart"></div>
  </div>
</template>

<script>
  export default {}
</script>

<style lang="scss" scoped>
  .item {
    margin: 100px;
    position: relative;
    width: 300px;
    height: 100px;
    border: 2px solid #f1a456;
    border-radius: 10px;
    background-color: #fdf3e6;
  }
  .item::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 40%;
    width: 20px;
    height: 20px;
    background: #fdf3e6;
    z-index: 0;
    border: 2px solid #f1a456;
    border-left: transparent;
    border-bottom: transparent;
    transform: rotate(45deg);
    /* transform: translateY(-50%); */
  }
  .box {
    margin: 100px;
    border-bottom: 70px solid #333333;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 160px;
  }
  .heart {
    margin: 100px;
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    transform: rotate(45deg) scale(1);
    animation: dong 1s infinite;
    transition: all 0.3s;
  }
  .heart::after,
  .heart::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: red;
    border-radius: 50%;
  }
  .heart::after {
    top: -54px;
  }
  .heart::before {
    left: -54px;
  }
  @keyframes dong {
    0% {
      transform: rotate(45deg) scale(1);
    }
    100% {
      transform: rotate(45deg) scale(0.8);
    }
  }
</style>