div+css实现文字阴影立体动画拖影效果代码

代码语言:html

所属分类:动画

代码描述:div+css实现文字阴影立体动画拖影效果代码

代码标签: div css 文字 阴影 立体 动画 拖影

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f0f4f8;
}

.wrapper-gradient-text {
	font-size: 150px;
	font-weight: bold;
	display: flex;
	color: transparent;
	perspective: 270px;
}

.text-layer {
	position: relative;
	transform: rotateX(-30deg) translateZ(70px);
	background: linear-gradient(
		109.6deg,
		rgba(112, 246, 255, 0.33) 11.2%,
		rgba(221, 108, 241, 0.26) 42%,
		rgba(229, 106, 253, 0.71) 71.5%,
		rgba(123, 183, 253, 1) 100.2%
	);
	text-shadow: 0px 15px 0px rgba(112, 246, 255, 0.33);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparen.........完整代码请登录后点击上方下载按钮下载查看

网友评论0