当前位置：文江博客话题详情

JavaScript、html5：如何动态创建晕影效果？

发布于 2024-11-15 02:28:18 字数 176 浏览 3 评论 0原文

所以我需要的很简单：用户按下某些东西，用户会在所有页面（具有页面大小）顶部的新 div 上看到 Vignette 效果，类似 “chrome

是否可以使用一些 html5 画布艺术？以及如何做这样的事情？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琉璃梦幻 2024-11-22 02:28:18

嗯，这就是 Chrome 设置页面的具体做法：http://jsfiddle.net/ JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

正如你所看到的，重要的部分是渐变。

您可以通过添加适当的渐变语法使该代码在所有支持 CSS3 渐变的浏览器中运行： http:// caniuse.com/#feat=css-gradients

Well, this is exactly how Chrome's settings page is doing it: http://jsfiddle.net/JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

As you can see, the important part is the gradient.

You can make that code work in all browsers that support CSS3 gradients by adding the appropriate gradient syntax: http://caniuse.com/#feat=css-gradients

回复收藏 0 原文

~没有更多了~