CSS3 & SCSS 样式简洁之道
程序员文章站
2022-04-17 17:42:30
...
CSS3 & SCSS 样式简洁之道
SCSS 代码
*{
html, body {
width: 100%;
height: 100%;
background-color:#fff;
margin:0;
display: flex; // flex 弹性盒子布局
flex-wrap: wrap; // 换行
}
}
// 定义一个方法
@mixin present($size:100px,$bodyColor:#ff5151, $rebbonColor: #fff, $rotateDeg: 0deg) {
width: $size;
height: $size;
position: relative;
background-color:$bodyColor;
box-shadow: 0px 0px 20px rgba(black, 0.5);
transform: rotate($rotateDeg);
margin: 10px;
.vribbon, .hribbon {
background-color: $rebbonColor;
box-shadow: 0 0 20px rgba(black, 0.5);
}
.cap{
background-color: $bodyColor;
}
}
// 纵向绑带
.vribbon {
width: 15%;
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
// 横向绑带
.hribbon {
width: 100%;
height: 15%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
// 盖子
.cap {
height: 15%;
width: calc(100% + 10px); // 盖子比盒子左右宽出5cm
position: absolute;
left: 0;
top: 0;
transform: translateX(-5px); // 左侧定位, 盒子左移5cm
box-shadow: 0 0 20px rgba(black, 0.5);
}
// 定义颜色变量
$colorRed: #f24;
$colorWhite: #fff;
$colorBlue: #3364f7;
$colorYellow: #ffd221;
$colorPurple: #c747ff;
// 定义颜色集合
$colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple);
@for $i from 0 through 50 {
$size: random(50) + 50;
$rotateDeg: random(20) - 10;
$bodyColor: nth($colors, random(5));
$ribbonColor: nth($colors, random(5));
.present#{$i}{
@include present(#{$size}px, $bodyColor, $ribbonColor,#{$rotateDeg}deg)
}
}
React 随机盒子代码
{
Array.from(new Array(50).keys()).map((item, index) => {
return (
<div className={`present${index}`} key={index}>
<div className="cap"></div>
<div className="vribbon"></div>
<div className="hribbon"></div>
</div>
)
})
}
效果
推荐阅读