DEMO 1 图片切换
.demo_1{
width: 200px;
position: relative;
}
.demo_1 .img_1{
position: absolute; ;
transition-duration: 1s;
transform: rotate(0deg) scale(1,1);
}
.demo_1 .img_2{
transition-duration: 1s;
position: absolute; ;
transform: rotate(0deg) scale(0,0);
}
.demo_1:hover .img_1{
transition-duration: 1s;
transform: rotate(360deg) scale(0,0);
}
.demo_1:hover .img_2{
transition-duration: 1s;
transform: rotate(360deg) scale(1,1);
}
tips: hover图片
DEMO 2 弹性效果
input:not(:focus) + .callout:not(:hover) {
transform: scale(0);
transition: .25s transform;
}
.callout {
transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
transform-origin: 1.4em -.4em;
}