<!DOCTYPE html>
//css div代码渐变色
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
		  background-color: #1e293b;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  min-height: 100vh;
		  font-family: Helvetica;
		}
		
		.card {
		  width: 400px;
		  height: 400px;
		  position: relative;
		  border-radius: 40px;
		  padding: 40px;
		  box-sizing: border-box;
		  overflow: hidden;
		  box-shadow: inset 0px 0px 40px rgba(0, 0, 0, .8), 0px 8px 20px rgba(0, 0, 0, .6);
		}
		
		.card::after {
		  content: '';
		  position: absolute;
		  top: -300px;
		  right: -300px;
		  bottom: -300px;
		  left: -300px;
		  background: conic-gradient(from 180deg at 50% 50%, #12001B -97.5deg, #000000 14.05deg, #040EFF 54.01deg, #8000FF 113.42deg, #00B6B6 185.62deg, #12001B 262.5deg, #000000 374.05deg);
		filter: blur(60px) brightness(1.5);
		  z-index: -1;
		  animation: 30s move linear infinite;
		}
		
		h2 {
		  margin: 0;
		  padding: 0;
		  font-size: 60px;
		  letter-spacing: -1px;
		  color: #fff;
		  text-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
		}
		
		span {
		  font-size: 50px;
		  font-weight: normal;
		  display: block;
		}
		
		.card > div {
		  background-color: rgba(0, 0, 0, 0.5);
		  padding: 20px 40px;
		  font-size: 32px;
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  color: #fff;
		}
		
		@keyframes move {
		  from {
		    transform: rotate(180deg);
		  }
		  to {
		    transform: rotate(540deg);
		  }
		}
	</style>
	<body>
		<div class="card">
		  <h2>React JS<span>Fundamental</span></h2>
		  <div>Learn More</div>
		</div>
	</body>
</html>
# css # 前端 # html # css3 # html5
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 三方库 screen_state 的 OpenHarmony 适配实战

亮屏事件（SCREEN_ON）— 设备屏幕点亮时推送事件熄屏事件（SCREEN_OFF）— 设备屏幕熄灭时推送事件解锁事件（SCREEN_UNLOCKED）— 用户解锁设备时推送事件后台运行监听— 应用退到后台后仍持续接收屏幕状态事件统一事件流 API— 通过消费所有事件该三方库最初支持两个平台，本次任务将其适配到平台。项目地址将一个 Flutter 三方库适配到 OHOS 平台，核心路径可以概括

avatar 开源鸿蒙跨平台开发者社区
cover

开源鸿蒙跨平台开发全景解读：框架有哪些、进度到哪了、该怎么学、能共建什么

avatar 开源鸿蒙跨平台开发者社区

Flutter 三方库 phone_state 的 OpenHarmony 适配实战

通话状态感知：实时上报来电中（）、通话中（）、通话结束（CALL_ENDED）等状态通话时长统计：通话建立后每秒刷新通话时长来电号码获取：来电时获取对方号码（Android 平台可用）无额外操作副作用：仅感知状态，不接听、不拒接、不结束通话该三方库最初支持 Android、iOS 两个平台，本次任务将其适配到平台。项目地址将一个 Flutter 三方库适配到 OHOS 平台，核心路径可以概括为三步

avatar 开源鸿蒙跨平台开发者社区