android圆形变方形动画,CSS3 简单的圆形/方形变形动画
CSS
語言：
CSSSCSS
確定
html,
body {
width: 100%;
height: 100%;
background-color: #221e40;
}
*,
*:after,
*::before {
box-sizing: border-box;
}
.centered {
width: 100%;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
.morph {
width: 100%;
height: 100px;
position: relative;
}
.morph span {
position: absolute;
display: block;
margin-left: 0;
width: 100px;
height: 100px;
opacity: 0.7;
animation: 4s morph cubic-bezier(0.5, 1, 0.5, 0) infinite;
border: 6px solid;
mix-blend-mode: screen;
}
.morph span:nth-child(1) {
border-color: #ff2074;
background-color: rgba(255, 32, 116, 0.4);
}
.morph span:nth-child(2) {
border-color: #20ffb3;
background-color: rgba(32, 255, 179, 0.4);
animation-delay: 0.1s;
}
.morph span:nth-child(3) {
border-color: #ffd820;
background-color: rgba(255, 216, 32, 0.4);
animation-delay: 0.2s;
}
/*Animation*/
@keyframes morph {
0% {
left: 0;
border-radius: 50%;
transform: rotate(0deg);
}
50% {
left: 100%;
margin-left: -100px;
border-radius: 0%;
transform: rotate(360deg);
}
100% {
left: 0;
border-radius: 50%;
transform: rotate(0deg);
}
}
總結
以上是生活随笔為你收集整理的android圆形变方形动画,CSS3 简单的圆形/方形变形动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 脊髓是什么
- 下一篇： html坐标轴背景色,CSS 背景(cs