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

Posted 2023-02-22

技术标签:

【中文标题】CSS3。 VueJS。动态过渡背景渐变【英文标题】：CSS3. VueJS. Dynamic Transitioning Background Gradients 【发布时间】：2020-04-15 19:23:56 【问题描述】：

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

<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>

但我需要让渐变从两种颜色的一种组合逐渐变为另一种。

最好的方法是什么？

【问题讨论】：

你想要这样的东西：jsfiddle.net/ejEzy/2 ? 【参考方案1】：

我通过创建一个返回您需要的样式的计算机属性，通过创建一个字符串来做到这一点。在模板中，您在组件的样式上使用该属性，就是这样！

<v-card-title primary-title :style="productStyle">
  <h3 class="headline text-capitalize word-break-none mb-0">title.toLowerCase()</h3>
</v-card-title>

computed: 
    productStyle () 
      return 'background-image:linear-gradient(to top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 40%, rgba(255,255,255,0) 60%)'

这样你就可以用你想要的任何逻辑来构建你的风格并返回它。请记住，计算机属性总是在其依赖项之一更新时计算，因此您会立即更新该样式！

【讨论】：

【参考方案2】：

另一种思考方式

<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>

【讨论】：

如果我将光标放在屏幕上，这可以工作，但我需要动态更改颜色。我需要当我更改变量backgroundImage 时，颜色背景会逐渐变化。对不起，据我所知，CSS不能在背景图片之间动态过渡，除非计算颜色值。可以使用vue的transition-group组件。上面的代码参考

以上是关于CSS3。 VueJS。动态过渡背景渐变的主要内容，如果未能解决你的问题，请参考以下文章

div背景颜色怎样渐变 css实现div层背景颜色渐变代码