热点推荐

查看: 423|回复: 0

HTML+CSS制作七夕情人节求婚动画(520情人节程序员表白)

[复制链接]
  • TA的每日心情
    慵懒
    2022-6-29 18:10
  • 等级头衔

    等級:管理员

    Rank: 9Rank: 9Rank: 9

    积分成就
    UID
    1
    威望
    665
    贡献
    2564
    主题
    1257
    精华
    3
    积分
    3719
    注册时间
    2020-1-22
    最后登录
    2022-8-10

    快捷版块
    版块
    官方交流Q群
    版块
    在线申请友链

    建功伟业

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献荣誉管理论坛元老

    发表于 6 天前 来自手机 | 显示全部楼层 |阅读模式
    画(520情人节程序员表白)
    css太强大了,只要你想做,everything is possible!CSS模仿求婚小动画

    效果图如下:
    1659589596312.jpg
    出现的新郎的动画
    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. }
    复制代码

    html代码:
    1. <html>
    2.         <head>
    3.                 <meta charset="utf-8">
    4.                 <link rel="stylesheet" href="wedding.css">
    5.                 <title>模仿CSS动画的求婚小动画</title>
    6.         </head>
    7.         <body>
    8.                 <div class="w-t">
    9.                         <div class="w-t-m">亲爱的,嫁给我好吗?</div>
    10.                         <img src="png/boom.png" alt="" class="boom1">
    11.                         <img src="png/boom.png" alt="" class="boom2">
    12.                         <img src="png/boom.png" alt="" class="boom3">
    13.                 </div>
    14.                 <div class="w-p">
    15.                         <div class="w-m">
    16.                                 <img src="png/man.png" alt="">
    17.                         </div>
    18.                         <div class="w-w">
    19.                                 <img src="png/woman.png" alt="">
    20.                         </div>
    21.                         <div class="w-f">
    22.                                 <img src="png/flower.png" alt="">
    23.                         </div>
    24.                 </div>
    25.                 <div class="w-fls">
    26.                         <img src="png/flowers1.png" alt="">
    27.                         <img src="png/flowers2.png" alt="">
    28.                         <img src="png/flowers1.png" alt="">
    29.                         <img src="png/flowers2.png" alt="">
    30.                         <img src="png/flowers1.png" alt="">
    31.                         <img src="png/flowers2.png" alt="">
    32.                 </div>
    33.                 <div class="w-fls w-2">
    34.                         <img src="png/flowers1.png" alt="">
    35.                         <img src="png/flowers2.png" alt="">
    36.                         <img src="png/flowers1.png" alt="">
    37.                         <img src=
    复制代码

    帖子地址: 

    温馨提示:
    1、在资源网里发表的文章仅代表作者本人的观点,与本网站立场无关。
    2、资源网的所有内容都不保证其准确性,有效性,时间性。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
    3、当政府机关依照法定程序要求披露信息时,本资源网均得免责。
    4、若因线路及非本站所能控制范围的故障导致暂停服务期间造成的一切不便与损失,资源网不负任何责任。
    5、注册会员通过任何手段和方法针对资源网进行破坏,我们有权对其行为作出处理。并保留进一步追究其责任的权利。
    6、 如遇到加密压缩包,默认解压密码为"www.52qians.com",如遇到无法解压的请联系管理员!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部