Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >从页面中心开始不断增长的“爆炸”光照动画

问从页面中心开始不断增长的“爆炸”光照动画
EN

Stack Overflow用户

提问于 2019-10-30 22:58:46

回答 1查看 473关注 0票数 0

使用CSS，我想用动画的径向渐变圆来扩展整个页面的长度和宽度(全白)，然后反转这个动画(返回到原始状态)。这应该看起来像是从中心开始逐渐“爆炸”的白色，一旦达到全宽/全高，就会逐渐淡出到完全白色，但是我的白色背景过早地开始过渡。我该如何实现这一点？

scss

    .container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      background: black;
      height: 100vh;
    }

    .flash-container {
        animation: grow 5s 2s linear forwards;
        width: 20px;
        height: 20px;
        z-index: 4;

        #flash {
            background: radial-gradient(circle, white, transparent 10%);
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
        }
    }

    @keyframes grow {
        to {
            transform: scale(1000);
            background: white;
        }
    }

html

      <div class="container">
        <div class="flash-container">
          <div class="flash"></div>
        </div>
      </div>

Jsfiddle：https://jsfiddle.net/zv3bmw8j/2/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-30 23:25:59

我更新了你的CSS来使用我上面引用的方框阴影方法。这将需要更多的调整，因为它是在悬停方法上构建的。只需将百分比值从0% - 100%更改，您就应该是可靠的。我还更改了HTML格式，并删除了内部的flash div。

https://jsfiddle.net/q9n6adLp/

.flash-container {
    animation: grow 5s 2s linear forwards;
    width: 20px;
    height: 20px;
    z-index: 4;
  margin: 0 auto;
  box-shadow: 0 0 30vw 40vw rgba(241,244,0,1);
  .flash {
        background: radial-gradient(circle, white, transparent 10%);
    width: 100%;
    height: 100%;
        position: absolute;
        border-radius: 100%;
    }


}

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58634746

复制

相关文章

win10 uwp 解决 SerialDevice.FromIdAsync 返回空

https 网络安全 javascript node.js

调用 SerialDevice.FromIdAsync 可能返回空，因为没有设置 package.appmanifest 可以使用端口

林德熙

2019/03/13

6320

ora00904::标识符无效_ora-00911 无效字符

sql https 网络安全

ORA：即Oracle报错。标识符无效：SQL语句中，这个字段名不在表中。解决方案：修改SQL语句中对应的字段或者修改表里面对应的列名。

全栈程序员站长

2022/11/01

1.4K0

ora00904::标识符无效_ora-00911 无效字符

caffe源码分析-DataReader

c++python 编程算法 mac os

DataReader作为DataLayer的数据成员变量，以多线程的方式从数据库(如lmdb, hdf5)读取数据：

bear_fish

2019/02/25

5030

caffe源码分析-DataReader

UWP WPF 解决 xaml 设计显示异常

编程算法 windows

例如我创建一个用户控件 TsjcyubtnTtqtjem 那么就可以在构造函数添加下面代码

林德熙

2022/08/04

7480

UWP WPF 解决 xaml 设计显示异常

例如我创建一个用户控件 TsjcyubtnTtqtjem 那么就可以在构造函数添加下面代码

林德熙

2018/09/19

1.1K0

UWP WPF 解决 xaml 设计显示异常

win10 uwp 捕获后台线程异常

本文告诉大家如何在 UWP 中捕获全局的后台线程异常，在出现后台线程异常时，将会让 UWP 程序闪退，但是在退出之前还是可以执行自己的代码

林德熙

2022/08/12

6150

win10 UWP 访问网页

网站网络安全 windows webview apache

Windows10 UWP 要访问 csdn博客，可以使用Windows.Web.Http.HttpClient，下面尝试访问一下我的博客 http://blog.csdn.net/lindexi_gd/article/details/50392343

林德熙

2022/08/04

5520

win10 UWP 访问网页设置代理WebView

Windows10 UWP 要访问 csdn博客，可以使用Windows.Web.Http.HttpClient，下面尝试访问一下我的博客 http://blog.csdn.net/lindexi_gd/article/details/50392343

林德熙

2018/09/18

1.6K0

win10 UWP 访问网页
设置代理WebView

win10 uwp 存放网络图片到本地下载图片保存图片从本地打开所有代码Nuget安装Microsoft.Toolkit.Uwp

https access 网络安全

有时候我们的网络很垃圾，我的的UWP要在第一次打开网络图片，就把图片存放到本地，下次可以从本地打开。有时候用户使用的是流量网络，不能每次都联网下载。我们不得在应用存放用户打开的图片。这就是先把图片下载，然后显示出来，存放到本地，接着下次要使用就可以从本地获取。最好这个和我们用户是透明，我们不知道图片在哪，是本地还是网络，只要给一个Uri就有一个图片。

