css布局实现游戏UI提示效果代码-html代码-BFW代码库

css布局实现游戏UI提示效果代码

代码语言：html

代码描述：css布局实现游戏UI提示效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: linear-gradient(5deg, rgba(250,235,200,1) 0%, rgba(250,235,200,1) 38%, rgba(124,214,222,1) 100%);
      background-repeat: no-repeat;
      height: 100vh;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	padding: 0;
      margin: 0 auto;
    }
    
    .bkg{ 
      width:100%;
      height: 100vh;
      display: flex;
    	justify-content: center;
    	align-items: center;    
      background:url("//repo.bfw.wiki/bfwrepo/svg/bkg-vista_tvx6l0.svg")   no-repeat;
      background-size: 100% auto;
      background-attachment: fixed;
      background-position: center bottom;
     
    }
    .landscape{
       width:100%;
       height: 100%;
      display: flex;
      flex-direction:column;
      justify-content: flex-end;
      align-items: center;
      background-image: url(//repo.bfw.wiki/bfwrepo/svg/bkg-mountain-left_tdq9io.svg),
        url(//repo.bfw.wiki/bfwrepo/svg/bkg-trees-right_qs1cw9.svg) ;
      background-attachment: fixed;
      background-position:  left bottom, right bottom;
      background-repeat: no-repeat, no-repeat;
      background-size: 20vw, 30vw, auto;
    }
    
    .trail-sign{
      height: auto;
      width:75vw;
      max-width:800px;
      background-image: url('//repo.bfw.wiki/bfwrepo/svg/woodgrain_pykyre.svg');
      background-color: #491727;
      background-blend-mode: lighten; 
      background-repeat:no-repeat;
      background-size:cover;
      color:ffffff;
      border-radius: 20px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:left;
      padding:24px; 
      postition: absolute; 
      bottom 0;
      filter: drop-shadow(15px 10px 10px rgba(0,0,0,.5));
    }
    
    .sign-post{
      height:25vh;
      width:75px;
      background:#222222;
    }
    h1{font-size:3em;letter-spacing:6px;line-height:1em;margin:0;padding: 16px 0;}
    h3{font-size:1em; letter-spacing:4px;line-height:1.4em; padding: 0 0 10px 0;margin:0;}
    h1, h3{
      font-family: 'John Muir Sans Wide';    
      font-weight: normal; 
      font-style: normal;
      text-align:center;
      /*inset shadow effect */
      background-color: #111111;
      color: transparent;
      text-shadow: 2px 3px 0px white;
      -webkit-background-clip: text;
      background-clip: text;
      text-stroke: 1px.........完整代码请登录后点击上方下载按钮下载查看