CSS3实现猫和狗的聊天_css 聊天动画-CSDN博客

本文链接：https://blog.csdn.net/qq_37875876/article/details/80244272

1.效果展示：

2.相关知识点：

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称

animation-duration：规定完成动画所花费的时间，以秒或毫秒计

animation-timing-function：规定动画的速度曲线

animation-delay：规定在动画开始之前的延迟。

animation-iteration-count：规定动画应该播放的次数

animation-direction：规定是否应该轮流反向播放动画

语法：animation: name duration timing-function delay iteration-count direction;

@keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

3.html代码：

<body>
		<div class="left">
			<div class="cat">
				<div class="cat_ears"></div>
				<div class="cat_head">
					<div class="cat_eyes"></div>
					<div class="cat_nose"></div>
				</div>
				<div class="cat_body">
					<div class="cat_leftpaw"></div>
					<div class="cat_rightpaw"></div>
				</div>
				<div class="cat_tail"></div>
				<div class="cat_computer">
					<div class="cat_computer_screen"></div>
					<div class="cat_computer_board"></div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="dog">
				<div class="dog_ears"></div>
				<div class="dog_head">
					<div class="dog_eyes"></div>
					<div class="dog_nose"></div>
				</div>
				<div class="dog_body">
					<div class="dog_leftpaw"></div>
					<div class="dog_rightpaw"></div>
				</div>
				<div class="dog_tail"></div>
				<div class="dog_computer">
					<div class="dog_computer_screen"></div>
					<div class="dog_computer_board"></div>
				</div>
			</div>			
		</div>
	</body>

4.css代码：

<style type="text/css">

