|
|
@@ -23,7 +23,8 @@
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
- .bubble-container{
|
|
|
+
|
|
|
+ .bubble-container {
|
|
|
width: 500px;
|
|
|
height: 600px;
|
|
|
background-color: #fff;
|
|
|
@@ -36,7 +37,8 @@
|
|
|
padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
- .bottom-info{
|
|
|
+
|
|
|
+ .bottom-info {
|
|
|
/* 如果块元素定位后fixed 和 absolute宽度会变成内容的宽*/
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
@@ -48,29 +50,103 @@
|
|
|
color: #b28704;
|
|
|
background-color: #fffde7;
|
|
|
}
|
|
|
- .bubble-container .text{
|
|
|
+
|
|
|
+ .bubble-container .text {
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .bubble-container .text h1{
|
|
|
+
|
|
|
+ .bubble-container .text h1 {
|
|
|
color: #689f38;
|
|
|
- margin:20px 0;
|
|
|
+ margin: 20px 0;
|
|
|
}
|
|
|
+
|
|
|
.bubble-container .text .info {
|
|
|
width: 300px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
+
|
|
|
.bubble-container .text .desc {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- .bubble-container .bubble-content{
|
|
|
+
|
|
|
+ .bubble-container .bubble-content {
|
|
|
width: 100%;
|
|
|
height: 380px;
|
|
|
- background-color:#b2dfdb;
|
|
|
+ background-color: #b2dfdb;
|
|
|
margin-top: 20px;
|
|
|
border-radius: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bubble-content .bubble-item {
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ border:3px solid #fff;
|
|
|
+
|
|
|
+ line-height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: red;
|
|
|
+
|
|
|
}
|
|
|
+ .bubble-content .bubble-one {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ top:50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -25px;
|
|
|
+ margin-left: -25px;
|
|
|
+ }
|
|
|
+ .bubble-content .bubble-two {
|
|
|
+ background-color: #ffd54f;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ position: absolute;
|
|
|
+ top:30px;
|
|
|
+ left:30px;
|
|
|
+ }
|
|
|
+ .bubble-content .bubble-three {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ background-color: #81d4fa;
|
|
|
+ position: absolute;
|
|
|
+ top:60px;
|
|
|
+ left:60px;
|
|
|
+ }
|
|
|
+ .bubble-content .bubble-item::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 20%;
|
|
|
+ height: 15%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ position: absolute;
|
|
|
+ top: 20%;
|
|
|
+ left: 20%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ /* .bubble-content .bubble-one:hover{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-top: -30px;
|
|
|
+ margin-left: -30px;
|
|
|
+ line-height: 60px;
|
|
|
+ } */
|
|
|
+
|
|
|
+ .bubble-content .bubble-item:hover{
|
|
|
+ /* transform 变形 scale 缩放 */
|
|
|
+ transform: scale(1.5);
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -84,7 +160,11 @@
|
|
|
<p class="info">任务： 观察并理解气泡的定位方式，鼠标悬停气泡试试看！</p>
|
|
|
<p class="desc">（气泡用 absolute，气泡区用 relative，底部说明条用 fixed）</p>
|
|
|
</div>
|
|
|
- <div class="bubble-content"></div>
|
|
|
+ <div class="bubble-content">
|
|
|
+ <div class="bubble-item bubble-one">A</div>
|
|
|
+ <div class="bubble-item bubble-two">B</div>
|
|
|
+ <div class="bubble-item bubble-three">C</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 底部信息 -->
|
|
|
<div class="bottom-info">本页面用于练习 position: relative / absolute / fixed 及 hover/伪元素效果</div>
|
