box-reflect

最新推荐文章于 2024-05-09 11:02:42 发布

用户身份不明

最新推荐文章于 2024-05-09 11:02:42 发布

阅读量234

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_55741908/article/details/124804083

版权

这篇博客介绍了如何使用CSS创建一个带有动态反射效果的按钮。通过设置不同的方向、距离和遮罩图像，可以实现按钮的倒影效果。同时，利用关键帧动画为按钮添加了四个角的彩色线条流动效果，增强了视觉吸引力。文章详细讲解了CSS代码实现这些效果的步骤和技巧。

摘要由CSDN通过智能技术生成

3个参数：

1. direction 定义方向：above 、 below 、 left 、 right。

above：

指定倒影在对象的上边

below：

指定倒影在对象的下边

left：

指定倒影在对象的左边

right：

指定倒影在对象的右边

2. offset距离，倒影和div之间的距离，可以为负数（px）

3. mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。

取值：

none：无遮罩图像：

使用绝对或相对地址指定遮罩图像。

使用线性渐变创建遮罩图像。

使用径向(放射性)渐变创建遮罩图像。

使用重复的线性渐变创建背遮罩像。

使用重复的径向(放射性)渐变创建遮罩图像。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a class="success">BUTTON
    <span></span>
    <span></span>
    <span></span>
    <span></span></a>

</body>

</html>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body,
  html {
    background: #000;
    width: 100%;
    height: 100%;
  }

  a span {
    position: absolute;
    display: block;
  }

  a {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    color: #ff5500;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
    border-radius: 10px;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
  }

  a:hover {
    box-shadow: 0 0 5px #03e9f4,
      0 0 25px #03e9f4,
      0 0 50px #03e9f4,
      0 0 200px #03e9f4;

    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
  }

  a:link {
 
    animation: anrotate 1s linear infinite;
  }

  @keyframes anrotate {
    0% {
         transform-origin: left top;
      transform: scale(1.2) translate(-50%, -50%);
    }

    25% {
         transform-origin: left top;
      transform: scale(1) translate(-50%, -50%);
    }

    75% {
         transform-origin: left top;
      transform: scale(1.2) translate(-50%, -50%);
    }

    100% {
         transform-origin: left top;
      transform: scale(1) translate(-50%, -50%);
    }
  }

  a span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ff5500);
    animation: animate1 1s linear infinite;
  }

  @keyframes animate1 {
    0% {
      left: -100%;
    }

    50%,
    100% {
      left: 100%;
    }
  }

  a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ff5500);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
  }

  @keyframes animate2 {
    0% {
      top: -100%;
    }

    50%,
    100% {
      top: 100%;
    }
  }



  a span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg, transparent, #ff5500);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
  }

  @keyframes animate3 {
    0% {
      right: -100%;
    }

    50%,
    100% {
      right: 100%;
    }
  }


  a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #ff5500);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
  }

  @keyframes animate4 {
    0% {
      bottom: -100%;
    }

    50%,
    100% {
      bottom: 100%;
    }
  }
</style>