1.设计师钟爱的电池图
<style>
.fd-bar-list {
width: 400px;
color: #849fc1;
font-size: 16px;
background-color: rgba(5, 27, 74,1);
}
.fd-bar-bg {
width: 100%;
border-radius: 10px;
background-color: rgba(82, 112, 199, 0.2);
}
.fd-bar-linear {
background-image: linear-gradient(to right,#5860f7, #31d6ef);
}
.fd-bar-main {
width: 100%;
height: 20px;
background-image: linear-gradient(to right, transparent 8px, #182d69 2px);
background-size: 10px 20px;
}
</style>
<div class="fd-bar-list">
<div class="fd-bar-bg">
<div class="fd-bar-linear fd-bar-bfb">
<div class="fd-bar-main"></div>
</div>
</div>
</div>
2.圆润的三角形
- 主要使用transform结合rotate, skewX,scale,translate;
<style>
.fd-triangle {
position: relative;
margin-left: 60px;
background: #f3593f;
}
.fd-triangle::before,
.fd-triangle::after {
content: "";
position: absolute;
background: inherit;
}
.fd-triangle,
.fd-triangle::before,
.fd-triangle::after {
width: 60px;
height: 60px;
border-top-right-radius: 30%;
}
.fd-triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1,0.866);
}
.fd-triangle::before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
.fd-triangle::after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}
<div class="fd-triangle"></div>
</style>
实现思路
div {
width: 60px;
height: 60px;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
border-top-right-radius: 30%;
}
3.涟漪效果
<style>
.fd-common-pc-ripple {
width: 72px;
height: 72px;
transform: rotateX(55deg);
}
.fd-common-ripple-inner {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
opacity: 0;
transform: translate(-50%, -50%);
border-radius: 100%;
background-color: #00ccf0;
}
.fd-common-ripple-inner0 {
width: 15px;
height: 15px;
background-color: #00ccf0;
opacity: 1;
}
.fd-common-ripple-inner1 {
animation: ripple linear 2000ms infinite 100ms;
}
.fd-common-ripple-inner2 {
animation: ripple linear 2000ms infinite 500ms;
}
.fd-common-ripple-inner3 {
animation: ripple linear 2000ms infinite 900ms;
}
@keyframes ripple {
0% {
width: 20px;
height: 20px;
opacity: 0;
}
10% {
width: 20px;
height: 20px;
opacity: 0.5;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
</style>
<div class="fd-wave">
<div class="fd-common-pc-ripple">
<div class="fd-common-ripple-inner fd-common-ripple-inner1"></div>
<div class="fd-common-ripple-inner fd-common-ripple-inner2"></div>
<div class="fd-common-ripple-inner fd-common-ripple-inner3"></div>
<div class="fd-common-ripple-inner fd-common-ripple-inner0"></div>
</div>
</div>
4.水波
<style>
.fd-wave-content {
position: relative;
width: 50px;
height: 100px;
background: #ffdcd6;
}
.fd-wave-progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 5px;
max-height: 100px;
overflow: hidden;
}
.fd-wave-anima {
width: 110px;
height: 100%;
background: url("./images/icon-wave1.png") repeat-x center center;
background-size: 100% 100%;
animation: wave 2s linear infinite;
-webkit-animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
background-position: 0 0;
}
to {
background-position: -110px 0;
}
}
</style>
<div class="fd-wave-content">
<div class="fd-wave-progress" style="height: 50%;">
<div class="fd-wave-anima"></div>
</div>
</div>
5.尖角
<style>
.fd-center-item-detail {
width: 116px;
height: 116px;
transform: translate(0);
box-sizing: border-box;
border: 2px dashed #ea3a64;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.fd-center-item-detail::after {
content: '';
display: block;
position: absolute;
bottom: -13px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 30px;
box-sizing: border-box;
border-top: 2px dashed transparent;
border-left: 2px dashed transparent;
border-right: 2px dashed #ea3a64;
border-bottom: 2px dashed #ea3a64;
background-color: #fff;
transform: rotateZ(45deg);
}
</style>
<div class="fd-center-item-detail">