怎么实现微信聊天时的气泡图

html-css024

怎么实现微信聊天时的气泡图,第1张

1)首先想要设置聊天气泡,我们先要下载一个叫“微信聊天泡泡”的软件。 ...

2)下载完毕之后,我们打开微信,然后在聊天页面的右下方的“+”点击进去,然后在“...

3)最后在“+”中我们就可以看到“微信聊天泡泡”,然后点击打开,选择想要使用的气...

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title></title> 

<style>

*{ padding:0margin:0font-size:14px }

body{

background: grey

}

.d{

position:fixedmargin:autoleft:0right:0bottom:24pxwidth: 160pxheight:120px

animation: d1 3s linear animation-fill-mode: both

}

@keyframes d1{

from{

bottom: 24px

}

to{

bottom: 360px

}

}

.d img{

height:120pxposition: absolutemargin:autoleft:0top:0animation: d2 2s 3s linear infinite animation-fill-mode: both

}

@keyframes d2{

0%,100%{

transform:rotate(0deg)

}

50%{  

left: 40px

transform:rotate(90deg)

}

}

</style>

</head>

<body>

<div class="d">

<img src="http://aimusic.image.alimmdn.com/Image/6d235b11f15838d6711ec6b0ca5e1a32.png"/>

</div>

</body>

</html>

使用css可以禁止:

.className {user-select: none-webkit-user-select:none-moz-user-select:none-ms-user-select:none}

其实简单点你可以把文字做成图片 这样是最简单的 ,上面描述的方法可能有些老版本不一定有用。

当然你也可以试试用些H5制作软件来解决 epub360 IH5什么的