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