css实现文字阴影海报封面效果代码-html代码-BFW代码库

css实现文字阴影海报封面效果代码

代码语言：html

代码描述：css实现文字阴影海报封面效果代码

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


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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Anton");
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

html {
  font-size: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-items: center;
  background-color: #edeff5;
  display: flex;
  font-family: sans-serif;
  font-size: 100%;
  font-weight: normal;
  justify-content: center;
  overflow-x: hidden;
  padding: 2rem;
}

.poster {
  align-items: center;
  background-color: white;
  box-shadow: 0 2vh 5vh rgba(0, 0, 0, 0.3);
  display: flex;
  height: 80vh;
  justify-content: center;
  overflow: hidden;
  padding: 5vh;
  width: 56vh;
}

h1 {
  color: white;
  font-family: Anton, sans-serif;
  font-size: 10vh;
  font-weight: normal;
  line-height: 1;
  text-shadow: -1px 1px black, -1px 1px black, -2px 2px black, -3px 3px black, -4px 4px black, -5px 5px black, -6px 6px black, -7px 7px black, -8px 8px black, -9px 9px black, -10px 10px black, -11px 11px black, -12px 12px black, -13px 13px black, -14px 14px black, -15px 15px black, -16px 16px black, -17px 17px black, -18px 18px black, -19px 19px black, -20px 20px black, -21px 21px black, -22px 22px black, -23px 23px black, -24px 24px black, -25px 25px black, -26px 26px black, -27px 27px black, -28px 28px black, -29px 29px black, -30px 30px black, -31px 31px black, -32px 32px black, -.........完整代码请登录后点击上方下载按钮下载查看