html - 如何仅使用 CSS 创建三角形动画
问题描述
我想构建这样的动画,但只使用 css:
我建立了一个三角形,但我无法建立一个移动三角形的背景。请参阅图片中的示例。
我的代码:
HTML:
<div class="container">
<div class="triangle up">
</div>
<div class="triangle down-right">
</div>
<div class=" down-right1">
</div>
<div class="triangle down-left">
</div>
</div>
CSS:
.container {
position: relative;
left: 45%;
width: 300px;
height: 250px;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(165,60,255);
background: linear-gradient(90deg, rgba(165,60,255,1) 0%, rgba(98,0,255,1) 100%);
z-index: 999999;
}
.up {
top: 0;
left: auto;
}
.down-right {
top: 100px;
left: 16.5%;
}
.down-right1 {
top: 105px;
left: 24%;
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #c85e5e;
}
.down-left {
top: 100px;
left: -16.5%;
}
我希望这个动画在页面加载时开始。
解决方案
使用倾斜变换和箱形阴影的想法。
.box {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 75px;
height: 64.5px;
transition: 0.5s all 0.5s;
transform-origin: 50% 63%;
}
.box::before,
.box::after,
.box i:before,
.box i:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
transform-origin: bottom;
transition: 0.5s all;
}
.box::before {
background: #5840bc;
box-shadow: 0px -20px #886df8, 0px -40px #c2b3f8;
transform: skewX(-30deg);
border-bottom-right-radius: 0;
}
.box::after {
background: #5844d9;
box-shadow: -20px 0 #7d69ca, -40px 0 #c7bee9;
transform: skewX(30deg);
border-top-right-radius: 0;
}
.box i:before {
background: #714ffe;
box-shadow: 0px -20px #7c6ade, 0px -40px #c7bee9;
transform: translateY(50%) rotate(120deg) skewX(-30deg);
transform-origin: center;
border-bottom-right-radius: 0;
}
.box i:after {
background: #fff;
z-index: 1;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
border-radius: 0;
}
html:hover .box {
transform: rotate(60deg);
}
html:hover .box::before,
html:hover .box::after,
html:hover .box i:before,
html:hover .box i:after {
box-shadow: 0px 0 transparent, 0px 0 transparent;
}
<div class="box"><i></i></div>
推荐阅读
- excel - 如何改变 NPV 公式中使用的范围?
- python - 尝试使用 python 脚本裁剪 tiff 图像
- python - 如何使用 textract 库解析用户上传的 pdf/doc 文件(通过 Flask 框架)而不在本地保存文件?
- jmeter - keytool 错误:java.lang.RuntimeException:java.io.IOException:DNSName 组件必须以字母 << 命令失败,代码:1
- c# - 如何在 C# 中实现多线程
- android - android 中 ConnectivityManager 的网络状态查找问题
- airflow - 气流错误 - 日志文件不是本地的
- swift - 减少使用 AVAssetExportSession 导出的视频的大小 - iOS Swift
- selenium-webdriver - 如何单击设备返回按钮
- r - 如何修复矩阵中数字的颜色