css3的一些Demo

发表时间： | 阅读次数:

有关css3一些demo样式

map site（地图节点）
1
2
3
4
5
6
7
8
9
10
11
12
@keyframes map-pulse { 
    0% {
        opacity: .85; 
        filter: alpha(opacity= 85);
        transform: scale(0); 
    } 
    100% {
        opacity: 0;
        filter: alpha(opacity= 0);
        transform: scale(1); 
    }
}
鼠标hover（边框向两边展开）
1
2
3
4
5
6
7
8
9
10
11
12
13
.button .check {
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -50%;
   width: 50%;
   height: 100%;
   border-top: 1px solid red;
   border-bottom: 1px solid red;
   transform-origin: 0;
   transform: scaleX(2);
   transition: 0.3S ease-in-out
}
消息框（下方三角形带背景和边框）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.triangle {
  position:absolute;
  left:50%;
  margin-left:-10px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid dashed dashed dashed
}
.border {
  border-color:#C6CCDC transparent  transparent transparent;
  bottom: -20px;  
}
.bg {
  border-color:#fff transparent  transparent transparent;
  bottom: -19px;  
}
图片hover效果（边框显示&消失）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 .main {
    display: inline-block;
    background-color: gray;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;
}
.border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.border:before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    transform: scale(0,1);
    transition: opacity 0.35s, transform 0.35s
}
.border:after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    border-left: 1px solid red;
    border-right: 1px solid red;
    transform: scale(1,0);
    transition: opacity 0.35s, transform 0.35s
}
.main:hover .border:before ,  .main:hover .border:after{
    transform: scale(1);
}
图片hover效果-局部放大效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;
    border:1px solid red;
    overflow: hidden;
    }
.main img {
    width: calc(100% + 10px);
    opacity: 1;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(-30px,0,0) scale(1.12);
    }
.main:hover img {
    opacity: 0.5;
    transform: translate3d(0,0,0) scale(1)
    }
CSS文字左右两横线效果
1
2
3
4
5
6
7
8
9
/*<span class="title">标题</span>*/
.title {
  display: inline-block;
  padding: 0 20px;
  line-height: 1px;
  border-left: 100px solid #ccc;
  border-right: 100px solid #ccc;
  text-align: center;
}
鼠标滑动，从底部开始切换显示
1
2
3
4
5
6
7
8
<div class="item">
  <div class="item-default">
    <span class="item-title">标题</span>
  </div>
  <div class="item-active">
    <span class="item-title">标题</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item .item-title {
  position: absolute;
  bottom: 170px; /*因为容器从bottom开始，所以这里也需要从bottom开始计算*/
  left: 0px;
  width: 100%;
}
.item .item-active {
  position: absolute;
  bottom: 0px; /*想要从底部开始切换，所以要这些需要写成bottom: 0px;而不是top: 0px;*/
  left: 0px;
  width: 100%;
  height: 0px;
  overflow: hidden;
  background-color: #198DC8;
  transition: height 0.3s;
}