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; border-top-right-radius: 300px 250px; border-bottom-right-radius: 100px; border-bottom-left-radius: 200px 300px; } .container .needle .handle #swatch .row .v .left-bar .left-texture-2 { height: 30%; width: 90%; position: absolute; top: 55%; left: 10%; background-color: #e91e63; transform: skew(15deg) rotate(15deg); border: 1px solid rgba(173, 20, 87, 0.4); border-top-color: rgba(173, 20, 87, 0.6); border-top-left-radius: 100px; border-top-right-radius: 300px 250px; border-bottom-right-radius: 100px; border-bottom-left-radius: 200px 300px; } .container .needle .handle #swatch .row .v .right-bar { position: relative; border-top-left-radius: 200px 250px; border-top-right-radius: 40px; border-bottom-right-radius: 200px 300px; border-bottom-left-radius: 40px; } .container .needle .handle #swatch .row .v .right-bar .right-texture-1 { height: 40%; width: 105%; position: absolute; top: 25%; right: -3%; background-color: #e91e63; transform: skew(-15deg) rotate(-25deg) scaleX(-1); border: 1px solid rgba(173, 20, 87, 0.6); border-top-left-radius: 100px; border-top-right-radius: 300px 250px; border-bottom-right-radius: 100px; border-bottom-left-radius: 200px 300px; } .container .needle .handle #swatch .row .v .right-bar .right-texture-2 { height: 30%; width: 90%; position: absolute; top: 55%; right: 10%; background-color: #e91e63; transform: skew(-15deg) rotate(-15deg) scaleX(-1); border: 1px solid rgba(173, 20, 87, 0.4); border-top-left-radius: 100px; border-top-right-radius: 300px 250px; border-bottom-right-radius: 100px; border-bottom-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0