金光特效（less）

神说要有光 ye

于 2022-07-26 09:30:10 发布

阅读量293

点赞数

分类专栏： # 动画效果文章标签： less css css3

本文链接：https://blog.csdn.net/weixin_42657313/article/details/125987297

版权

动画效果专栏收录该内容

9 篇文章 0 订阅

订阅专栏

金光特效

效果
React代码
less代码
总结

效果

在这里插入图片描述

React代码

import React,{ FC, useEffect } from 'react';
import  styles from './index.less'

interface Props{
  style:any
}
const Flash: FC<Props> = (props: Props) => {
  const {style} = props

 return(
  <div
   className={styles.gContainer} 
   style={style}
   >
  <div className={styles.Group}>
      <div className={styles.right}/>
      <div className={styles.left}/> 
      <div className={styles.top}/>
      <div className={styles.bottom}/>  
      <div className={styles.middle}/>    
  </div>
</div>
 )

}

export default Flash;

less代码

//设置金色特效
/*less循环  传入参数为要生成盒子阴影的个数，
随机生成位移范围7.5rem*12rem*/
.mixin(@n) when(@n>0) {
  box-shadow+ : ~`Math.random() * 750 + 'px' + ' ' + Math.random() * 1200 + 'px #fdd869' `;
  .mixin(@n - 1);
}

.gContainer{
 width: 375px;
 height: 667px;
 background-color: black;
  position: absolute;
  top: 30%;
  left: 50%;
  margin: auto;
  perspective: 0.05rem;
  perspective-origin: 50% 50%;
  transform: translateX(-50%);
  .Group{
      position: absolute;
      width: 4rem;
      height: 6rem;
      left: -2rem;
      top: -3rem;
      transform-style: preserve-3d;
      animation: move 4s infinite linear;
      .right{
          transform: rotateY(90deg) translateZ(3rem);
          .item();
      }
      .left{
          transform: rotateY(-90deg) translateZ(3rem);
          .item();
      }
      .top{
          transform: rotateX(90deg) translateZ(3rem);
          .item();
      }
      .bottom{
          transform: rotateX(-90deg) translateZ(3rem);
          .item();
      }
      .middle{
          transform: rotateX(180deg) translateZ(0.1rem);
          .item();
      }
  }
}

.item{
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 1;
  &::after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 0.15rem;
      height: 0.15rem;
      border-radius: 50%;
      .mixin(200);
  }
}

@keyframes move {
  0%{
      transform: translateZ(-1rem) rotate(0deg);
  }
  100%{
      transform: translateZ(1rem) rotate(0deg);
  }
}