效果展示
页面结构组成
从上述的效果展示页面结构来看，页面布局都是比较简单的，只是元素的动画交互比较麻烦。
第一个动画交互是两个圆相互交错来回运动。第二个动画交互是三角绕着圆进行 360 度旋转。
CSS 知识点
- animation
- animation-delay
- 绝对定位布局
实现整体页面布局及动画交互元素的样式
<div class="container">
<div class="loader one">
<span></span>
<span></span>
</div>
<div class="loader two">
<span></span>
<span></span>
</div>
</div>
.container .loader {
position: relative;
width: 150px;
height: 150px;
margin: 100px;
}
实现第一个动画交互的元素样式
.container .loader.one span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: #5989ff;
border-radius: 50%;
animation: animate ease-in-out 2s infinite;
}
.container .loader.one span:nth-child(2) {
background: rgba(56, 109, 241, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
animation-delay: -1s;
}
/* 底部阴影 */
.container .loader.one span::before {
content: "";
position: absolute;
bottom: -100px;
left: -20%;
width: 140%;
height: 40px;
border-radius: 50%;
background: radial-gradient(rgba(0, 0, 0, 0.4), transparent, transparent);
}
实现第一个动画交互的动画
第一个动画是两个圆来回交互运动。
@keyframes animate {
0%,
100% {
transform: translateX(-80px);
}
50% {
transform: translateX(80px);
}
}
实现第二个动画交互的元素样式
第二个动画交互时，存在元素之间的层次关系，所以我们需要采用绝对定位布局。
.container .loader.two {
position: relative;
width: 180px;
height: 180px;
}
.container .loader.two span:nth-child(1) {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: rgba(233, 30, 90, 0.05);
border-radius: 50%;
backdrop-filter: blur(10px);
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.container .loader.two span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
border-radius: 50%;
animation: rotateCircle 1s linear infinite;
}
/* 通过移动伪元素形成红色三角部分元素 */
.container .loader.two span:nth-child(2)::before {
content: "";
display: block;
position: absolute;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
background: #ff6198;
}
实现第二个动画交互的动画
第一个动画是两个圆来回交互运动。文章来源：https://www.toymoban.com/news/detail-728097.html
@keyframes rotateCircle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
完整代码下载
完整代码下载文章来源地址https://www.toymoban.com/news/detail-728097.html
到了这里，关于毛玻璃动画交互效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
