utils-＞css-＞features功能函数

最新推荐文章于 2023-11-30 16:14:17 发布

BIEJIANLE

最新推荐文章于 2023-11-30 16:14:17 发布

阅读量504

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/BIEJIANLE/article/details/120489895

版权

本文介绍了前端开发中的一些实用技巧，包括清除浮动以解决布局问题，修复IE浏览器中FontAwesome图标不显示的解决方案，禁止用户选中文本以及创建鼠标悬停时元素跟随的hover效果。这些技巧对于提升网页交互性和用户体验至关重要。

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

// 功能
// 1.去除浮动,高度缺失---------------------------------------
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// 2.ie浏览器中Font Awesome图标不显示----------------------------
// .elicondate:before {
//   content: "\e78e";
// }

// .elicondate {
// *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#e78e;');
// }

// 3.禁止用户选中----------------------------
// .banToSelect{
//   -webkit-user-select: none;
//   -moz-user-select: none;
//   -khtml-user-select: none;
//    user-select: none;
// }


// 4.hover鼠标跟随----------------------------
@function randomNum($max, $min: 0, $u: 1) {
  @return ($min + random($max)) * $u;
}

.mouse-following {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  height: 100%;
  cursor: pointer;

  li {
    position: relative;
    width: 30px;
    height: 30px;

    &::before {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 100%;
      background-color: transparent;
      content: "";
      transform: scale3d(.1, .1, 1);
      transition: all 500ms ease-in;
    }

    &:hover {
      &::before {
        transform: scale3d(1.8, 1.8, 1.8);
        transition: transform 0s;
      }
    }

    @for $i from 1 through 500 {
      &:nth-child(#{$i}):hover {
        &::before {
          background-color: rgba(randomNum(255), randomNum(255), randomNum(255), .8);
        }
      }
    }
  }
}


// 5.模拟视差滚动----------------------------