颜色渐变

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

return /*#__PURE__*/(
    React.createElement("div", _extends({
      className: "aspect-ratio",
      style: { paddingTop: `${100 / ratio}%` } },
    otherProps)));

};

const Gradient = props => {
  const { angle = 0, from, to } = props;

return /*#__PURE__*/(
    React.createElement("div", {
      style: {
        backgroundImage: `linear-gradient(${angle}deg, ${from}, ${to})` } }));

};

const Palette = props => {
  const { from, to } = props;

return /*#__PURE__*/(
    React.createElement("figure", { className: "palette" }, /*#__PURE__*/
    React.createElement(AspectRatio, null, /*#__PURE__*/
    React.createElement(Gradient, _extends({ angle: 135 }, props))), /*#__PURE__*/

React.createElement("figcaption", { className: "palette__caption" },
    from, " \u2013 ", to)));

};

const Palettes = props => {
  const { palettes } = props;

return /*#__PURE__*/(
    React.createElement("div", { className: "palettes" },
    palettes.map((palette) => /*#__PURE__*/
    React.createElement(Palette, _extends({ key: palette.toString() }, palette)))));

};

const Grid = props => {
  return /*#__PURE__*/React.createElement("div", _extends({ className: "grid" }, props));
};

const App = () => {
  const palettes = [
  {
    from: "#f40076",
    to: "#df98fa" },

{
    from: "#f06966",
    to: "#fad6a6" },

{
    from: "#ff0076",
    to: "#590fb7" },

{
    from: "#9055ff",
    to: "#13e2da" },

{
    from: "#0b63f6",
    to: "#003cc5" },

{
    from: "#d6ff7f",
    to: "#00b3cc" },

{
    from: "#e233ff",
    to: "#ff6b00" },

{
    from: "#df98fa",
    to: "#9055ff" },

{
    from: "#ed7b84",
    to: "#9055ff" },

{
    from: "#402565",
    to: "#30be96" },

{
    from: "#402662",
    to: "#3900a6" },

{
    from: "#f14658",
    to: "#dc2537" },

{
    from: "#f40076",
    to: "#342711" },

{
    from: "#000066",
    to: "#6699ff" },

{
    from: "#cb5eee",
    to: "#4be1ec" },

{
    from: "#fa7cbb",
    to: "#f14658" },

{
    from: "#737dfe",
    to: "#ffcac9" },

{
    from: "#2f80ed",
    to: "#b2ffda" }];

return /*#__PURE__*/(
    React.createElement("div", { className: "app" }, /*#__PURE__*/
    React.createElement(Grid, null, /*#__PURE__*/
    React.createElement(Palettes, { palettes: palettes }))));

};

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg