Question

现在，我根据应用程序中的某些逻辑更改渐变。

<template>
  <div :style="`background-image: ${backgroundImage}`" class="background">
    <snackbar />
    <nuxt />
    <default-footer />
  </div>
</template>
<style lang="scss">
.background {
  min-height: 100vh;
  padding-top: 35px;
  padding-bottom: 75px;
  text-align: center;
  background-image: radial-gradient(circle at 50% 95%, #ffa400, #fd6e6a);
}
</style>

但是我需要使渐变从两种颜色的一种逐渐变为另一种。

最好的方法是什么？

Answer 1

另一种思考方式

<div id="app"></div>

#app {
  height: 300px;
  width: 300px;
  min-height: 50vh;
  padding-top: 35px;
  padding-bottom: 75px;
  text-align: center;
  background-image: radial-gradient(circle at 50% 95%, #ffa400ff 0%, #fd6e00ff 33.3333%, black 60%, black 100%);
  background-size: 100% 300%;
  background-position: 50% 100%;
  transition: background-position 1s;
}
#app:hover {
  background-position: 50% 0%;
}

或两层背景

<div id="app"></div>

#app {
  height: 300px;
  width: 300px;
  min-height: 50vh;
  padding-top: 35px;
  padding-bottom: 75px;
  text-align: center;
  background-color: red;
  background-image: linear-gradient(180deg, #ffa400ff 0%, #ffa400ff 50%, #ffa40000 100%), radial-gradient(circle at 50% 95%, #ffa400ff, #fd6e00ff);
  background-size: 100% 200%, 100% 100%;
  background-position: 0 200%, 0 0;
  background-repeat: no-repeat;
  transition: background-position 1s;
}
#app:hover {
  background-position: 0 0, 0 0;
}

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body,ul,li{
          height: 100%;
          margin: 0;
          padding: 0;
        }

        .flip-list-enter-active, .flip-list-leave-active {
            transition: all 1s;
        }
        .flip-list-enter, .flip-list-leave-active {
            opacity: 0;
        }

        .demo {
          position: relative;
          height: 100%;
        }
        .demo > ul {
          position: absolute;
          z-index: 0;
          height: 100%;
          width: 100%;
        }
        .demo .bg-color-li {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .demo .bg-color-li div {
          height: 100%
        }
        .content {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-shadow: 0 0 3px #ffffff;
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app" class="demo">
    <transition-group name="flip-list" tag="ul">
        <li v-for="curColor in curColors" v-bind:key="curColor" class="bg-color-li">
            <div :style="`background-image: ${curColor}`"></div>
        </li>
    </transition-group>
    <div class="content">
      content...
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
          curColors: [],
          colors: [
              'linear-gradient(45deg, blue, black)',
              'linear-gradient(45deg, red, orange)',
              'linear-gradient(45deg, pink, purple)',
              'linear-gradient(45deg, green, brown)'
          ],
          index: 0
        },
        mounted: function () {
            this.curColors = [this.colors[0]];
            this.startChange();
        },
        methods: {
            startChange () {
                setInterval(() => {
                    if (this.index < this.colors.length - 1) {
                      this.index++
                    } else {
                      this.index = 0
                    }
                    this.curColors.splice(0, 1, this.colors[this.index]);
                }, 2000);
            }
        }
    })
</script>
</body>
</html>

Answer 2

我通过创建一个计算机属性来完成此任务，该属性返回所需的样式，并使用它创建一个字符串。在模板中，您可以在组件样式上使用该属性，就是这样！

df = pd.read_excel('test.xls', sheet_name='Tabelle1')
sliced_df = df.ix[8:26,]# slice base on the row index
for index, rows in sliced_df.iterrows():
    if rows[index] == "x":
        print("test1")

就像您可以使用所需的任何逻辑构建样式并将其返回一样。请记住，计算机属性总是在其依赖项之一被更新时才计算的，因此您将立即更新该样式！

CSS3。 VueJS。动态过渡背景渐变

2 个答案: