css 实现球里装水

2024-10-10 12:29:38

<template>

<div class="container">

<div class="wave"></div>

</div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

.container {

position: absolute;

width: 200px;

height: 200px;

padding: 5px;

border: 5px solid rgb(118, 218, 255);

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 50%;

overflow: hidden;

}

.wave {

position: relative;

width: 200px;

height: 200px;

background-color: rgb(118, 218, 255);

border-radius: 50%;

&::before,

&::after{

content: "";

position: absolute;

width: 400px;

height: 400px;

top: 0;

left: 50%;

background-color: rgba(255, 255, 255, .4);

border-radius: 45%;

transform: translate(-50%, -70%) rotate(0);

animation: rotate 6s linear infinite;

z-index: 10;

}

&::after {

border-radius: 47%;

background-color: rgba(255, 255, 255, .9);

transform: translate(-50%, -70%) rotate(0);

animation: rotate 10s linear -5s infinite;

z-index: 20;

}

}

@keyframes rotate {

50% {

transform: translate(-50%, -73%) rotate(180deg);

} 100% {

transform: translate(-50%, -70%) rotate(360deg);

}

}

</style>

转自： https://csscoco.com/inspiration/#/./border/border-wave-percent.md

最新文章

热门文章