首页 > 其他分享 >【技术实战】Vue功能样式实战【六】

【技术实战】Vue功能样式实战【六】

时间：2023-08-12 23:45:43浏览次数：72  
标签：实战 info Vue 样式 value animation circle 类名 255

需求实战一

样式展示

代码展示

<template>
    <ARow>
        <ACol style="background-color:#F1F4F5 ">
            <div class="info-card">
                <div class="info-title">
                    数据总和
                </div>
                <div class="info-value">
                    100
                </div>
            </div>

        </ACol>
    </ARow>
</template>
<script setup lang="ts">

</script>
<style scoped>
:deep(.info-card){
    width: 318px;
    height: 116px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

:deep(.info-title){
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding:20px 0 20px 30px;
}

:deep(.info-value){
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding:0 0 0 30px;
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个信息卡片。具体解释如下：

- <template> 标签用于定义组件的模板部分。
- <ARow> 和 <ACol> 是自定义的组件，用于布局。<ARow> 表示一行，<ACol> 表示一列。
- <ACol> 标签内部有一个 style 属性，用于设置背景颜色为 #F1F4F5。
- <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。
- <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码。

最后是 <style scoped> 标签，用于定义组件的样式。:deep() 是一个深度选择器，用于选择组件内部的元素。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、阴影和边框圆角等样式。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色、行高和内边距等样式。

这段代码的作用是创建一个信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、阴影和边框圆角等。

需求实战二

样式展示

代码展示

<template>
    <div class="info-card">
        <div class="info-title">
            数据总和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: #17b3a3;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果的信息卡片。具体解释如下：

- <template> 标签用于定义组件的模板部分。
- <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。
- <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。
- <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。
- <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈。

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码。

最后是 <style scoped> 标签，用于定义组件的样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、边框圆角等样式，并使用了 Flex 布局使内容垂直居中。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色等样式。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果。

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果。

这段代码的作用是创建一个带有动画效果的信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、边框圆角和居中对齐等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

需求实战三

样式展示

代码展示

<template>
    <div class="info-card">
        <div class="info-title">
            数据总和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 20px 20px;

}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFD700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果和背景模糊的信息卡片。具体解释如下：

- <template> 标签用于定义组件的模板部分。
- <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。
- <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。
- <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。
- <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈。

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码。

最后是 <style scoped> 标签，用于定义组件的样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、背景模糊、边框圆角、阴影和背景图案等样式，并使用了 Flex 布局使内容垂直居中。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色和文字阴影等样式。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果。

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果。

这段代码的作用是创建一个带有动画效果和背景模糊的信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

需求实战四

样式展示

代码展示

<template>
    <div class="home-component">
        <ARow style="padding:0 0 30px 0">
            <div class="info-card">
                <div class="info-title">
                    数据总和
                </div>
                <transition name="number-transition">
                    <div class="info-value" :class="{ init:init,changed: isNumberIncreased, decreased: isNumberDecreased }">
                        {{ animatedValue }}
                    </div>
                </transition>
                <div class="animation-container">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
            </div>
        </ARow>
        <ARow>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
                </div>
            </ACol>
            <ACol span="4">
            </ACol>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
                </div>
            </ACol>
        </ARow>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const value = ref(100);
const isNumberIncreased = ref(false);
const isNumberDecreased = ref(false);

const animatedValue = ref(value.value);
const init=ref(true)


const addNumber = () => {
        const startValue = value.value;
        const endValue = startValue + 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberDecreased.value = false;

    isNumberIncreased.value = true;

};

const minNumber = () => {
        const startValue = value.value;
        const endValue = startValue - 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberIncreased.value = false;

    isNumberDecreased.value = true;
};
const animateNumber = (startValue:any, endValue:any) => {
    const duration = 1000; // 动画持续时间，单位为毫秒
    const frameRate = 10; // 每秒帧数
    const totalFrames = duration / (1000 / frameRate);
    const frameIncrement = (endValue - startValue) / totalFrames;

    let currentFrame = 0;
    const timer = setInterval(() => {
        currentFrame++;
        animatedValue.value = Math.round(startValue + frameIncrement * currentFrame);

        if (currentFrame === totalFrames) {
            clearInterval(timer);
        }
    }, 1000 / frameRate);
};

watch(value, () => {
    animatedValue.value = value.value;
});
</script>

<style scoped>
.home-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
}

.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.info-value.init {
    color: #ffffff;
    transform: scale(1.2);
}
.info-value.changed {
    color: #13c40d;
    transform: scale(1.2);
}
.info-value.decreased {
    color: #eb5766;
    transform: scale(1.2);
}
.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #ffd700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}

.circle:nth-child(1) {
    animation-delay: 0.1s;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.3s;
}

.circle:nth-child(4) {
    animation-delay: 0.4s;
}

.circle:nth-child(5) {
    animation-delay: 0.5s;
}

.circle:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.button-container {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    animation: bounce 2s infinite;
    animation-delay: 1s;
}

