css波纹动画和从中间向两边运动动画

原创 于 2018-07-10 17:38:40 发布 · 4.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

这篇博客介绍了如何使用CSS创建动态波纹效果以及让元素从中间向两边平滑运动的技巧，包括HTML结构和CSS样式实现的详细步骤，并展示了最终的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.波纹

(1)html

<div class="kefu" style="display: block;">
    <div class="round"></div>
	<div class="img">
		<div class='img_fff'></div>
	</div>	       
</div>

(2)css

*{
	margin: 0;
	padding: 0;
}
.kefu {
    width: 120px;
    height: 120px;
    position: fixed;
    z-index: 50;
    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;
    cursor: pointer;
}
.kefu .img {
	width:86px;
	height:86px;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-left: -43px;
    margin-top: -43px;
	background-color:#baedcd;
	border-radius:100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
}
.kefu .img_fff{
	width:66px;
	height:66px;
	position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-left: -33px;
    margin-top: -33px;
	background-color:#fff;
	border-radius:100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
}
.round {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #baedcd;
    text-align: center;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-name: mymove;
    animation-name: mymove;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes mymove{
	0% {
	    -webkit-transform: scale(.5);
	    transform: scale(.5);
	    opacity: 0;
	}
	
	50% {
	    opacity: 1;
	}
	
	75% {
	    opacity: .85;
	}
	
	100% {
	    -webkit-transform: scale(1.1);
	    transform: scale(1.1);
	    opacity: 0;
	}
}

(3)效果（动态波纹）


2.中间往两边运动

(1)html

<div class="slideInLeft" style="width: 60px;height: 60px;border-radius: 100%;background-color: orange;margin: 0 auto; "></div>
<div class="big">
	<div class="index_lp_t_line abs"></div>
	<div class="big_c a slideInLeft_500"></div>
	<div class="big_c b slideInRight_500"></div>
	<div class="big_c d slideInLeft_200"></div>
	<div class="big_c e slideInRight_200"></div>
	<div class="big_c c "></div>
</div>

(2)css

*{
	margin: 0;
	padding: 0;
}			
.big{
	width: 1000px;height: 90px;background-color: rgba(0,0,0,0.5);margin-top: 200px;
	position: relative;
	margin: 0 auto;
}
.big_c{
	width: 90px;height: 90px;border-radius: 100%;
	margin-left: -45px;
	left: 50%;
	top: 50%;
	margin-top: -45px;
	position: absolute;
}
.a{
	background-color: red;
}
.b{
	background-color: green;
}
.c{
	background-color: blue;
}
.d{
	background-color: purple;
}
.e{
	background-color: olive;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInLeft_500 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(457px, 0, 0);
    transform: translate3d(457px, 0, 0);
  }
}

@keyframes slideInLeft_500 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(457px, 0, 0);
    transform: translate3d(457px, 0, 0);
  }
}
.slideInLeft_500 {
  -webkit-animation-name: slideInLeft_500;
  animation-name: slideInLeft_500;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes slideInLeft_200 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(225px, 0, 0);
    transform: translate3d(225px, 0, 0);
  }
}

@keyframes slideInLeft_200 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(225px, 0, 0);
    transform: translate3d(225px, 0, 0);
  }
}
.slideInLeft_200 {
  -webkit-animation-name: slideInLeft_200;
  animation-name: slideInLeft_200;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



@-webkit-keyframes slideInRight_500 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-457px, 0, 0);
    transform: translate3d(-457px, 0, 0);
  }
}

@keyframes slideInRight_500 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-457px, 0, 0);
    transform: translate3d(-457px, 0, 0);
  }
}


.slideInRight_500 {
  -webkit-animation-name: slideInRight_500;
  animation-name: slideInRight_500;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInRight_200 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-225px, 0, 0);
    transform: translate3d(-225px, 0, 0);
  }
}

@keyframes slideInRight_200 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-225px, 0, 0);
    transform: translate3d(-225px, 0, 0);
  }
}


.slideInRight_200 {
  -webkit-animation-name: slideInRight_200;
  animation-name: slideInRight_200;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.index_lp_t_line {
    width: 915px;
    border-bottom: 1px dotted #fff;
    top: 44px;
    left: 50%;
    margin-left: -457.5px;
    position: absolute;
    z-index: 55;
}

(3)效果



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值