当前位置：首页 > 网页特效 > svg

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

分类：svg 日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
初始的拖动区域使用一个svg来制作。每一个chat__person是聊天列表中的一个用户，每一个chat__msgRow是一条聊天记录。

```html
<div class="demo">
  <svg class="sidebar" viewBox="0 0 300 500">
    <path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
  </svg>
  <div class="static">
    <div class="static__text">Pull white sidebar to the right</div>
  </div>
  ....
  <div class="search">
      <img src="img/t8TeL1S.png" alt="" class="search__img" />
      <input type="text" class="search__input" placeholder="Search" />
  </div>
  </div>
  <div class="chat">
    <span class="chat__back"></span>
    <span class="chat__status">status</span>
    <div class="chat__person">
      <span class="chat__online active"></span>
      <span class="chat__name">Huehue Huehue</span>
    </div>
    <div class="chat__messages">
      <div class="chat__msgRow">
        <div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>
      </div>
      ....
    </div>
    <input type="text" class="chat__input" placeholder="Your message" />
  </div>
</div>        
```

#####  CSS样式
在点击用户图像的时候，该特效使用了一些点击波特效，它是使用CSS3 animation动画来制作的。

```html
.ripple {
  position: absolute;
  width: 10rem;
  height: 10rem;
  margin-left: -5rem;
  margin-top: -5rem;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: animRipple 0.3s;
          animation: animRipple 0.3s;
  border-radius: 50%;
}
 
@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}
 
@keyframes animRipple {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}            
```

web299.com

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果