159 lines
3.1 KiB
CSS
159 lines
3.1 KiB
CSS
|
|
.common-tips-hide{
|
|
display: none;
|
|
}
|
|
.common-tips-container{
|
|
width:200px;
|
|
padding:10px;
|
|
font-size:14px;
|
|
color: #fff;
|
|
border:1px #ecedee solid;
|
|
position: absolute;
|
|
top:0;
|
|
left:200px;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
}
|
|
.common-tips-animation{
|
|
animation:common-tips-show 0.3s ease-in;
|
|
-webkit-animation:common-tips-show 0.3s ease-in; /* Safari 和 Chrome */
|
|
}
|
|
/*动画效果从下往上, 从左往右*/
|
|
.common-tips-top-right{
|
|
transform-origin: 10% 100%;
|
|
}
|
|
.common-tips-top-right:after {
|
|
bottom: -7px;
|
|
left: 16px;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
background-color: #000;
|
|
}
|
|
|
|
/*动画效果从下往上, 从右往左*/
|
|
.common-tips-top-left{
|
|
transform-origin: 90% 100%;
|
|
}
|
|
.common-tips-top-left:after {
|
|
bottom: -7px;
|
|
right: 16px;
|
|
left:unset;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/*动画效果从上往下, 从右往左*/
|
|
.common-tips-bottom-right{
|
|
transform-origin: 10% 10%;
|
|
}
|
|
.common-tips-bottom-right:after {
|
|
top: -7px;
|
|
left: 16px;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-bottom: 0;
|
|
border-right: 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/*动画效果从上往下, 从左往右*/
|
|
.common-tips-bottom-left{
|
|
transform-origin: 90% 10%;
|
|
}
|
|
.common-tips-bottom-left:after {
|
|
top: -7px;
|
|
right: 16px;
|
|
left:unset;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-bottom: 0;
|
|
border-right: 0;
|
|
background-color: #fff;
|
|
}
|
|
.common-tips-container-hide{
|
|
animation:common-tips-hide 0.3s ease-out;
|
|
-webkit-animation:common-tips-hide 0.3s ease-out; /* Safari 和 Chrome */
|
|
}
|
|
|
|
/*动画效果从上往下, 从左往右*/
|
|
.common-tips-right-right{
|
|
transform-origin: 0% 10%;
|
|
}
|
|
.common-tips-right-right:after{
|
|
left: -7px;
|
|
top: 13px;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-top: 0;
|
|
border-right: 0;
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
/*动画效果从上往下, 从左往右*/
|
|
.common-tips-left-left{
|
|
transform-origin: 100% 10%;
|
|
}
|
|
.common-tips-left-left:after{
|
|
right: -7px;
|
|
top: 13px;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: " ";
|
|
transform: rotate(45deg);
|
|
border: 1px solid #ecedee;
|
|
border-bottom: 0;
|
|
border-left: 0;
|
|
background-color: #fff;
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
@keyframes common-tips-show {
|
|
0%{
|
|
opacity:0;
|
|
transform: scale(0.6);
|
|
}
|
|
100%{
|
|
opacity:1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes common-tips-hide {
|
|
0%{
|
|
opacity:1;
|
|
transform: scale(1);
|
|
}
|
|
100%{
|
|
opacity:0;
|
|
transform: scale(0.6);
|
|
}
|
|
} |