主页 / 问题 / 1368039
Accepted
Majestio
Asked:2022-06-03 15:06:49 +0000 UTC2022-06-03 15:06:49 +0000 UTC

使背景变亮的动画 SVG 蒙版

  • 772

我们需要如下动画效果：

加载了某种背景的 HTML 页面，尽管是深蓝色的。
1s 后，SVG 图像从上到下向屏幕中心滑动，这只会使现有背景变亮（充当蒙版）。

应该看起来像这样：

在此处输入图像描述

请帮助实施，或至少提示在哪里挖掘。如果没有 Javascript - 它通常会超级棒！

javascript

3 个回答

  1. javascript 以便 svg 始终处于屏幕的 100% - 也许我太聪明了，但是看，任何值都可以更改

    这是一个稍微好一点的：https ://codepen.io/topicstarter/pen/OJxZEMN

    let body = document.querySelector("body");
let w = body.getBoundingClientRect().width;
let h = body.getBoundingClientRect().height;

svg.setAttribute("width", w + "px");
svg.setAttribute("height", h + "px");

window.addEventListener("resize", function() {
  svg.setAttribute("width", w + "px");
  svg.setAttribute("height", h + "px");
})
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
.parent {
  height: 100%;
}

.parent,
#svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

svg {
  z-index: 100;
  outline: 3px solid red;
}
    <div class="parent">
  <div class="background">
    <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614429316_25-p-temno-sinii-fon-dlya-fotoshopa-29.jpg" alt="">
  </div>
  <div class="svg">
    <svg id="svg">
      <rect width="100%" height="100%" fill="#000" fill-opacity="0.8">
        <animate attributeName="height" repeatCount="1" begin="1s" values="100%; 50%"dur="1s" />
        <animate attributeName="y"  repeatCount="1" begin="1s" values="0%; 50%" dur="1s" fill="freeze"/>
      </rect>
    </svg>
  </div>
</div>

    • 2
  2. Best Answer

    对于将从上到下到屏幕中间的 SVG 图像，我选择了徽标Adobe

    1. 页面加载后 1.5 秒的徽标移动： animation:adobe 2s forwards 1.5s;

    使用 SVG 蒙版为背景设置动画和变亮是从问题中已编辑的示例中完成的。在徽标上添加了另一个链接。

    .container {
  display: flex;
  height: 100vh;
}

.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0
}

.header {
  background: #FFDD00;
  height: 50px;
  text-align:center;
  font-size:24px;
  color:#151515;
  padding-top:0.5em;
  z-index:1;
}


.sidebar {
  width: 15%;
  height: 100%;
  background: #5677FC;
  text-align:center;
  font-size:24px;
  color:white;
}

.content {
  background-color: #3B3A75;
  font-size:24px;
  color:white;
  height: 100%;
  padding:1em;
  position:relative;
 
}

.adobe {
width:300px;
position: absolute;
  margin: 0 auto;
  top:-115%;
  left: 0;
  right: 0;
  animation:adobe 2s forwards 1.5s;
}

@keyframes adobe {
100%{top:40%;}
}
    <div class="container">
  <div class="sidebar">sidebar</div>
  <div class="main">
    <div class="header">header</div>
    <div class="content">content</div>
     <div class="adobe">
       <a href="https://ru.stackoverflow.com/questions/tagged/svg">        
       <svg  viewBox="0 0 105 93" xmlns='http://www.w3.org/2000/svg'>
        <mask id="msk">
            <rect  width="420" height="372" fill="white" />
          <path fill-rule="nonzero" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='black'/>
        </mask> 
            <rect  width="420" height="372" fill="#6260B7" />        
             <rect mask="url(#msk)" x="0"  width="420" height="372" fill="#3B3A75" />
</svg> 
 </a>
     </div>
  </div>
</div>

    • 2

  3. 为了避免在全屏模式下出现垂直滚动条，需要不指定SVG图像的高度和宽度，还需要将svg块包裹在父容器中 - ，以相对单位<div class="container"> 指定. 在这种情况下，svg 将响应并填充整个父容器。widthheight

    如果片段窗口中的滚动条干扰，则必须为父容器指定width:"25vw" height:25vh。当全屏打开时，应用程序会自适应增加。
    在实际应用中，指定width:"100vw" height:100vh属时。任何最大 svg 大小的容器，它都会缩小到浏览器屏幕的大小，当您缩小浏览器窗口或使用另一个显示较小的小工具时，SVG 图像将调整到此显示的大小。

    .container {
  width:25vw;
  height: 25vh;
  background-color: #3B3A75;
  color:white;
}
    <div class="container"> content 
     
       <a href="https://ru.stackoverflow.com/questions/tagged/svg">        
       <svg  viewBox="0 0 105 93" xmlns='http://www.w3.org/2000/svg'>
        <mask id="msk">
            <rect  width="100%" height="100%" fill="white" />
          <path id="path" fill-rule="nonzero" transform="scale(0.5) translate(52.5 -120.5)" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='black'>
           
          </path>
        </mask> 
            <rect  width="100%" height="100%" fill="#6260B7" />      
             <rect mask="url(#msk)" x="0"  width="100%" height="100%" fill="#3B3A75" /> 
          <animateTransform xlink:href="#path"
           attributeName="transform"
            type="translate"
            begin="0s" dur="2s"
            values="0 0;0 150"
            fill="freeze"
            additive="sum"
            restart="whenNotActive"/>    
</svg> 
 </a>
 </div>

    • 2

相关问题