林德熙

2019/03/13

1.3K0

asp.net mvc HandleErrorAttribute 异常错误处理无效！

现象：filters.Add(new HandleErrorAttribute()); 使用了全局的异常处理过滤。

旺财的城堡

2018/11/20

1.2K0

win10 uwp 存放网络图片到本地下载图片保存图片从本地打开所有代码Nuget安装

api access .net http windows

有时候我们的网络很垃圾，我的的UWP要在第一次打开网络图片，就把图片存放到本地，下次可以从本地打开。有时候用户使用的是流量网络，不能每次都联网下载。我们不得在应用存放用户打开的图片。这就是先把图片下载，然后显示出来，存放到本地，接着下次要使用就可以从本地获取。最好这个和我们用户是透明，我们不知道图片在哪，是本地还是网络，只要给一个Uri就有一个图片。

林德熙

2018/09/18

1.3K0

win10 uwp 读取文本GBK错误

本文讲的是解决UWP文本GBK打开乱码错误，如何去读取GBK，包括网页GBK。最后本文给出一个方法追加文本。

林德熙

2018/09/18

1.3K0

win10 uwp 应用包上传失败无效的软件包系列名称

在 2021 的时候，微软为了解决开发者不小心将应用商店证书上传到 GitHub 而不再提供应用商店证书文件下载到代码文件夹里面，因此日常开发中将会使用自己本地创建的证书。但是在实际准备发布的时候，如果没有切换证书，那么将会使用本地创建的证书进行打包，而在上传应用商店步骤失败

林德熙

2021/03/24

1.2K0

Oracle报错ORA-00904: 标识符无效，但是列名和表名都没有写错

oracle int select sql语句 table

一般情况下，标识符错误是因为：语句中的列名在表中不存在，修改sql语句或者修改列名即可。

星哥玩云

2022/08/17

9.5K0

PageHelper分页后，对list操作会导致分页无效

来源：blog.csdn.net/qq_35080796/article/details/105508744

JAVA葵花宝典

2021/05/11

4K0

PageHelper分页后，对list操作会导致分页无效

快速入门 .NET nanoFramework 开发 ESP32-Pico 应用

.NET 支持物联网(IoT) 应用的开发，其提供的.NET IoT 库可以让我们在运行 Windwos 和 Linux 系统的 IoT 设备上运行应用，并利用 GPIO、SPI、I2C、PWM 和串行端口等接口使用数百个传感器、显示器、输入设备。但是这并不适用于受约束的嵌入式设备，比如 ESP32、M5Stack、STM32 等。对于这些受约束的嵌入式设备，.NET nanoFramework 提供了一个很好的方案，适用于这些微控制器，能够为受限嵌入式设备编写托管代码。开发者可以利用熟悉的 IDE Visual Studio 和 .NET(C#) 知识快速编写应用程序，而无需担心微控制器的低层硬件复杂性。更方便的是，使用 Visual Studio 可以直接在真实硬件上编写、部署、调试代码。

桑榆肖物

2023/01/03

2.9K0

快速入门 .NET nanoFramework 开发 ESP32-Pico 应用

dart(二)--函数、操作符、异常dart(二)--函数、操作符、异常

dart 闭包对象函数异常

函数 dart中万物皆对象，函数也是一个对象 bool isNoble(int iNumber, String str='str'){ //普通函数，有参数、有返回值（若不指定表示返回值类型则为：dynamic）;参数可以指定默认值 return iNumber != null; } bool isNoble => return iNumber != null; //箭头函数，有且只能有一个表达式 isNoble(iNumber:1,String:'ssd'); //调用 void f

用户8893176

2021/08/09

3580

A: 不能以数字开头 B: 不能是 Java 中的关键字 C: 区分大小写 Student,student 这是两个名称

Cell

2022/02/25

1.1K0

Oracle 无效对象查询，编译无效对象

查看当前无效对象 select * from dba_objects t where t.status = 'INVALID' order by 1; 编译无效对象：有两种方式： 1、执行sql查询结果： select 'alter '||object_type||' '||owner||'.'||object_name||' compile;' from dba_objects t where t.status = 'INVALID' order by 1; 2、脚本编译： sqlplu

Lucifer三思而后行

2021/09/22

3K0

点击加载更多

相似问题

UWP SerialDevice阅读阿杜伊诺

126

UWP SerialDevice.FromIdAsync返回null

12

UWP抛出异常:由于对象的当前状态，操作无效

12

DataReader异常

13

Windows UWP Windows.Devices.SerialCommunication.SerialDevice不工作

20

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例