css聊天气派,CSS3 动态的聊天框

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0; }

html, body {

height: 100%; }

body {

background: -webkit-linear-gradient(left top, #ccc 25%, #ddd 25%, #ddd 50%, #ccc 50%, #ccc 75%, #ddd 75%);

background-size: 60px 60px; }

#chat {

opacity: 0.5; }

#chat .bg {

position: absolute;

left: 50%;

top: 50%;

margin: -200px;

width: 400px;

height: 400px;

background-color: #555;

border-radius: 20px;

box-shadow: rgba(0, 0, 0, 0.5) 0 10px 50px; }

#chat .icon {

position: absolute;

left: 50%;

top: 50%;

background: #fff;

zoom: 6;

-webkit-animation: 1.7s infinite linear "chat_icon_animate"; }

@-webkit-keyframes chat_icon_animate {

0% {

-webkit-transform: rotateZ(0deg); }

5% {

-webkit-transform: rotateZ(-5deg); }

15% {

-webkit-transform: rotateZ(5deg); }

25% {

-webkit-transform: rotateZ(-5deg); }

35% {

-webkit-transform: rotateZ(5deg); }

45% {

-webkit-transform: rotateZ(-5deg); }

50% {

-webkit-transform: rotateZ(0deg); } }

#chat .icon > i {

position: absolute;

display: block;

left: 2px;

top: -2px;

width: 15px;

height: 15px;

border-radius: 0 0 0 15px;

background: inherit;

-webkit-transform: rotateZ(-10deg); }

#chat .icon > i::after {

position: absolute;

content: "";

left: 10px;

bottom: -1px;

width: 10px;

height: 20px;

border-radius: 0 0 0 10px;

background: #555; }

#chat .icon > o {

position: absolute;

display: block;

left: -15px;

top: -15px;

width: 30px;

height: 30px;

border-radius: 15px;

background: inherit; }