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