纯css实现波纹效果
Posted 水星记_
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯css实现波纹效果相关的知识,希望对你有一定的参考价值。
前言
现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,通过 css3 实现波纹效果,下面一起看看吧。
实现效果
完整源码
<template>
<div class="parentBox">
<div class="contantBox">点击进入直播间</div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
@keyframes shineLight
0%
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); /* 添加开始阴影并设置透明度 */
100%
box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); /* 添加结束阴影并设置透明度 */
.contantBox
width: 140px;
text-align: center;
padding: 6px 0px;
color: white;
border: 1px solid;
border-radius: 20px;
animation: shineLight 1.8s infinite;
</style>
向外扩散式波纹
实现效果
完整源码
<template>
<div class="parentBox">
<div class="containerBox">
<div class="dotBox"></div>
<div class="pulseBox"></div>
<div class="pulseTwoBox"></div>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
@keyframes warn
0%
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0;
25%
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
50%
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
75%
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
100%
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0;
@keyframes warn1
0%
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0;
25%
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
50%
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
75%
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
100%
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0;
.containerBox
position: relative;
width: 40px;
height: 40px;
/* 保持大小不变的小圆圈 */
.dotBox
position: absolute;
width: 92px;
height: 92px;
left: 120px;
top: 120px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 2px solid #fff;
border-radius: 50%;
z-index: 2;
/* 产生动画(向外扩散变大)的圆圈 */
.pulseBox
position: absolute;
width: 320px;
height: 320px;
left: 6px;
top: 6px;
border: 6px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #fff;
.pulseTwoBox
position: absolute;
width: 320px;
height: 320px;
left: 6px;
top: 6px;
border: 6px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #fff;
</style>
以上是关于纯css实现波纹效果的主要内容,如果未能解决你的问题,请参考以下文章
前端纯html+css+javascript实现楼层跳跃式的页面布局