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;
.........完整代码请登录后点击上方下载按钮下载查看