css - 将带有 box-shadow 的 CSS star 转换为 PNG 图像以提高性能

标签 css png transparent box-shadow

我用 CSS 制作了这颗星星,我喜欢它的方框阴影。 我需要在恒星星系中使用它,但是由于盒子阴影,它在有很多恒星的情况下变得很慢。页面滚动受到很大影响。 我尝试使用 PNG 图像而不是 DIV,它提高了性能,现在滚动没有问题。

但是,我找不到将这颗星星转换为 PNG 的方法。我检查过 HTML2Canvas,但它不支持阴影。 我能做的最好的事情就是截屏并删除空白背景以使其透明,但是由于阴影不透明,它看起来不干净。

任何帮助将不胜感激。

对我来说,最后一件事就是找到另一个用 SVG 制作的漂亮星星。但是,我认为这里有很多专家。请帮忙!

.holder {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translateX(-50%) translateY(-50%);
}
.star div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%) rotateX(-85deg) rotateZ(45deg);
  background-color: #ffffff;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px rgb(27, 53, 97),
    0 0 70px rgb(27, 53, 97),
    0 0 80px rgb(27, 53, 97),
    0 0 100px rgb(27, 53, 97),
    0 0 150px rgb(27, 53, 97);
}
.star div:nth-child(2) {
  transform: translateX(-50%) translateY(-50%) rotateZ(90deg) rotateX(-85deg) rotateZ(45deg);
}
.star div:nth-child(3) {
  width: 50%;
  height: 50%;
  transform: translateX(-50%) translateY(-50%) rotateZ(45deg) rotateX(-85deg) rotateZ(45deg);
}
.star div:nth-child(4) {
  width: 50%;
  height: 50%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-45deg) rotateX(-85deg) rotateZ(45deg);
}
<div class="holder">
  <div class="star"><div></div><div></div><div></div><div></div></div>
</div>

最佳答案

下面是两个没有优化的png版本,使用这个页面优化tinypng和svg版本。它可能不是 100% 相同但非常接近:)

enter image description here

<!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>
  <style>
    body {
      background-color: #000;
    }
  </style>
</head>

