- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试实现这样的东西
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #8ce2ea;
flex-direction: column;
}
.reveal-text,
.reveal-text::after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
position: relative;
font-size: 10vw;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
color: #FFF;
white-space: nowrap;
cursor: default
}
.reveal-text::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
@-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
<h1 class="reveal-text">
I'm here.
</h1>
但问题是由于 clip-path
(文本从一开始就显示)
@keyframes reveal-text {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
有什么不同的方法可以使它在边缘工作吗?
(我读过 clip-path 在 svg 边缘工作,我应该创建一个带有文本的 svg 吗?)
最佳答案
这是您不必使用clip-path
的另一种方式。只需依靠将覆盖您的文本的背景颜色。你不会有透明度,但你会得到更好的支持。
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #8ce2ea;
margin:0;
}
.reveal-text {
position: relative;
font-size: 10vw;
color: #FFF;
}
.reveal-text::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(#f2f98b, #f2f98b),
linear-gradient(#8ce2ea, #8ce2ea);
background-size: 0% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left, right;
animation: revealer-text 0.8s 2s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}
@keyframes revealer-text {
0% {
background-size: 0% 100%, 100% 100%;
background-position: left, right;
}
50% {
background-size: 100% 100%, 0% 100%;
background-position: left, right;
}
51% {
background-size: 100% 100%, 0% 100%;
background-position: right;
}
100% {
background-size: 0% 100%, 0% 100%;
background-position: right;
}
}
<h1 class="reveal-text">
I'm here.
</h1>
关于css - 显示文本的剪辑路径替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53187065/
我应该编写一个函数来打印一组给定的三个数字中两个较大数字的平方和。 我对这种情况的处理相当笨拙。我没有编写返回一组 3 中最大的两个数字的函数,而是编写了函数,以便表达式减少到两个所需的数字。 # S
如果有人可以提供帮助,我将不胜感激。我一直在敲我的头一天试图让这个工作。我已经在互联网上搜索并重新阅读了手册,但我就是不明白。 guile << __EOF__ ( define heading-li
目前我正在处理一个方案问题,其中我们正在使用方案列表表示一个图。我们使用的第一个变体是表示为 的边列表图 '((x y) (y z) (x z)) 我们正在使用的图的第二个变体被称为 x 图,表示为
我正在尝试创建一个函数,该函数将两个函数作为参数并执行它们。 我尝试使用 cond ,但它只执行 action1 . (define seq-action (lambda (action1 act
我提前为我的原始英语道歉;我会尽量避免语法错误等。 两周前,我决定更新我对 Scheme(及其启示)的知识,同时实现我在手上获得的一些数学 Material ,特别是我注册的自动机理论和计算类(cla
Scheme中有没有函数支持分数的“div”操作? 意思是 - 11 格 2.75 = 4。 最佳答案 我认为你的问题的答案是:没有,但你可以定义它: #lang racket (define (di
我在scheme中实现合并排序,我必须通过定义两个辅助方法来实现:merge和split。 Merge 需要两个列表(已经按递增顺序)并将它们合并在一起。我这样做了如下: (define merge
尝试从终端加载方案文件。我创建了一个名为 test.scm 的文件,其中包含以下代码: (define (square x) (* x x)) (define (sum-of-squares x y)
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
我有点了解如何将基本函数(例如算术)转换为Scheme中的连续传递样式。 但如果函数涉及递归怎么办?例如, (define funname (lambda (arg0 arg1)
我正在尝试附加两个字符串列表 但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
这个问题已经有答案了: How do I pass a list as a list of arguments in racket? (2 个回答) 已关闭 8 年前。 我有一个函数,它需要无限数量的
我对这段代码的工作方式感到困惑: (define m (list 1 2 3 '(5 8))) (let ((l (cdr m))) (set! l '(28 88))) ==>(1 2 3 (5 8
我正在为学校做一项计划作业,有一个问题涉及我们定义记录“类型”(作为列表实现)(代表音乐记录)。 我遇到的问题是我被要求创建一个过程来创建这些记录的列表,然后创建一个将记录添加到该列表的函数。这很简单
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
我正在尝试附加两个字符串列表 但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
如何使用抽象列表函数(foldr、foldl、map 和 filter 编写函数),无需递归,消耗数字列表 (list a1 a2 a3 ...) 并产生交替和 a1 - a2 + a3 ...? 最
我试图找出在 Scheme 中发生的一些有趣的事情: (define last-pair (lambda (x) (if (null? (cdr x))
这个问题在这里已经有了答案: Count occurrence of element in a list in Scheme? (4 个答案) 关闭 8 年前。 我想实现一个函数来计算列表中元素出现
我正在尝试使用下面的代码获取方案中的导数。谁能告诉我哪里出错了?我已经尝试了一段时间了。 (define d3 (λ (e) (cond ((number? e) 0) ((e
我是一名优秀的程序员,十分优秀!