@keyframes catLeftType {/*cat_leftpaw*/
  2% {
    transform: translateY(-8px);
  }
  6% {
    transform: none;
  }
  8% {
    transform: translateY(-8px);
  }
  10% {
    transform: none;
  }
  14% {
    transform: translateY(-8px);
  }
  16% {
    transform: none;
  }
  18% {
    transform: translateY(-8px);
  }
  20% {
    transform: none;
  }
  22% {
    transform: translateY(-8px);
  }
  26% {
    transform: none;
  }
}
@keyframes catRightType {/*cat_rightpaw*/
  6% {
    transform: translateY(-8px);
  }
  8% {
    transform: none;
  }
  10% {
    transform: translateY(-8px);
  }
  12% {
    transform: none;
  }
  16% {
    transform: translateY(-8px);
  }
  18% {
    transform: none;
  }
  20% {
    transform: translateY(-8px);
  }
  22% {
    transform: none;
  }
  24% {
    transform: translateY(-8px);
  }
  28% {
    transform: none;
  }
}
@keyframes catRead {/*cat_eyes*/
  55% {
    transform: none;
  }
  62% {
    transform: translateX(-2px);
  }
  70% {
    transition-timing-function: ease-out;
    transform: translateX(3px);
  }
  82% {
    transform: translateX(-2px);
  }
  90% {
    transition-timing-function: ease-out;
    transform: translateX(3px);
  }
  100% {
    transform: none;
  }
}
@keyframes dogLeftType {/*dog_leftpaw*/
  50% {
    transform: none;
  }
  52% {
    transform: translateY(-8px);
  }
  56% {
    transform: none;
  }
  58% {
    transform: translateY(-8px);
  }
  60% {
    transform: none;
  }
  64% {
    transform: translateY(-8px);
  }
  66% {
    transform: none;
  }
  68% {
    transform: translateY(-8px);
  }
  70% {
    transform: none;
  }
  72% {
    transform: translateY(-8px);
  }
  76% {
    transform: none;
  }
}
@keyframes dogRightType {/*dog_rightpaw*/
  54% {
    transform: none;
  }
  56% {
    transform: translateY(-8px);
  }
  58% {
    transform: none;
  }
  60% {
    transform: translateY(-8px);
  }
  62% {
    transform: none;
  }
  66% {
    transform: translateY(-8px);
  }
  68% {
    transform: none;
  }
  70% {
    transform: translateY(-8px);
  }
  72% {
    transform: none;
  }
  74% {
    transform: translateY(-8px);
  }
  78% {
    transform: none;
  }
}
@keyframes dogRead {/*dog_eyes*/
  5% {
    transform: none;
  }
  17% {
    transition-timing-function: ease-out;
    transform: translateX(-5px);
  }
  25% {
    transform: none;
  }
  37% {
    transition-timing-function: ease-out;
    transform: translateX(-5px);
  }
  45% {
    transform: none;
  }
}

	
body{
	margin: 0;
	padding: 0;
}	
.left,.right{
	position:absolute;
	height: 100%;width: 50%;	
}
.left{background: #FFCA95;}
.right{
	background: #20314E;
	left: 50%;
}

.cat,.dog{
	width: 200px;height: 182px;
	top: 50%;
	position: absolute;
	transform: translate(0,-50%);
	/* transform功能：使元素变形的属性，配合rotate（旋转角度）、scale（缩放倍数）、skew(扭曲元素）等参数一起使用
	 translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体*/
}

.cat{right: 145px;}
.dog{left: 145px;}

.cat .cat_ears,.dog .dog_ears{
	height: 0; width: 0;
	position: relative;
}	
.cat .cat_ears{
	left: 90px;
	border-bottom: 27px solid #475881;
	border-left: 10px solid transparent;
	border-right: 23px solid transparent;
}
.dog .dog_ears{
	left: 30px;
	border-bottom: 27px solid #F07E42;
	border-left: 23px solid transparent;
	border-right: 10px solid transparent;	
}
/*:before 选择器在被选元素的内容前面插入内容,使用 content 属性来指定要插入的内容*/
.cat .cat_ears:before,.dog .dog_ears:before{
	width: 0; height: 0;
	content: "";
	display: block;
	position: relative;
}
.cat .cat_ears:before{
  left: 24px;
  border-bottom: 27px solid #475881;
  border-left: 10px solid transparent;
  border-right: 23px solid transparent;	
}
.dog .dog_ears:before{
  left: 28px;
  border-bottom: 27px solid #F07E42;
  border-left: 10px solid transparent;
  border-right: 23px solid transparent;	
}
.cat .cat_head,.dog .dog_head{
	height: 74px; width: 135px;
	position: relative;
	z-index: 2;
	border-radius: 37px;
}
.cat .cat_head{
	left: 65px;
	box-shadow: -8px 0 0 #475881;
	background: #7C85AB;
}
.dog .dog_head{
  box-shadow: 8px 0 0 #F07E42;
  border-radius: 35px;
  background: #FFA852;	
}

.cat_eyes,.dog_eyes{
	width: 12px; height: 12px;
	position: relative;
	top: 37px; 
	left: 50px;
	border-radius: 100%;
   /*animation 属性是一个简写属性，用于设置六个动画属性*/
   background: black;
}
.cat_eyes{animation: 9s catRead infinite;}
.dog_eyes{animation: 9s dogRead infinite;}
.cat_eyes:before,.dog_eyes:before{
  display: block;
  content: "";
  height: 12px;
  width: 12px;
  position: relative;
  left: 18px;
  border-radius: 100%;
  background: black;	
}
.cat .cat_head .cat_nose,.dog .dog_head .dog_nose{
	top: 40px;	
	position: relative;
	border-radius: 20px;
	background: #FBF1D8;
}
.cat_nose{
	height: 22px;width: 22px;
	left: 43px;
}
.dog_nose{
	height: 30px; width: 45px;
	left: 37px;
}
.cat_nose:before,.cat_nose:after,.dog_nose:before{
	display: block;
	content: "";
	position: relative;
}
.dog_nose:before{
	height: 0; width: 0;
	top: 3px;left: 9px;
	border-radius: 10px;
	border-top: 10px solid black;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.cat_nose:before{
	height: 22px; width: 22px;
	left: 22px;
	border-radius: 20px;
	background: #FBF1D8;
}
.cat_nose:after{
	width: 0;height: 0;
	top: -22px;left: 12px;
	border-radius: 10px;
	border-top: 10px solid #FFA5C0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;	
}

.cat_body,.dog_body{
	width: 200px;height: 110px;
	position: relative;
	top: -30px;
	z-index: 1;
	border-radius: 55px;
}
.cat_body{background: #7C85AB;}
.dog_body{background: #FFA852;}
.cat_rightpaw,.cat_leftpaw,.dog_rightpaw,.dog_leftpaw{
	height: 25px;width: 37px;
	position: relative;
	border-radius: 12px;
	background: #FBF1D8;
}


.cat_leftpaw{
  top: 70px;
  left: 95px;
  animation: 9s catLeftType infinite;  	
}
.cat_rightpaw{
  top: 45px;
  left: 142px;
  animation: 9s catRightType infinite;  	
}
.dog_leftpaw{
  top: 70px;
  left: 15px;
  animation: 9s dogLeftType infinite;  	
}
.dog_rightpaw{
  top: 45px;
  left: 60px;
  animation: 9s dogRightType infinite;  	
}
.dog_tail,.cat_tail{
	position: relative;
	z-index: 0;
}
.dog_tail{
	height: 34px;width: 70px;
	top: -64px;left: 150px;
	border-radius: 0 17px 17px 0;
	background: #F07E42;
}
.cat_tail{
  height: 24px;width: 80px;
  top: -54px;left: -31px;
  border-radius: 17px 0 0 17px;
  background: #475881;  	
}
.cat_computer,.dog_computer{
	position: relative;
	z-index: 2;
}
.cat_computer{ top: -151px; left: 170px;}

.dog_computer{top: -161px;left: -103px;}

.cat_computer_screen,.dog_computer_screen{
	width: 130px;height: 85px;
	border-radius: 8px;
	
}
.cat_computer_screen{
  transform: skew(-18deg);/*skew(扭曲元素）*/
  background: #20314E;	
}
.dog_computer_screen{
  transform: skew(18deg);
  background: #FFCA95;	
}
.cat_computer_screen:before,.dog_computer_screen:before,.cat_computer_screen:after,.dog_computer_screen:after{
	display: block;
	content: "";
	height: 17px;width: 10px;
	position: relative;
	border-radius: 6px;
}
.cat_computer_screen:before{top: 38px;left: 56px; background: #475881;}
.dog_computer_screen:before{top: 38px;left: 50px;background: #F07E42;}

.cat_computer_screen:after{top: 21px; left: 70px; background: #475881;}
.dog_computer_screen:after{top: 21px; left: 64px;  background: #F07E42}

.cat_computer_board,.dog_computer_board{
	height: 12px;width: 132px;
	position:relative;
}
.cat_computer_board{
	left: -14px;
	border-radius: 0 6px 6px 0;
	background: #475881;
}
.dog_computer_board{
	left: 14px;
	border-radius: 6px 0 0 6px;
	background: #F07E42;
}
.cat_computer_board:before,.dog_computer_board:before{
	display: block;
	content: "";
	height: 12px;width: 72px;
	position: relative;
	border-radius: 6px;
}
.cat_computer_board:before{
	left: -68px;
	background: #20314E;
}
.dog_computer_board:before{
	left: 128px;
	background: #FFCA95;	
}
</style>