个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试实现与本网站相同的页面过渡效果http://56k.studiovoila.com/
所以经过几次搜索，我找到了这个教程https://tympanus.net/Tutorials/CSSMaskTransition/ ，我使用了他们在演示 1 中使用的 PNG，并使用适当的代码将其添加到我的元素中。
您可以在此处查看我的代码示例。 (效果比较模糊但是可以猜到效果)
const btnClick = document.getElementById("btn-click");
const body = document.querySelector("body");
btnClick.addEventListener("click",(e)=>{
e.preventDefault();
body.classList.remove("reveal");
body.classList.add("disapear");
});
body.addEventListener("animationend",()=>{
body.classList.remove("disapear");
body.classList.add("reveal");
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: static;
height: 100vh;
width: 100vw;
-webkit-mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
-webkit-mask-size: 7100% 100%;
mask-size: 7100% 100%;
background: yellow;
}
body.disapear {
animation: mask-play-disapear 2s steps(70) forwards;
}
body.reveal {
animation: mask-play-reveal 1.4s steps(70) forwards;
}
@keyframes mask-play-disapear {
from {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
to {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
}
@keyframes mask-play-reveal {
0% {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
100% {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
}
#div1 {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}<body>
<div id="div1">
<a href="#" id="btn-click">click me</a>
</div>
</body>问题:
1. 当用户看到使用 firefox 的转换但仅来自 Mac 计算机(Catalina 10.15.5)时，这似乎是错误。你可以在我创建的网站上看到这个错误 https://abiesco.ch
2. 因为它是PNG格式，我不能在动画过程中轻易改变形状，不是很灵活。我没有源文件(photoshop 或 after effect)。
我的问题:
是否可以使用 SVG 变形来获得相同的效果？我知道我们可以将 anime.js 与 tympanus tutorial 一起使用和 DesignCourse youtubeVideo .但我真的很想保留水 - 填充和离开屏幕的有机形状。
我已经试过了 bodymovin plugin对于允许将后效动画导出到 json 文件的后效 lottie.js可以动画。但该插件不支持湍流置换滤镜(用于水效果)。
最佳答案
好的，我找到了一种更好的动画页面转换方式。
我可以使用 WebGL。
我为我的案例找到了完美的例子 here但目前我的技能还不足以处理这个问题。
我做了一些 PIXI.JS带有着色器和滤镜的教程，您可以做的事情令人惊奇，但该死的很难。
等我的技能足够好时，我一定会深入研究 webgl。
关于javascript - 如何改善 mask 图像页面过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62876579/
25
4
0
我有一个 recycleView Activity ，这是我应该在设计中展示的内容 我用这段代码来展示它 val arr:ArrayList = arrayListOf("English","
我目前正在运行 Ubuntu 12.04LTS，nginx 发出请求。 我通过谷歌页面速度( https://developers.google.com/speed/pagespeed/insight
我有以下字符串作为键。从下面的代码中，我看到所有的键都指向同一个 reducer ，尽管有很多 reducer 。最后，同一个 reducer 重载。我想，每个键(字符串)，去一个不同的 reduce
假设我有一个 flexbox，为了举例，每个元素都包含一个图像。在这种情况下，flexbox 的目的是将它们均匀分布。 看起来很简单。让我们试试吧。 #flex { width: 350px;
我正在从事基于视频车牌检测的项目。 它是这样的: 当我想在车牌上使用 OCR 时，我的问题就出现了。我在一些图片上对其进行了测试，效果非常好。这是一些例子: 但是当我把检测到的盘子放上去时，结果很糟糕
所以我有下面这组代码解析好吃的信息。它以下列格式从 Delicious 页面打印数据 书签 |人数 书签 |人数等等…… 我曾经使用以下方法来查找此信息。 def extract (soup):
我想为组特征(std、mean...)添加一些列，下面的代码有效，但数据集真的很大而且性能很差。有改进代码的好主意吗？谢谢 import pandas as pd df = pd.DataFrame(
我正在使用 new relic 来诊断和修复我们数据库的性能问题。所以我有以下最耗时的查询。 SELECT * FROM `page_view` WHERE `ip_address` = ?s A
我的公司使用 UIWebView 来展示广告。我遇到的问题是初始化 UIWebView 似乎很昂贵；使用 Time Profiler 进行的分析显示 [UIWebView alloc] initWit
如何让下面的代码更优雅？目前我必须手动添加每个条件。有没有一种方法可以检查 $total_points 的值是否位于数组 $ranking_list 的连续项之间？ function ym_rank(
g++ 有时会产生相当复杂的输出。特别是在处理模板时。是否有任何工具可以使 g++ 输出更具可读性？ ...至少有一些颜色？ 在这里问这个问题可能听起来很傻，但我无法通过谷歌搜索。 最佳答案 从 4.
我有一个 API，它登录一个帐户，然后对我想通过 CFHTTP 请求出价的项目执行搜索，如下所示。 搜索.cfm: 登录.cfm:
我有一个包含超过一百万条记录的表，其结构如下: mysql> SELECT * FROM Measurement; +----------------+---------+--------------
使用 trainCascade 训练类似 HAAR 的特征。向社区寻求建议以获得更好的结果。一般来说，什么被认为是好的接受率？ 我从一个较小的培训开始，遵循此链接作为指南:http://coding-
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve thi
我们从 JBoss 4(和 JDK 5)升级到 JBoss 5(和 JDK 6)。问题是开始时间已经从 1.5 分钟(在 JBoss 4 上)变为超过 4 分钟。 18:53:35,444 INFO
这是 a previous question on improving rails console loading time 的后续内容。 . 第一个很好的建议是找出 which gems take
我想知道以下哪一项会为加载大量 javascript(jQuery + jQuery UI + 各种其他 javascript 文件)的页面带来更好的性能。我已经浏览了大部分 YSlow 和 Goog
我正在使用多个 setInterval() 例如创建、移动、删除落在屏幕上的字符串 问题是 MODE 1 间隔导致 interval1 出现滞后 我也尝试过切换到MODE 2 STUFF，但仍然出现延
我是一名优秀的程序员,十分优秀！