react中设置页面警示效果

最新推荐文章于 2022-08-04 10:38:19 发布

L863683305

最新推荐文章于 2022-08-04 10:38:19 发布

阅读量242

点赞数

文章标签： reactjs 前端

本文链接：https://blog.csdn.net/L863683305/article/details/124408556

版权

这篇博客展示了如何利用JavaScript的状态管理（useState）和CSS来创建两种不同的页面布局：正常状态和错误状态。在正常状态下，页面采用基础的Flex布局；当触发错误状态时，通过添加伪元素和模糊滤镜，为`.wrapper_err`和`.main_err`类添加动态效果，以显示错误提示。错误状态的伪元素增加了阴影和模糊效果，增强了视觉反馈。

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

js文件:

const [triggerStyle, setTriggerStyle] = useState(null)

return(
	<div className={`wrapper_${triggerStyle}`}>
		<div className={`main_${triggerStyle}`}>
			<组件1/>
			...
		</div>
	</div>
)

css文件：

.wrapper_normal {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main_normal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  background: #FFFFFF;
}

.wrapper_err {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.wrapper_err::before {
  content: '';
  display: block;
  position: absolute;
  width: 80%;
  margin: 0 auto;
  height: 10px;
  left: 180px;
  border-radius: 50%;
  box-shadow: 0px -5px 10px 30px rgba(232, 56, 40, 0.5);
  filter: blur(50px)
}

.wrapper_err::after {
  content: '';
  display: block;
  position: absolute;
  width: 80%;
  margin: 0 auto;
  left: 180px;
  height: 10px;
  bottom: 0;
  border-radius: 50%;
  box-shadow: 0px 150px 10px 30px rgba(232, 56, 40, 0.5);
  filter: blur(50px)
}

.main_err {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  background: #FFFFFF;
}

.main_err::before {
  content: '';
  display: block;
  width: 2px;
  top: 17px;
  bottom: 25px;
  border-radius: 50%;
  box-shadow: 0px -5px 10px 30px rgba(232, 56, 40, 0.5);
  filter: blur(50px)
}

.main_err::after {
  content: '';
  display: block;
  position: absolute;
  top: 17px;
  bottom: 25px;
  right: 0;
  width: 2px;
  border-radius: 50%;
  box-shadow: 0px -5px 10px 30px rgba(232, 56, 40, 0.5);
  filter: blur(50px)
}

最终效果图：
在这里插入图片描述