css织衣服毛线动画
代码语言:html
所属分类:动画
代码描述:css织衣服毛线动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container #left-needle {
position: absolute;
top: 100px;
left: 80px;
transform-origin: center right;
transform: rotate(-13deg);
z-index: 1;
animation: knitLeft 4s infinite ease-in-out;
}
.container #right-needle {
position: absolute;
top: 120px;
left: 35px;
transform-origin: center right;
transform: rotate(-110deg) scaleY(-1);
z-index: 0;
animation: knitRight 4s infinite ease-in-out;
}
.container .needle {
position: relative;
display: flex;
align-items: center;
transform: rotate(0deg);
}
.container .needle .stopper, .container .needle .handle {
background-color: #9e9e9e;
}
.container .needle .stopper {
position: relative;
width: 9px;
height: 52.5px;
border-radius: 4px;
}
.container .needle .stopper .stopper-highlight {
position: absolute;
width: 2.25px;
height: 18px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
top: 4%;
right: 15%;
}
.container .needle .stopper .stopper-shadow {
position: absolute;
width: 6px;
height: 1.5px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
bottom: 3%;
left: 20%;
}
.container .needle .handle {
position: relative;
width: 600px;
height: 30px;
}
.container .needle .handle .handle-highlight {
width: 420px;
height: 2px;
position: absolute;
top: 2px;
right: 5%;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
}
.container .needle .handle .handle-shadow {
width: 480px;
height: 2px;
position: absolute;
bottom: 1px;
left: 25px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
}
.container .needle .handle .stitch {
position: absolute;
width: 12px;
height: 50px;
background-color: #e91e63;
border: 1px solid #ad1457;
top: -6px;
border-radius: 8px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.35);
}
.container .needle .handle #swatch {
position: absolute;
z-index: 10;
top: 30px;
right: 0;
}
.container .needle .handle #swatch .row {
position: absolute;
right: 0;
display: flex;
width: fit-content;
height: 25.5px;
}
.container .needle .handle #swatch .row .v {
display: flex;
}
.container .needle .handle #swatch .row .v .left-bar, .container .needle .handle #swatch .row .v .right-bar {
background-color: #e91e63;
border: 1px solid #ad1457;
height: 100%;
width: 15px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(86, 0, 39, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(86, 0, 39, 0.9);
box-shadow: 0px 1px 2px 0px rgba(86, 0, 39, 0.9);
}
.container .needle .handle #swatch .row .v .left-bar {
position: relative;
border-top-left-radius: 40px;
border-top-right-radius: 200px 250px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 200px 300px;
}
.container .needle .handle #swatch .row .v .left-bar .left-texture-1 {
height: 40%;
width: 105%;
position: absolute;
top: 25%;
left: -3%;
background-color: #e91e63;
transform: skew(15deg) rotate(25deg);
border: 1px solid rgba(173, 20, 87, 0.4);
border-top-left-radius: 100px;
b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0