<body>
  <svg width="100%" height="100%" viewBox="0 0 127 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="lopatk"><use xlink:href="#_Image1" x="61.525" y="0" width="9.481px" height="128.976px" transform="matrix(0.948079,0,0,0.999817,-5.45697e-14,2.72848e-14)"/><use xlink:href="#_Image2" x="0" y="55.061" width="126.142px" height="18.979px" transform="matrix(0.993242,0,0,0.998877,-5.45697e-14,2.72848e-14)"/><path d="M97.182,64.511c0,0 -20.204,-2.312 -34.042,-2.312c-13.838,0 -34.18,2.174 -34.18,2.174c0,0 20.342,2.405 34.042,2.405c13.699,0 34.18,-2.267 34.18,-2.267Z" style="fill:#fff;"/><use xlink:href="#_Image3" x="53.642" y="26.492" width="18.979px" height="75.996px" transform="matrix(0.998877,0,0,0.999948,-5.45697e-14,2.72848e-14)"/><path d="M63.094,29.69c0,0 -2.312,20.611 -2.312,34.728c0,14.116 2.173,34.868 2.173,34.868c0,0 2.405,-20.752 2.405,-34.727c0,-13.976 -2.266,-34.869 -2.266,-34.869Z" style="fill:#fff;"/><use xlink:href="#_Image4" x="32.681" y="34.011" width="60.893px" height="60.978px" transform="matrix(0.99825,0,0,0.999646,-5.45697e-14,2.72848e-14)"/><path d="M50.888,52.354c0,0 8.017,6.387 12.949,11.319c4.932,4.933 11.417,12.949 11.417,12.949c0,0 -8.098,-6.403 -12.981,-11.286c-4.883,-4.883 -11.385,-12.982 -11.385,-12.982Z" style="fill:#fff;"/><use xlink:href="#_Image5" x="49.135" y="50.74" width="27.972px" height="27.891px" transform="matrix(0.99899,0,0,0.996114,-5.45697e-14,2.72848e-14)"/><path d="M75.254,52.354c0,0 -8.016,6.387 -12.949,11.319c-4.932,4.933 -11.417,12.949 -11.417,12.949c0,0 8.098,-6.403 12.982,-11.286c4.883,-4.883 11.384,-12.982 11.384,-12.982Z" style="fill:#fff;"/></g><defs><image id="_Image1" width="10px" height="129px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAACBCAYAAAD5RSumAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQklEQVRYha1Y69KrIAzcqO//xK05fwwNywZoz+eMU8RlLwFsK0CHu5u7G/dbBlCfA4CZOQBcNPB4TgC4nxMMtAd09k4cZuZXks3AkL/DAjOeT589gFf2pIAn+ZUeo++dLLQR4TEYr+de9E8Zc6gOGInPNEgCtxmzxwzsPHKYsPK30lNG5bED8qLIjLLgS8YcJjM2nxeBMnDq8UTFmDaVYjwAmLubkj7SwGl5MlCGYaChqONS2uhkoAGYhulWuZqZn1KXiyJ7bCBmVKk7j5xYte3nMMpjuR7ZY8c4k14uigFodEPV0f5kPS6n0Oi6pWY2BkppZmzyaoVLRjldSoWlgQmjkpWpV+UxALbrUe5rCZYb6VvGrs3f18wa/V3BQe1uYMU4DMxAJdkxKl/DoK8KriSHY1ZwCSy9oUit6rnF+P9AL9pLRo8BB3dUhyq40+fS40/SfkwA3eCjuDGU6ahu7DJyn1/5Qshvpe6Al+hUHrvyzFhL6cH3oTp/9SilS/mrYvi5PNXMOD7/jqTHuwBL6ZtBGQh8/t5lYFPYYWwec0oJqsLwWc4MgzpgFWZIzWxlagYPU8pTWErzdpWynJpB0/JIUCWtfPpXBQ/6cvp2PH4VZjrX+fy8fiDGd/r8MD6vQLLsO4Hl5ipBGRjgJTBLv1RqxfhK7al0AJdbgcszZRzqyMAIM332bIXJHrdTc8GnHrvVs5taAu8VMLzEe6hWHvUmLoC5PX2GD98IDWhm7u5KGh2QwrTr8AfQj8n83jGDAOAfo3SyZloDwf0AAAAASUVORK5CYII="/><image id="_Image2" width="127px" height="19px" xlink:href="data:image/png;base64,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"/><image id="_Image3" width="19px" height="76px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABMCAYAAACPiIzuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACOklEQVRYha2Y247EIAxDQ9v//+OBfRhlFBw7QLVIVW9waidhFrZZ3Rp5Nk46V89LKBvUFu+HuLZHfLWFcwRKEIPFwZeA+ZGglbIWgHFgV8puALgiPJpllQ78PVM2o7IrvO8B4EdpE0EXDPKYpUwzZdHqDTA/e+yOld0w6AogqYzF6yawTvqOShnLptuLz+KY8YQbVMdsDitKZRUztDnM7MNAZnMNMVWY1bKQd6ZTLFw2X6XNKmbNvpl8FTNUVoIQpuYl2kTgdsxwsktVDKZUoTKaCCxapYplM80AVWcNBrI4JWiEVXbZ71tqT2FxlYAUM7SJ58pWOu/YZGdqE2GVmjL4EYZfOoL4PbNZgat+1OaJsn/LZlJYZVMBzThUwpTSSckJ7AjEYFuVrqArZVUr5+abNi343sAGnCVsWF63ssF0L7BSVgGPYAokgQqGS05mfRmzFYjtAX73l3hxAtxWhh9iH/xdX+QFDu5Wg6SyytbS7qo0unF1tIAxAZU6Bpygj81bFwaMu7gO0KmpbEaQsjpZZDBlq1tWlYAPQJQyM/6RCYgrxypmStmvsTUts/YKxsoBYQ6M/RMMO6igy9JQS/dYDr6/ZOCj0uj23cWx69cJYPexb4Kp4Pv+UtXYUlkEGcDY/JyKdoQBqM6XATFmx9mMNYbKaEbvmSFXiA76WKGQ/WMJl04su7Q8VqVhNv/RKWeAUoYWWWLiuwRDIFO7rYypqtQtYQhQMNaHqlitrI9g1XMF3Rqk4kfbHyLJbNrkMd+8AAAAAElFTkSuQmCC"/><image id="_Image4" width="61px" height="61px" xlink:href="data:image/png;base64,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"/><image id="_Image5" width="28px" height="28px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAUlEQVRIibXW2w6DIBAE0FH7/59c+lLMOM6yoLCJsdWEwy4XAdbG9r8uD1YgUZTPQox/l57ePMX4Xuh9AYAZGTrIZgcAx0RsA7ALqBUs+0SML35fQFk+LalDtIwXqMaTDCPstuYIP++jGWrjOmbceJH/AMYyzDCFbEl7M3TQTu8cdMuuF4wwnYUpBuQldZOCsRoFwDfDMtBBiikUjl0GRjsIB2OKhuHGsLWD8IY8jDkw2660bEOYA1sYg27cuoJB/XhmC3oYYzD6llWshQ5FtPBbe2NznWURTZL6LN2MR+MQQDui4CsM8CXVhm8HoTfhDkCu8ddQBLqYhkUdWHEaP+MHDTZzWaWiDCEAAAAASUVORK5CYII="/></defs></svg>
</body>

</html>

关于css - 将带有 box-shadow 的 CSS star 转换为 PNG 图像以提高性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57183803/

相关文章:

android - 相机拍摄照片的图像格式(安卓手机)

c# - C# 中的位图字节操作

c# - 当控件重叠时,如何确保单击正确的控件?

jquery - 带有定位元素的 webkit 模糊过渡

html - 帮助在页面中定位 Flash 文件

html - 你能在 css 中定义 &lt;iframe&gt; src 属性吗?

java - Swing中JTextField的透明边框

css - 安装模块时如何在ODOO中安排css优先级?

pdf - 将多页 PDF 转换为 PNG 并返回 (Linux)

Firefox 4 中的 CSS 透明边框问题?