50 天学习 50 个项目 - HTMLCSS and JavaScript
day43-Feedback Ui Design（反馈ui设计）
效果
文章来源：https://www.toymoban.com/news/detail-611319.html
文章来源地址https://www.toymoban.com/news/detail-611319.html
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')
})
到了这里，关于day43-Feedback Ui Design（反馈ui设计）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
