模拟聊天动画

下载代码

html

css

分享到微信朋友圈

html

css

html,
body {
  background-color: #141414;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#chat-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#chat-input {
  position: fixed;
  bottom: 10px;
  height: 40px;
  width: 500px;
  background-color: #242424;
  border-radius: 6px;
  overflow: hidden;
}
#chat-input:before, #chat-input:after {
  content: '';
  display: block;
  position: absolute;
  top: 12px;
  bottom: 12px;
  background-color: rgba(56, 56, 56, 0.4);
}
#chat-input:before {
  cursor: text;
  left: 52px;
  width: 40%;
  border-radius: 2px;
}
#chat-input:after {
  cursor: pointer;
  right: 10px;
  width: 16px;
  border-radius: 8px;
}
#chat-input #file-input {
  cursor: pointer;
  display: block;
  border-right: 2px solid #292929;
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 36px;
  -webkit-transition: background-color 60ms;
  transition: background-color 60ms;
}
#chat-input #file-input:hover {
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  background-color: #474747;
  border-right: 0;
  -webkit-transition: background-color 120ms;
  transition: background-color 120ms;
}
#chat-input #file-input:before, #chat-input #file-input:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #383838;
}
#chat-input #file-input:before {
  top: 30%;
  bottom: 30%;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}
#chat-input #file-input:after {
  left: 30%;
  right: 30%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}

.chat {
  position: fixed;
  bottom: 60px;
  width: 500px;
  display: inline-block;
}

