css布局实现沙地沙滩中文字效果代码-html代码-BFW代码库

css布局实现沙地沙滩中文字效果代码

代码语言：html

代码描述：css布局实现沙地沙滩中文字效果代码

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

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

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

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,400i,700'>
  
<style>
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #8d745d;
	--clip: #59443b;
}

body:before, body:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(#0003 0.000001%, #fff0 .00005%, #fff0 .00035%, #fff0 .00005%), repeating-conic-gradient(#fff2 0.00002%, #fff0 .00008%, #fff0 .0008%, #fff0 .00008%);
	opacity: 0.75;
	filter: blur(1px);
}
body:after {
	transform: rotate(180deg) scale(5);
	filter: none;
}


body * {
	box-sizing: border-box;
}

.content {
	width: 500px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0px 1px 1px rgba(255,255,255,.3)) drop-shadow(0px -1px 1px rgba(0,0,0,.75)) drop-shadow(0px -1px 0px rgba(0,0,0,.2));
}

.content:before, .content:after {
	content: "EFFECT";
	position: absolute;
	bottom: 5px;
	right: 50px;
	font-family: Arial, Helvetica, serif;
	color: var(--clip);
	font-size: 25px;
}
.content:after {
	content:"CSS";
	top: -5px;
	left: 55px;
	font-size: 40px;
}

.circle {
	border: 15px solid white;
	position: absolute;
	width: 65px;
	height: 57px;
	border-radius: 100% 0 0 100%;
	border-color: var(--clip) #fff0 var(--clip) var(--clip);
	top: 0;
	left: 0;
	border-right-width: 0;
}


.circle + .circle {
	transform: rotateY(180deg) rotateX(180deg) translate(-33px, -42px);
}


.circle:before {
	content: "";
	height: 15px;
	width: 25px;
	position: absolute;
	background: var(--clip);
	right: -25px;
	top: -15px;
	border-radius: 0 15px 15px 0;
}



.letter-d:before {
	content: "";
	border: 15px sol.........完整代码请登录后点击上方下载按钮下载查看