css实现烤面包动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现烤面包动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #5B507A;
}
.outer-ring {
position: absolute;
top: 50%;
left: 50%;
width: 450px;
height: 450px;
margin-top: -200px;
margin-left: -200px;
border-radius: 50%;
border: 0.2em solid #adadad;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
background: #c2c2c2;
}
.circle {
position: absolute;
top: 45.8%;
left: 45.8%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 50%;
border: 1.2em solid #f5f5f5;
box-shadow: inset 0 0 12px #191919;
overflow: hidden;
background: #B1BDD3;
}
.center-items {
position: absolute;
top: 55%;
left: 49.5%;
transform: translate(-50%, -50%);
}
.down {
position: relative;
animation: down 1.5s ease-in infinite both;
}
.down .up {
animation: up 1.5s ease-in-out infinite both;
}
.down .up .gravity {
transform-origin: 50% 100%;
animation: gravity 1.5s cubic-bezier(0.72, 0.03, 0.28, 0.97) infinite both;
}
.down .up .gravity .spin-one {
animation: spin-one 1.5s ease-out infinite both;
}
.down .up .gravity .spin-one .spin-two {
animat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0