.line-container {
  overflow: hidden;
  border-radius: 6px;
  max-height: 0px;
  opacity: 0;
  -webkit-transform: translateX(-300px) scale(0.2);
          transform: translateX(-300px) scale(0.2);
  -webkit-transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, -webkit-transform 250ms;
  transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, -webkit-transform 250ms;
  transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, transform 250ms;
  transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, transform 250ms, -webkit-transform 250ms;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.line-container:not(:last-child) {
  margin-bottom: 10px;
}

.line {
  padding: 10px;
  background-color: #242424;
}
.line > div {
  display: inline-block;
  vertical-align: top;
}

.profile-img {
  cursor: pointer;
  border-radius: 6px;
  width: 60px;
  height: 60px;
  background-color: #383838;
  margin-right: 10px;
}

.body .name,
.body .text {
  border-radius: 2px;
  background-color: #474747;
  height: 16px;
}

.name {
  width: 100px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}
.name:after {
  content: '';
  display: block;
  border-radius: 2px;
  background-color: rgba(56, 56, 56, 0.4);
  height: 16px;
  width: 50px;
  position: absolute;
  right: -60px;
  -webkit-transition: 100ms;
  transition: 100ms;
}

.profile-img:hover + .body .name:after,
.name:hover:after {
  background-color: #383838;
  width: 100px;
  right: -110px;
}

.text:not(:last-child) {
  margin-bottom: 10px;
}

.rich-body {
  margin-left: 14px;
  margin-top: 36px;
  position: relative;
}
.rich-body:before {
  content: '';
  display: block;
  position: absolute;
  top: -26px;
  left: -14px;
  bottom: 0;
  width: 4px;
  background-color: inherit;
}
.rich-body:after {
  content: '';
  display: block;
  position: absolute;
  height: 16px;
  width: 200px;
  top: -26px;
  background-color: inherit;
  border-radius: 2px;
}

.img,
.rich-body {
  width: 300px;
  height: 300px;
  cursor: pointer;
  border-radius: 6px;
  background-color: #333333;
}

.profile-img,
.name,
.text,
.img,
.rich-body {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: 200ms;
  transition: 200ms;
}

JavaScript

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var amountOfColors = 18; // Or "participants"

var container = document.getElementById('chat-container');
var lineWidth = 500;
var profileImgWidth = 60;
var textWidth = lineWidth - 20 - profileImgWidth - 10;
var chats = [];
var maxTexts = 4;

function _createElement() {
	var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

var ele = document.createElement('div');
	if ('class' in opts) {
		var _ele$classList;

if (!Array.isArray(opts.class)) {
			opts.class = [opts.class];
		}
		(_ele$classList = ele.classList).add.apply(_ele$classList, _toConsumableArray(opts.class));
	}
	return ele;
}

function addChat() {
	var chat = new Chat();
	chats.push(chat);
	setTimeout(function () {
		return chat.loop();
	}, 200);
	return chat;
}

var Chat = function () {
	function Chat() {
		_classCallCheck(this, Chat);

this.ele = _createElement({ class: 'chat' });
		this.lines = [];
		this.anim = null;
		container.appendChild(this.ele);
	}

_createClass(Chat, [{
		key: 'addLine',
		value: function addLine() {
			var l = new Line();
			this.lines.push(l);
			this.ele.appendChild(l.ele.lineContainer);
			return l;
		}
	}, {
		key: 'removeOldest',
		value: function removeOldest() {
			var _this = this;

if (this.anim) {
				this.stopLoop();
			}
			this.addLine();
			this.removeOldest();
			this.anim = setTimeout(function () {
				return _this2.loop();
			}, Math.random() * 1300 + 180);
		}
	}, {
		key: 'stopLoop',
		value: function stopLoop() {
			clearTimeout(this.anim);
			this.anim = null;
		}
	}]);

return Chat;
}();

var Line = function () {
	function Line() {
		_classCallCheck(this, Line);

this.pickColor();
		this.pickName();
		this.pickText();
		this.pickHasImg();
		this.pickHasRichBody();
		this.setupElements();
		this.animateIn();
	}

_createClass(Line, [{
		key: 'pickColor',
		value: function pickColor() {
			this.hue = Math.floor(Math.random() * amountOfColors) * (360 / amountOfColors);
			this.color = 'hsl(' + this.hue + ', 90%, 50%)';
			this.profileImgColor = 'hsl(' + this.hue + ', 40%, 55%)';
			return this.hue;
		}
	}, {
		key: 'pickName',
		value: function pickName() {
			this.name = Math.max(0.3, Math.random());
		}
	}, {
		key: 'pickText',
		value: function pickText() {
			var lengthChoice = Math.random();
			var lengthWeight = 1;
			if (lengthChoice < 0.5) {
				lengthWeight = 0.6;
			} else if (lengthChoice < 0.9) {
				lengthWeight = 0.8;
			}
			this.length = Math.max(0.02, lengthChoice * lengthWeight);
			this.textCount = this.length * maxTexts;
		}
	}, {
		key: 'pickHasImg',
		value: function pickHasImg() {
			this.hasImg = Math.random() > 0.9;
		}
	}, {
		key: 'pickHasRichBody',
		value: function pickHasRichBody() {
			this.hasRichBody = !this.hasImage && Math.random() > 0.85;
		}
	}, {
		key: 'setupElements',
		value: function setupElements() {
			var _this3 = this;

var otherEleList = [ele.profileImg, ele.name].concat(_toConsumableArray(ele.texts));

if ('img' in ele) {
				otherEleList.push(ele.img);
			} else if ('richBody' in ele) {
				otherEleList.push(ele.richBody);
			}

delay += 40;

otherEleList.forEach(function (e, i) {
				setTimeout(function () {
					e.style.opacity = 1;
					e.style.transform = 'translateY(0px)';
				}, delay += 50);
			});

ele.texts.forEach(function (n, i, arr) {
				return setTimeout(function () {
					return n.style.opacity = 1;
				}, 70 * (i + 3) + delay);
			});
		}
	}, {
		key: 'createElement',
		value: function createElement() {
			var lineContainer = _createElement({ class: 'line-container' });
			var line = _createElement({ class: 'line' });
			var profileImg = _createElement({ class: 'profile-img' });
			var body = _createElement({ class: 'body' });
			var name = _createElement({ class: 'name' });
			var texts = [];
			var img = _createElement({ class: 'img' });
			var richBody = _createElement({ class: 'rich-body' });
			body.appendChild(name);
			for (var i = 0; i < (this.textCount || 1); i++) {
				var text = _createElement({ class: 'text' });
				texts.push(text);
				body.appendChild(text);
			}
			line.appendChild(profileImg);
			line.appendChild(body);
			lineContainer.appendChild(line);
			var out = { lineContainer: lineContainer, line: line, profileImg: profileImg, body: body, name: name, texts: texts };
			this.hasImg && (out.img = img) && body.appendChild(img);
			this.hasRichBody && (out.richBody = richBody) && body.appendChild(richBody);
			return out;
		}
	}]);

return Line;
}();

function loop() {
	chats.forEach(function (n) {
		return n.loop();
	});
}

function stopLoop() {
	chats.forEach(function (n) {
		return n.stopLoop();
	});
}

(function () {
	return addChat();
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg