div+css实现文字倾斜背景效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现文字倾斜背景效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet"/>
  
  
  
<style>
:root {
  --background-color: #1e5068;
  --font-color: #edeee9;
  --font-size: 5vw;
  --line-height: 0.3;
  --container-width: 50vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

body {
  background: var(--font-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

#text-container {
  width: var(--container-width);
  overflow: hidden;
  background-color: var(--background-color);
  text-shadow: var(--font-color) 1px 1px 0;
}

div {
  position: relative;
  padding: 40px;
  width: var(--container-width);
  font-weight: 600;
  line-height: var(--line-height);
  text-align: center;
  font-size: var(--font-size);
  color: var(--font-color);
  font-family: "Montserrat", sans-serif;
}

#line-one {
  text-shadow: rgb(70, 139, 151) 0px 0px, rgb(70, 139, 151) -1px 1px, rgb(70, 139, 151) -2px 2px, rgb(70, 139, 151) -3px 3px, rgb(70, 139, 151) -4px 4px, rgb(70, 139, 151) -5px 5px, rgb(70, 139, 151) -6px 6px, rgb(70, 139, 151) -7px 7px, rgb(70, 139, 151) -8px 8px, rgb(70, 139, 151) -9px 9px, rgb(70, 139, 151) -10px 10px, rgb(70, 139, 151) -11px 11px, rgb(70, 139, 151) -12px 12px, rgb(70, 139, 151) -13px 13px, rgb(70, 139, 151) -14px 14px, rgb(70, 139, 151) -15px 15px, rgb(70, 139, 151) -16px 16px, rgb(70, 139, 151) -17px 17px, rgb(70, 139, 151) -18px 18px, rgb(70, 139, 151) -19px 19px, rgb(70, 139, 151) -20px 20px, rgb(70, 139, 151) -21px 21px, rgb(70, 139, 151) -22px 22px, rgb(70, 139, 151) -23px 23px, rgb(70, 139, 151) -24px 24px, rgb(70, 139, 151) -25px 25px, rgb(70, 139, 151) -26px 26px, rgb(70, 139, 151) -27px 27px, rgb(70, 139, 151) -28px 28px, rgb(70, 139, 151) -29px 29px, rgb(70, 139, 151) -30px 30px, rgb(70, 139, 151) -31px 31px, rgb(70, 139, 151) -32px 32px, rgb(70, 139, 151) -33px 33px, rgb(70, 139, 151) -34px 34px, rgb(70, 139, 151) -35px 35px, rgb(70, 139, 151) -36px 36px, rgb(70, 139, 151) -37px 37px, rgb(70, 139, 151) -38px 38px, rgb(70, 139, 151) -39px 39px, rgb(70, 139, 151) -40px 40px, rgb(70, 139, 151) -41px 41px, rgb(70, 139, 151) -42px 42px, rgb(70, 139, 151) -43px 43px, rgb(70, 139, 151) -44px 44px, rgb(70, 139, 151) -45px 45px, rgb(70, 139, 151) -46px 46px, rgb(70, 139, 151) -47px 47px, rgb(70, 139, 151) -48px 48px, rgb(70, 139, 151) -49px 49px, rgb(70, 139, 151) -50px 50px, rgb(70, 139, 151) -51px 51px, rgb(70, 139, 151) -52px 52px, rgb(70, 139, 151) -53px 53px, rgb(70, 139, 151) -54px 54px, rgb(70, 139, 151) -55px 55px, rgb(70, 139, 151) -56px 56px, rgb(70, 139, 151) -57px 57px, rgb(70, 139, 151) -58px 58px, rgb(70, 139, 151) -59px 59px, rgb(70, 139, 151) -60px 60px, rgb(70, 139, 151) -61px 61px, rgb(70, 139, 151) -62px 62px, rgb(70, 139, 151) -63px 63px, rgb(70, 139, 151) -64px 64px, rgb(70, 139, 151) -65px 65px, rgb(70, 139, 151) -66px 66px, rgb(70, 139, 151) -67px 67px, rgb(70, 139, 151) -68px 68px, rgb(70, 139, 151) -69px 69px, rgb(70, 139, 151) -70px 70px, rgb(70, 139, 151) -71px 71px, rgb(70, 139, 151) -72px 72px, rgb(70, 139, 151) -73px 73px, rgb(70, 139, 151) -74px 74px, rgb(70, 139, 151) -75px 75px, rgb(70, 139, 151) -76px 76px, rgb(70, 139, 151) -77px 77px, rgb(70, 139, 151) -78px 78px, rgb(70, 139, 151) -79px 79px, rgb(70, 139, 151) -80px 80px, rgb(70, 139, 151) -81px 81px, rgb(70, 139, 151) -82px 82px, rgb(70, 139, 151) -83px 83px, rgb(70, 139, 151) -84px 84px, rgb(70, 139, 151) -85px 85px, rgb(70, 139, 151) -86px 86px, rgb(70, 139, 151) -87px 87px, rgb(70, 139, 151) -88px 88px, rgb(70, 139, 151) -89px 89px, rgb(70, 139, 151) -90px 90px, rgb(70, 139, 151) -91px 91px, rgb(70, 139, 151) -92px 92px, rgb(70, 139, 151) -93px 93px, rgb(70, 139, 151) -94px 94px, rgb(70, 139, 151) -95px 95px, rgb(70, 139, 151) -96px 96px, rgb(70, 139, 151) -97px 97px, rgb(70, 139, 151) -98px 98px, rgb(70, 139, 151) -99px 99px, rgb(70, 139, 151) -100px 100px, rgb(70, 139, 151) -101px 101px, rgb(70, 139, 151) -102px 102px, rgb(70, 139, 151) -103px 103px, rgb(70, 139, 151) -104px 104px, rgb(70, 139, 151) -105px 105px, rgb(70, 139, 151) -106px 106px, rgb(70, 139, 151) -107px 107px, rgb(70, 139, 151) -108px 108px, rgb(70, 139, 151) -109px 109px, rgb(70, 139, 151) -110px 110px, rgb(70, 139, 151) -111px 111px, rgb(70, 139, 151) -112px 112px, rgb(70, 139, 151) -113px 113px, rgb(70, 139, 151) -114px 114px, rgb(70, 139, 151) -115px 115px, rgb(70, 139, 151) -116px 116px, rgb(70, 139, 151) -117px 117px, rgb(70, 139, 151) -118px 118px, rgb(70, 139, 151) -119px 119px, rgb(70, 139, 151) -120px 120px, rgb(70, 139, 151) -121px 121px, rgb(70, 139, 151) -122px 122px, rgb(70, 139, 151) -123px 123px, rgb(70, 139, 151) -124px 124px, rgb(70, 139, 151) -125px 125px, rgb(70, 139, 151) -126px 126px, rgb(70, 139, 151) -127px 127px, rgb(70, 139, 151) -128px 128px, rgb(70, 139, 151) -129px 129px, rgb(70, 139, 151) -130px 130px, rgb(70, 139, 151) -131px 131px, rgb(70, 139, 151) -132px 132px, rgb(70, 139, 151) -133px 133px, rgb(70, 139, 151) -134px 134px, rgb(70, 139, 151) -135px 135px, rgb(70, 139, 151) -136px 136px, rgb(70, 139, 151) -137px 137px, rgb(70, 139, 151) -138px 138px, rgb(70, 139, 151) -139px 139px, rgb(70, 139, 151) -140px 140px, rgb(70, 139, 151) -141px 141px, rgb(70, 139, 151) -142px 142px, rgb(70, 139, 151) -143px 143px, rgb(70, 139, 151) -144px 144px, rgb(70, 139, 151) -145px 145px, rgb(70, 139, 151) -146px 146px, rgb(70, 139, 151) -147px 147px, rgb(70, 139, 151) -148px 148px, rgb(70, 139, 151) -149px 149px, rgb(70, 139, 151) -150px 150px, rgb(70, 139, 151) -151px 151px, rgb(70, 139, 151) -152px 152px, rgb(70, 139, 151) -153px 153px, rgb(70, 139, 151) -154px 154px, rgb(70, 139, 151) -155px 155px, rgb(70, 139, 151) -156px 156px, rgb(70, 139, 151) -157px 157px, rgb(70, 139, 151) -158px 158px, rgb(70, 139, 151) -159px 159px, rgb(70, 139, 151) -160px 160px, rgb(70, 139, 151) -161px 161px, rgb(70, 139, 151) -162px 162px, rgb(70, 139, 151) -163px 163px, rgb(70, 139, 151) -164px 164px, rgb(70, 139, 151) -165px 165px, rgb(70, 139, 151) -166px 166px, rgb(70, 139, 151) -167px 167px, rgb(70, 139, 151) -168px 168px, rgb(70, 139, 151) -169px 169px, rgb(70, 139, 151) -170px 170px, rgb(70, 139, 151) -171px 171px, rgb(70, 139, 151) -172px 172px, rgb(70, 139, 151) -173px 173px, rgb(70, 139, 151) -174px 174px, rgb(70, 139, 151) -175px 175px, rgb(70, 139, 151) -176px 176px, rgb(70, 139, 151) -177px 177px, rgb(70, 139, 151) -178px 178px, rgb(70, 139, 151) -179px 179px, rgb(70, 139, 151) -180px 180px, rgb(70, 139, 151) -181px 181px, rgb(70, 139, 151) -182px 182px, rgb(70, 139, 151) -183px 183px, rgb(70, 139, 151) -184px 184px, rgb(70, 139, 151) -185px 185px, rgb(70, 139, 151) -186px 186px, rgb(70, 139, 151) -187px 187px, rgb(70, 139, 151) -188px 188px, rgb(70, 139, 151) -189px 189px, rgb(70, 139, 151) -190px 190px, rgb(70, 139, 151) -191px 191px, rgb(70, 139, 151) -192px 192px, rgb(70, 139, 151) -193px 193px, rgb(70, 139, 151) -194px 194px, rgb(70, 139, 151) -195px 195px, rgb(70, 139, 151) -196px 196px, rgb(70, 139, 151) -197px 197px, rgb(70, 139, 151) -198px 198px, rgb(70, 139, 151) -199px 199px, rgb(70, 139, 151) -200px 200px, rgb(70, 139, 151) -201px 201px, rgb(70, 139, 151) -202px 202px, rgb(70, 139, 151) -203px 203px, rgb(70, 139, 151) -204px 204px, rgb(70, 139, 151) -205px 205px, rgb(70, 139, 151) -206px 206px, rgb(70, 139, 151) -207px 207px, rgb(70, 139, 151) -208px 208px, rgb(70, 139, 151) -209px 209px, rgb(70, 139, 151) -210px 210px, rgb(70, 139, 151) -211px 211px, rgb(70, 139, 151) -212px 212px, rgb(70, 139, 151) -213px 213px, rgb(70, 139, 151) -214px 214px, rgb(70, 139, 151) -215px 215px, rgb(70, 139, 151) -216px 216px, rgb(70, 139, 151) -217px 217px, rgb(70, 139, 151) -218px 218px, rgb(70, 139, 151) -219px 219px, rgb(70, 139, 151) -220px 220px, rgb(70, 139, 151) -221px 221px, rgb(70, 139, 151) -222px 222px, rgb(70, 139, 151) -223px 223px, rgb(70, 139, 151) -224px 224px, rgb(70, 139, 151) -225px 225px, rgb(70, 139, 151) -226px 226px, rgb(70, 139, 151) -227px 227px, rgb(70, 139, 151) -228px 228px, rgb(70, 139, 151) -229px 229px, rgb(70, 139, 151) -230px 230px, rgb(70, 139, 151) -231px 231px, rgb(70, 139, 151) -232px 232px, rgb(70, 139, 151) -233px 233px, rgb(70, 139, 151) -234px 234px, rgb(70, 139, 151) -235px 235px, rgb(70, 139, 151) -236px 236px, rgb(70, 139, 151) -237px 237px, rgb(70, 139, 151) -238px 238px, rgb(70, 139, 151) -239px 239px, rgb(70, 139, 151) -240px 240px, rgb(70, 139, 151) -241px 241px, rgb(70, 139, 151) -242px 242px, rgb(70, 139, 151) -243px 243px, rgb(70, 139, 151) -244px 244px, rgb(70, 139, 151) -245px 245px, rgb(70, 139, 151) -246px 246px, rgb(70, 139, 151) -247px 247px, rgb(70, 139, 151) -248px 248px, rgb(70, 139, 151) -249px 249px, rgb(70, 139, 151) -250px 250px, rgb(70, 139, 151) -251.........完整代码请登录后点击上方下载按钮下载查看