div css颜色

下载代码

html

css

分享到微信朋友圈

html

css

body{
    padding: 0;
    margin: 0;
    background:#232323;
}
.box{
    position: relative;
    margin: auto;
    display: block;
    margin-top: 8%;
    width: 600px;
    height: 420px;
    background: none;
}
.part-1, .part-2, .part-3, .part-4, .part-5, .part-6, .part-7, .part-8, .part-9,
.part-10, .part-11, .part-12, .part-13, .part-14, .part-15, .part-16, .part-17,
.part-18{
    position: absolute;
    width: 50%;
    height: 25%;
    left: 25%;
    bottom: 37.5%;
    border-radius: 100% 4px;
    opacity: 0.5;
}
.part-1{
    background: #fffe33;
    transform: rotate(0deg);
}
.part-2{
    background: #feff00;
    transform: rotate(-10deg);
}
.part-3{
    background: #ff9935;
    transform: rotate(-20deg);
}
.part-4{
    background: #f87e07;
    transform: rotate(-30deg);
}
.part-5{
    background: #ff339c;
    transform: rotate(-40deg);
}
.part-6{
    background: #ff007e;
    transform: rotate(-50deg);
}
.part-7{
    background: #ff34ff;
    transform: rotate(-60deg);
}
.part-8{
    background: #ff00ff;
    transform: rotate(-70deg);
}
.part-9{
    background: #9a34ff;
    transform: rotate(-80deg);
}
.part-10{
    background: #7f00ff;
    transform: rotate(-90deg);
}
.part-11{
    background: #3233ff;
    transform: rotate(-100deg);
}
.part-12{
    background: #0000fe;
    transform: rotate(-110deg);
}
.part-13{
    background: #3399fe;
    transform: rotate(-120deg);
}
.part-14{
    background: #0978f5;
    transform: rotate(-130deg);
}
.part-15{
    background: #33fffe;
    transform: rotate(-140deg);
}
.part-16{
    background: #32ff98;
    transform: rotate(-150deg);
}
.part-17{
    background: #99ff32;
    transform: rotate(-160deg);
}
.part-18{
    background: #81fe00;
    transform: rotate(-170deg);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg