前言
本来想写一个彩虹效果,来练习下使用 css3 grid 布局,在实现的过程中,发现用不上表格,哈哈,意外收获一个热气球(css 相对定位+绝对定位)。
彩虹效果附在后面,是使用了css3 grid 布局。正好可以前后对比一下。
告白气球
都有裸眼3D效果了呢,哈哈。
源码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>彩虹</title>
<style>
body{
background: #f7f7f7;
}
div.top{
position: relative;
}
div.top>div{
border: 1px solid #f7f7f7;
border-radius: 50%;
position: absolute;
text-align: right;
font-size: 30px;
color:#fff;
}
div.top>div:nth-child(1){
width:700px;
height:700px;
line-height: 700px;
z-index:1;
background-image: linear-gradient(red,orange);
}
div.top>div:nth-child(2){
width:600px;
height:600px;
line-height: 600px;
z-index:2;
background-image: linear-gradient(orange,yellow);
}
div.top>div:nth-child(3){
width:500px;
height:500px;
line-height: 500px;
z-index:3;
background-image: linear-gradient(yellow,green);
}
div.top>div:nth-child(4){
width:400px;
height:400px;
line-height: 400px;
z-index:4;
background-image: linear-gradient(green,blue);
}
div.top>div:nth-child(5){
width:300px;
height:300px;
line-height: 300px;
z-index:5;
background-image: linear-gradient(blue,#528fd3);
}
div.top>div:nth-child(6){
width:200px;
height:200px;
line-height: 200px;
z-index:6;
background-image: linear-gradient(#528fd3,purple);
}
div.top>div:nth-child(7){
width:100px;
height:100px;
line-height: 100px;
z-index:7;
background-image: linear-gradient(purple,red);
}
</style>
</head>
<body>
<div class="top">
<div>👍</div>
<div>U</div>
<div>E</div>
<div>V</div>
<div>O</div>
<div>L</div>
<div>I</div>
</div>
</body>
</html>
彩虹来了
源码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>彩虹</title>
<style>
body{
background: #f7f7f7;
}
div.container{
position: relative;
}
div.top{
display: grid;
place-content:center;
}
div.top>div{
grid-area:1/1;
place-self:center;
border: 1px solid #f7f7f7;
border-radius: 50%;
text-align: right;
font-size: 30px;
color:#fff;
}
div.top>div:nth-child(1){
width:820px;
height:820px;
z-index:1;
background-image: linear-gradient(red,orange);
}
div.top>div:nth-child(2){
width:700px;
height:700px;
z-index:2;
background-image: linear-gradient(orange,yellow);
}
div.top>div:nth-child(3){
width:580px;
height:580px;
z-index:3;
background-image: linear-gradient(yellow,green);
}
div.top>div:nth-child(4){
width:460px;
height:460px;
z-index:4;
background-image: linear-gradient(green,blue);
}
div.top>div:nth-child(5){
width:340px;
height:340px;
z-index:5;
background-image: linear-gradient(blue,#528fd3);
}
div.top>div:nth-child(6){
width:220px;
height:220px;
z-index:6;
background-image: linear-gradient(#528fd3,purple);
}
div.top>div:nth-child(7){
width:120px;
height:120px;
line-height: 120px;
z-index:7;
background-image: linear-gradient(purple,red);
}
div.bottom{
width:100%;
height:410px;
background: #f7f7f7;
position: absolute;
top:50%;
z-index:8;
}
.animation{
cursor: pointer;
transition: all 1s ease-in;
}
.animation:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="animation"></div>
<div class="animation"></div>
<div class="animation"></div>
<div class="animation"></div>
<div class="animation"></div>
<div class="animation"></div>
<div class="animation"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>