<template>
<div class="flex">
<div>
<div>扩散原理</div>
<div class="diffusion">
<div class="diffusion-child"></div>
</div>
</div>
<div>
<div>多重扩散</div>
<div class="diffusion">
<div class="diffusion-child inset "></div>
<div class="diffusion-child inset delay-1s"></div>
<div class="diffusion-child inset delay-2s"></div>
</div>
</div>
<div>
<div>换个角度</div>
<div class="diffusion">
<div class="layout">
<div class="diffusion-child inset "></div>
<div class="diffusion-child inset delay-1s"></div>
<div class="diffusion-child inset delay-2s"></div>
</div>
</div>
</div>
<div>
<div>透视效果</div>
<div class="diffusion d3d">
<div class="layout">
<div class="diffusion-child inset "></div>
<div class="diffusion-child inset delay-1s"></div>
<div class="diffusion-child inset delay-2s"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.diffusion {
width: 100px;
height: 100px;
position: relative;
&-child {
width: 100%;
height: 100%;
/* 用 transform: scale 不改变元素位置的特性,来固定动画所在位置,也就不用去更改元素宽高来形成扩散效果*/
transform: scale(0);
border-radius: 50%;
background-color: rgba(127, 255, 212, 0.5);
animation: diffusion linear infinite 3s;
position: absolute;
top: 0;
left: 0;
&.inset {
background-color: transparent;
box-shadow: inset 0px 0px 20px rgba(127, 255, 212, 0.5);
}
&.delay-1s {
/* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 */
animation-delay: 1s;
}
&.delay-2s {
/* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 */
animation-delay: 2s;
}
}
.layout {
/*
// 由于 perspective 只能对其子集的3D变换属性起效果,对于 其自身的 3D变换 不起效果,
// 所以需要额外嵌套一层进行 3D 变换
*/
width: 100%;
height: 100%;
transform: rotateX(70deg);
}
&.d3d {
/* 开启3D透视, 视距 里目标点 150 像素(距离越小,透视效果越明显, 距离越大,越接近俯视) */
perspective: 150px;
}
}
.flex {
display: flex;
text-align: center;
justify-content: space-between;
}
@keyframes diffusion {
/* 扩散其实就是从透明,中心点缩放为0,到不透明,缩放为100% 的过程 */
0% {
opacity: 0;
transform: scale(0);
}
/*
// 中间插入两个关键帧,用于更改动画的视觉效果,
// 原理跟动画曲线类似,但是由于关键帧可以单独控制每个属性的过程,
// 相对比较简单一些。
*/
30% {
opacity: 1;
transform: scale(0.3);
}
90% {
opacity: 1;
transform: scale(0.9);
}
100% {
opacity: 0;
transform: scale(1);
}
}
</style>
css实现波浪纹
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11614.html
相关文章
-
vue3使用less中:deep不生效
-
html网页制作——html css javascript jquery bootstarp马尔代夫旅游响应式网站
-
利用jQuery设计和实现一个简单的留言板网页
-
深入探索jQuery:强大的JavaScript库
-
使用jQuery写一个注册界面
-
vue3 vite 前端项目主题切换(ECharts、Element Plus、图片、icon图标)解决方案
-
HTML CSS JQuey模仿微信聊天app,能实现与所有人一起聊天
-
情人节程序员用HTML网页表白【表白对话】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript
-
HTML.CSS静态 画江湖之不良人 网页(开源)
-
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML CSS JavaScriptHTML5七夕情人节表白网页制作
发布的文章
json.loads处理文本报错 json.decoder.JSONDecodeError:expecting value: line1 column 2
2024-06-17 09:06:23
Python API:它是什么以及如何使用它
2024-06-17 09:06:23
【python】 pandas.DataFrame.to_json 函数
2024-06-17 09:06:56
在angular12中proxy.conf.json中配置详解
2024-06-17 09:06:52
Win7系统提示找不到umpnpmgr.dll文件的解决办法
2024-06-17 09:06:16
使用nvm的时候,发现node可以用的,但是npm却显示没有命令
2024-06-17 09:06:15
如何把npm切换成yarn管理项目
2024-06-17 09:06:12
APP自动化测试(9)-代码启动appium server
2024-06-17 09:06:53
使用nvm切换node版本后出现“无法将‘npm’项识别为 cmdlet、函数、脚本文件...”解决办法
2024-06-17 09:06:14
大家推荐的文章