金光特效（less）

最新推荐文章于 2024-10-17 23:12:50 发布

原创

最新推荐文章于 2024-10-17 23:12:50 发布 · 580 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#less #css #css3

本文介绍了如何利用React组件和Less预处理器创建一个金光特效。通过理解CSS3的perspective属性和Less的循环功能，可以实现3D变换的视觉效果。关键点在于设置正确的CSS3变换和阴影效果，以及运用Less的循环生成随机的盒子阴影，从而达到动态的金光闪烁特效。

金光特效

效果
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}/>