CSS动画无法正确填充垂直高度？
[英]CSS animation not filling up vertical height correctly?
问题描述
I'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. 
我正在尝试创建探照灯/聚光灯效果，以使用CSS动画突出显示一些文本。 Heres a fiddle . 这是一个小提琴 。
However, my spotlight does not reach up to the top of the page and instead reveals the black background to different degrees throughout the animation. 但是，我的聚光灯没有到达页面顶部，而是在整个动画中以不同程度显示了黑色背景。
What I'm trying to achieve looks something like this: 我想要达到的目标是这样的：
I was wondering if anybody had any ideas as to how to modify my spotlight to vertically fill the entire page? 我想知道是否有人对如何修改我的聚光灯以垂直填充整个页面有任何想法？
h1 { color: green; position: absolute; } body { background-color: black; overflow: hidden; } .spotlight { position: relative; width: 10vw; height: 0vh; border-top: 100vh solid rgba(255, 255, 255, 0.25); border-left: 12vw solid transparent; border-right: 12vw solid transparent; background-color: transparent; -webkit-transform-origin: 50% 100% 0; z-index: 0; -webkit-animation: move 7s ease-in-out; } @-webkit-keyframes move { 0% { -webkit-transform: rotate(-30deg) scaleX(0.4); } 50% { -webkit-transform: rotate(30deg) scaleX(0.4); } 100% { -webkit-transform: rotate(0deg); } }
<html> <head></head> <body> <h1> Some text </h1> <div class="spotlight spot1"></div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2019-06-09 20:57:14
Simply use display:absolute instead of relative and modify the code a bit ;) 只需使用display：absolute而不是relative并稍微修改代码即可；）
h1 { color: green; position: absolute; z-index: 1; } body { background-color: black; overflow: hidden; } .spotlight { position: absolute; width: 10vw; bottom: -20px; border-top: 140vh solid rgba(245, 245, 245, 0.493); border-left: 12vw solid transparent; border-right: 12vw solid transparent; background-color: transparent; transform-origin: 50% 100% 0; z-index: 0; opacity: 1; will-change: auto; animation: move 7s ease-in-out; } @keyframes move { 0% { transform: rotate(-30deg) scaleX(0.4); } 50% { transform: rotate(30deg) scaleX(0.4); } 100% { transform: rotate(0deg); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1> Some text </h1> <div class="spotlight spot1"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.