常用css收集

发表于 更新于

常用css收集

上下抖动效果的css

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
.animated {
  animation-duration: 2s; /*动画时间*/
  animation-fill-mode: both; /*播放后的状态*/
}
.animated {
  animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
.animated {
  animation-duration: 2s; /*动画时间*/
}

.up{
  animation-name:upAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}

@keyframes upAnimation{
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
  transform: translate3d(0,0,0);
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(0,-30px,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(0,-15px,0);
  }
  90%{
  transform: translate3d(0,-4px,0);
  }
}

使用

1
<div class="up animated"></div>

css3 图片hover180度旋转

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
.imgZoom img,
.imgY180 img {
    -moz-transition: all .8s ease 0s;
    -ms-transition: all .8s ease 0s;
    -o-transition: all .8s ease 0s;
    -webkit-transition: all .8s ease 0s;
    transition: all .8s ease 0s;
}

.imgZoom,.imgY180 {
    overflow: hidden;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.imgZoom:hover img {
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.imgY180:hover img {
    cursor: pointer;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

css3 图片hover放大效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.imgHoverZoom{left;overflow:hidden;}
.imgHoverZoom{

-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.imgHoverZoom:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}

css延迟hover离开延迟消失

改变高度
动画对display: block; 不起作用

1
2
3
4
5
6
7
8
9
10
11
12
13
#login-panel-ghost {
  height: 0;
  overflow: hidden;
  transition: height 0s;
  transition-delay: 2s;
}
.top-menu-login:hover #login-panel-ghost {
  height: 180px;
  position: fixed;
  transition-delay: 0s;
  width: 250px;
}