使用animate 两个div向中间移动合并成一块

最近一个需求，做一个直播的H5送礼物的动画，要求送出男女情侣动漫的礼物，相应的头像和昵称会自动匹配成功的一个动画展示效果，效果图如下。

1 . 安装使用 animate.css 动画

npm install animate.css --save

1.2 index.js 引入

import 'animate.css';

1.3 页面使用

<div class='animate__animated animate__slideInLeft'></div> //从左向右移动
<div class='animate__animated animate__slideInRight'></div> //从右向左移动

2. 页面

2.1 html

<div class='body'><div class='interactionBox'><div class='user'><div class='user1 animate__animated animate__slideInLeft'><img class='avatar' src="require('./image/avatar1.jpg')" /><span class='name'>fantasy</span></div><div class='user2 animate__animated animate__slideInRight'><img class='avatar' src="require('./image/avatar2.jpg')" /><span class='name'>pixixi</span></div></div></div>
</div>

2.2 css部分

.body {display: flex;align-items: center;flex-direction: column;align-items: stretch;padding-bottom: 50px;height: 100vh;background-color: #F5F5F5;.interactionBox {background-size: 100% 348px;background-repeat: no-repeat;position: relative;.user {width: 100%;display: flex;width: 100%;justify-content: center;padding-top: 46px;position: absolute;height: 174px;background: url('./image/love.png') no-repeat;background-size: 203px 174px;background-position: 57% 20%;margin: auto;}.user1,.user2 {width: 110%;display: inline-block;display: block;position: relative;.avatar {display: block;width: 55px;height: 55px;border-radius: 50%;border: 3px solid #fff;position: absolute;top: 0px;}.name {display: inline-block;font-size: 9px;line-height: 9px;padding: 3px 0;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;background: #e686ff;border: 2px solid #fff;border-radius: 28px;width: 55px;text-align: center;position: absolute;top: 50px;}}.user1 {display: block;text-align: right;.avatar {display: flex;margin-left: auto;right: -1.5px;}.name {right: 0;}}.user2 {text-align: left;.avatar {left: -1.5px;}.name {left: 0;}}}
}

使用animate 两个div向中间移动合并成一块相关推荐

数组--将两个有序数组a,b合并成新的有序数组c
有两个有序的数组a,b;长度分别是m,n;请使用时间复杂度为m+n的算法,将此两个数组重新合并构成一个有序数组c. 1 static void Main(string[] args) 2 { 3 in ...
两个pdf合并成一个pdf的方法
如何把两个pdf合并成一个pdf??在工作中对,对文件如果没有固定格式的要求,选择pdf格式编辑文件的小伙伴应该不在少数,大家一般都是看中了它的稳定性和极高的阅读性.那在这样的工作中,有时会需要将两个 ...
HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
两个div叠加触发事件发生闪烁问题
今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的 ...
ie6和ie7两个div之间有空隙
把两个div分别再外套一个div即可转载于:https://blog.51cto.com/chenhuixfyy/1074617
div和div之间画横线_HTML如何在两个div标签中间画一条竖线
近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高). 往常我们画一条横线直接用标签即可,当画一条竖 ...
怎么把两个div一左一右放
怎么把两个div一左一右放 1.代码 <%@ page contentType="text/html;charset=UTF-8" language="java&q ...
html中如何让三个方块并排,html – 并排设置两个div,然后设置第三个div
我如何并排设置两个div,而下面的第三个div设置为这样 . 我当前的代码如下所示,将div放在name div之后 Name 6:30 PM Note CSS: #contact_table_dat ...

使用animate 两个div向中间移动合并成一块

1 . 安装使用 animate.css 动画

2. 页面

使用animate 两个div向中间移动合并成一块相关推荐

最新文章

热门文章