国产动画音乐分享组

用css3 做一个求婚小动画

网页设计自学平台 2019-06-18 16:22:30

源码下载:公众号内回复“求婚”!

首先放张效果图

然后一步步分析一下


想要源码的公众号后台回复‘求婚’即可领取,注意是公众号后台回复,不是文章留言!

首先是刚出现的新郎的动画

  1. .w-m img{

  2.    margin-right: 0;

  3.    float: right;

  4.    margin-top: 60px;

  5.    animation: toWoman 0.5s ease .5s both;

  6. }

  7. @keyframes toWoman{

  8.    0%{

  9.        opacity: 0;

  10.        transform: translate(-200px);

  11.    }

  12.    100%{

  13.        opacity: 1;

  14.        transform: translate(0);

  15.    }

  16. }

里面用到的知识点:

  • animation:是一个简写属性,用于设置六个动画属性

    • animation-name 规定需要绑定到选择器的 keyframe 名称

    • animation-duration 规定完成动画所花费的时间,以秒或毫秒计

    • animation-timing-function 规定动画的速度曲线

    • animation-delay 规定在动画开始之前的延迟

    • animation-iteration-count 规定动画应该播放的次数

    • animation-direction 规定是否应该轮流反向播放动画

  • keyframes:让开发者通过指定动画中特定时间点必须展现的关键帧样式(或者说停留点)来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理


  • transform 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜


具体上述图片的网址

然后是那朵花的css

  1. .w-f{

  2.    position: absolute;

  3.    z-index: 20;

  4.    left: 50%;

  5.    margin-left: -30px;

  6.    margin-top: 75px;

  7. }

  8. .w-f img{

  9.    width: 60px;

  10.    animation: show 0.4s ease 1s both;

  11. }

  12. @keyframes show{

  13.    0%{

  14.        opacity: 0;

  15.        transform: scale(0.1,0.1);

  16.    }

  17.    100%{

  18.        opacity: 1;

  19.        transform: scale(1,1);

  20.    }

  21. }

文字部分的css

  1. .w-t-m{

  2.    position: absolute;

  3.    left: 50%;

  4.    z-index: 10;

  5.    line-height: 80px;

  6.    color: #ff720a;

  7.    letter-spacing: 5px;

  8.    opacity: 0;

  9.    animation: titleBloom 1s linear 1s both;

  10.    font-size: 26px;

  11.    margin-left: -125px;

  12. }

  13. @keyframes titleBloom{

  14.    0% {

  15.        transform: translate(-50px);

  16.    }

  17.    100% {

  18.        opacity: 1;

  19.        transform: translate(0);

  20.    }

  21. }

文字边烟花的效果

  1. .w-t img{

  2.    opacity: 0;

  3.    animation: bloom 2s ease 1.2s infinite;

  4. }

  5. .w-t img.boom2{

  6.    float: right;

  7.    animation: bloom 2s ease 1.5s infinite;

  8. }

  9. .w-t img.boom3{

  10.    position: absolute;

  11.    margin-top: 40px;

  12.    animation: bloom 2s ease 1.4s infinite;

  13. }

  14. @keyframes bloom{

  15.    0% {

  16.        transform: scale(0,0);

  17.    }

  18.    100% {

  19.        opacity: 1;

  20.        transform: scale(1,1);

  21.    }

  22. }

最后几束花的效果

  1. .w-fls{

  2.    width: 820px;

  3.    margin: 0 auto;

  4. }

  5. .w-fls img{

  6.    height: 120px;

  7.    z-index: 400;

  8.    animation: showFlows 0.4s ease 2.3s both;

  9. }

  10. @keyframes showFlows{

  11.    0%{

  12.        opacity: 0;

  13.        transform: translate(0,200px);

  14.    }

  15.    100%{

  16.        opacity: 1;

  17.        transform: translate(0);

  18.    }

  19. }

  20. .w-2{

  21.    margin-top: -130px;

  22.    padding-left: 100px;


  23. }

  24. .w-2 img{

  25.    animation: showFlows 0.4s ease 2.7s both;

  26. }


作者:leap_frog

源自:https://segmentfault.com/a/1190000009798046

声明:文章著作权归作者所有,如有侵权,请联系小编删除。


想学网站又很懒?100G八大大型网站视频教程
点我获取

戳“阅读原文”入群免费领取前端开发教程

Copyright © 国产动画音乐分享组@2017