这篇博客详细介绍了如何使用CSS进行网页元素的样式设计，包括body背景颜色设置、字体族选择、容器尺寸调整以及过渡效果的实现。文章还探讨了如何通过类选择器实现元素激活和完成状态的样式变化，例如改变字体大小、颜色和下划线动画。此外，还展示了按钮的样式定义，包括背景颜色、边框、内边距和圆角。
CSS
语言：
CSSSCSS
确定
body {
background-color: #6d5959;
}
body * {
font-family: 'Montserrat' sans-serif;
}
.wrap {
width: 450px;
margin: 0 auto;
}
.mat-label {
display: block;
font-size: 16px;
transform: translateY(25px);
color: #e2e2e2;
transition: all 0.5s;
}
.mat-input {
position: relative;
background: transparent;
width: 100%;
border: none;
outline: none;
padding: 8px 0;
font-size: 16px;
}
.mat-div {
padding: 30px 0 0 0;
position: relative;
}
.mat-div:after,
.mat-div:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: #e2e2e2;
bottom: 0;
left: 0;
transition: all 0.5s;
}
.mat-div::after {
background-color: #8e8dbe;
transform: scaleX(0);
}
.is-active::after {
transform: scaleX(1);
}
.is-active .mat-label {
color: #8e8dbe;
}
.is-completed .mat-label {
font-size: 12px;
transform: translateY(0);
}
button {
background-color: #93e1d8;
border: none;
display: block;
margin: 35px auto;
padding: 15px 30px;
border-radius: 10px;
cursor: pointer;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