.increase-button,
.decrease-button {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: none;
    transform: scale(1.05) rotate(360deg);
    transition: transform 1s;
    border-radius: 5px;
}

.increase-button {
    background-color: #38b2ac;
    margin-right: 10px;
}

.decrease-button {
    background-color: #eb5766;
    margin-left: 10px;
}

.increase-button:hover,
.decrease-button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果和交互功能的信息卡片。具体解释如下：

- <template> 标签用于定义组件的模板部分。
- <div class="home-component"> 是一个具有 home-component 类名的 div 元素，表示整个组件的容器。
- <ARow> 和 <ACol> 是自定义的组件，用于布局。<ARow> 表示一行，<ACol> 表示一列。
- <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。
- <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。
- <transition> 标签用于添加过渡效果，name 属性指定过渡效果的名称。
- <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。使用了动态绑定 :class 来根据条件添加不同的类名，实现数值变化时的样式变化。
- {{ animatedValue }} 是一个插值表达式，用于显示动态绑定的 animatedValue 变量的值。
- <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。
- <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈。

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分。通过 import 导入了 ref 和 watch 方法，用于创建响应式数据和监听数据变化。定义了一些变量和方法，包括 value、isNumberIncreased、isNumberDecreased、animatedValue、init、addNumber、minNumber 和 animateNumber。addNumber 方法用于增加数值，minNumber 方法用于减少数值，animateNumber 方法用于实现数值变化的动画效果。使用 watch 监听 value 的变化，并更新 animatedValue 的值。

最后是 <style scoped> 标签，用于定义组件的样式。.home-component 表示选择具有 home-component 类名的元素，设置了居中对齐等样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、背景模糊、边框圆角、阴影和背景图案等样式。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色和文字阴影等样式。.info-value.init、.info-value.changed 和 .info-value.decreased 分别表示根据条件添加的类名，用于实现数值变化时的样式变化。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果。

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果。

这段代码的作用是创建一个带有动画效果和交互功能的信息卡片组件。信息卡片显示一个标题为 "数据总和"，数值初始值为 "100"，并根据用户点击增加或减少数值，同时显示数值的变化动画效果。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果。

标签：实战,info,Vue,样式,value,animation,circle,类名,255
From： https://www.cnblogs.com/yyyyfly1/p/17625863.html

相关文章

  • WPF自定义控件实战:自制上传文件显示进度按钮
    自定义控件在WPF开发中是很常见的，有时候某些控件需要契合业务或者美化统一样式，这时候就需要对控件做出一些改造。 目录按钮设置圆角按钮上传文件相关定义测试代码 话不多说直接看效果默认效果:上传效果:按钮设置圆角因为按钮本身没有CornerRadius属性，所......
  • Vue学习笔记：路由开发 Part 08 导航守卫
    vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。全局前置守卫可以使用 router.beforeEach 注册一个全局前置守卫。当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航......
  • VUE3_API 风格
    选项式API(OptionsAPI)使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例<script>exportdefault{//data()返回的属性将会成为响应式的状态/......
  • 使用create-vue创建vue3项目
    create-vue是vue3新的脚手架搭建项目工具，底层构建工具使用vite，而不是vue-cli的webpack。但不是说你不能用以前的vuecreate命令来创建vue3项目，你完全可以用vue-cli来创建。vite：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project使用create-vue创建项目使用cr......
  • create-vue和vue-cli创建项目的差异
    这里对比的是vue-cli和create-vue创建vue3项目的文件中的内容差异。原来public中的index.html被移动到根目录：（原因见这里：）https://cn.vitejs.dev/guide/#index-html-and-project-root<!--不同点1：script放在了最前面，方便编写代码，实际上你给他放在最后面也没问题.script属......
  • vue3组合式api生命周期
    生命周期钩子函数Vue3：https://cn.vuejs.org/api/composition-api-lifecycle.htmlVue2：https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子Vue2（选项式）Vue3（选项式）Vue3（组合式Api）beforeCreate()beforeCreate()created()created()setup()beforeMount()bef......
  • vue3在父子组件使用v-model双向绑定
    父组件：<scriptsetup>importInputBoxfrom"@/compon/InputBox.vue";import{ref}from"vue";constcount=ref(100)</script><template><div>我是父组件,{{count}}<InputBoxv-model="count"&......
  • vue3.3实验性新特性defineModel
    子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？vue3.3新的实验性特性defineModel可以完全不写emit和props。由于是实验性特性，所以需要配置之后才能使用。修改vite.config.js：exportdefaultdefineConfig({plugins:[vue(**{script:{......
  • VUE
    Vue是构建用户界面的渐进式JavaScript框架尤雨溪开发的特点：1.采用组件化模式，提供代码复用性、且让代码更好维护2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。 ......
  • VUE使用模板页面并预留子页面区域
    1.新建模板页面MainLayout.vue，并在template里面防止标签用于嵌入子页面内容<template>'''其他页面内容'''<router-view></router-view>'''其他页面内容'''</template>2.在router的index.js中设置子路由,其中DailyData......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99