50 天学习 50 个项目 - HTMLCSS and JavaScript

day43-Feedback Ui Design（反馈ui设计）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Let Us Know Your Feedback</title>
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 面板容器 -->
    <div id="panel" class="panel-container">
        <strong>你对我们的服务表现满意吗?</strong>
        <!-- 评级容器 -->
        <div class="ratings-container">
            <!-- 评级 -->
            <div class="rating">不好</div>

            <div class="rating">一般</div>

            <div class="rating active">满意</div>
        </div>
        <button class="button" id="send">发送</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: url('https://source.unsplash.com/random') no-repeat center/cover;
    font-family: 'Montserrat', sans-serif;
    /* 子元素面板居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 面板容器 */
.panel-container {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    /* 字体大小设置为父元素字体大小的百分比。 */
    font-size: 90%;
    /* 竖直居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    max-width: 400px;
    transition: transform 0.5s linear;
}

/* 类似翻卡片的效果 */
.changeCard{
    transform: rotateY(360deg);
}
/* 标题 */
.panel-container strong {
    line-height: 20px;
}

/* 评级容器 */
.ratings-container {
    display: flex;
    margin: 20px 0;
}

/* 评级 */
.rating {
    flex: 1;
    cursor: pointer;
    padding: 20px;
    margin: 10px 5px;
    background: linear-gradient(145deg, #cacaca, #f0f0f0);
}

/* 选中该项时 */
.rating:hover,
.rating.active {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.98);
}


/* 发送按钮 */
.button {
    cursor: pointer;
    position: relative;
    padding: 10px 24px;
    font-size: 18px;
    color: rgb(98, 177, 193);
    border: 2px solid rgb(98, 136, 193);
    border-radius: 34px;
    background-color: transparent;
    font-weight: 600;
    /* 定义了一个自定义的贝塞尔曲线，使得动画起初缓慢，然后加速，在接近结束时再次缓慢，从而创建一个平滑的过渡效果。 */
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

/* 按钮悬浮时，背景的变化 */
.button::before {
    content: '';
    position: absolute;
    /* inset 属性是一个简写属性，设置了伪元素的 top、right、bottom 和 left 的值都为 0，即将伪元素放置在其容器元素的四个边界上。 */
    inset: 0;
    /* 居中 */
    margin: auto;
    /* 以上两个css属性使其从按钮中心放大 */
    width: 50px;
    height: 50px;
    /* 继承了按钮元素的 border-radius 属性 */
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: rgb(114, 135, 238);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
    scale: 3;
}

.button:hover {
    color: #212121;
    scale: 1.1;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

.button:active {
    scale: 1;
}

/* 用于js中反馈后的显示文本的小红心 */
.fa-heart {
    color: red;
    font-size: 30px;
    margin-bottom: 10px;
}

script.js

// 重点 flex  事件委派 注意：html中必须有一个.rating添加active类，否则报错
// 1.获取元素节点
const ratings = document.querySelectorAll('.rating')//所有的评级选项
const ratingsContainer = document.querySelector('.ratings-container')//评级容器
const sendBtn = document.querySelector('#send')//发送按钮
const panel = document.querySelector('#panel')//展示面板
let selectedRating = '满意'
// 此处使用事件委派
ratingsContainer.addEventListener('click', (e) => {
    // console.log(e.target);//<div class="rating"> 一般 </div >
    // 移除原有的active
    document.querySelector('.rating.active').classList.remove('active')
    // 对当前点击的选项加active
    e.target.classList.add('active')
    selectedRating = e.target.innerText
    // console.log(selectedRating);
})
// 点击，发送显示结果
sendBtn.addEventListener('click', () => {
    panel.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>感谢!</strong>
        <br>
        <strong>您的反馈为: ${selectedRating}</strong>
        <p>我们将利用您的反馈来改进我们的服务</p>
    `
    panel.classList.add('changeCard')
})