昨天在微信公众号中看到这一篇文章,瞬间觉得css太强大了,只要你想做,everything is possible!
首先放张效果图
然后一步步分析一下:
首先是刚出现的新郎的动画
.w-m img{
margin-right: 0;
float: right;
margin-top: 60px;
animation: toWoman 0.5s ease .5s both;
}
@keyframes toWoman{
0%{
opacity: 0;
transform: translate(-200px);
}
100%{
opacity: 1;
transform: translate(0);
}
}
里面用到的知识点: