css布局实现一个仙人掌小人动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现一个仙人掌小人动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .back { position: relative; display: flex; justify-content: center; align-items: center; background: #B9CFE4; width: 100%; height: 100vh; } .out{ position: relative; display: flex; justify-content: center; align-content: center; width: 80vmin; height: 80vmin; border-radius: 50%; background: #B9CFE4; } .pot { position: absolute; /* by puting color here we can get the shape of pot and help of them we can make pot by lines*/ border-bottom: 19vmin solid #B9CFE4; border-left: 8vmin solid transparent; border-right: 8vmin solid transparent; height: 0; width: 30vmin; top:40vmin; transform: rotate(180deg); border-radius: 3vmin; } .downlinw { content: ""; position: absolute; width: 15vmin; height: 0.2vmin; background: #000; } .Rightline { content: ""; position: absolute; width: 17vmin; height: 0.2vmin; top: 8.5vmin; right: 7vmin; background: #000; transform: rotate(100deg) } .leftline { content: ""; position: absolute; width: 17vmin; height: 0.2vmin; top: 8.5vmin; left: 8vmin; background: #000; transform: rotate(80deg) } .upperline1 { content: ""; position: absolute; width: 25vmin; height: 0.5vmin; top: 19vmin; right: -6vmin; background: #000; } .upperline2 { content: ""; position: absolute; width: 23vmin; height: 0.2vmin; top: 17vmin; right: -5vmin; background: #000; } .upperside1 { content: ""; position: absolute; width: 3vmin; height: 0.5vmin; top: 18vmin; right: 17vmin; background: #000; transform: rotate(100deg) } .upperside2 { content: ""; position: absolute; width: 3vmin; height: 0.5vmin; top: 18vmin; left: 18vmin; background: #000; transform: rotate(80deg) } .cactus{ position: absolute; width: 20vmin; height: 30vmin; top: 17vmin; background: #79C13B; border-radius: 41%; border: 0.4vmin solid #000; } .line3{ content: ""; position: absolute; width: 5vmin; height: 30vmin; left: 10vmin; background: transparent; border-radius: 50%; border-right: 0.5vmin solid yellow; } .line2{ content: ""; position: absolute; width: 5vmin; height: 30vmin; left: 3vmin; background: transparent; border-radius: 50%; border-left: 0.5vmin solid yellow; } .line{ content: ""; position: absolute; width: 5vmin; height: 30vmin; left: 7vmin; background: transparent; border-radius: 50%; border: 0.5vmin solid yellow; } .eyes{ content: ""; position: absolute; width: 3vmin; height: 5vmin; left: 3vmin; top: 5vmin; background: #000; border-radius: 41%; box-shadow: 10vmin 0vmin #000; animation: blink 2s both infinite ease-in-out; } @keyframes blink{ from{transform: scale(1, 0.1);} to{transform: scale(1, 0.9);} } .mouth{ position: absolute; width: 6vmin; height: 10vmin; top: 6vmin; left: 6.6vmin; border-radius: 100%; background: transparent; border-bottom: 0.7vmin solid #000; } .Rightcactus{ position:absolute; width: 6vmin; height: 15vmin; top: 26vmin; right: 26vmin; background: #79C13B; border-radius: 41%; border: 0.4vmin solid #000; transform: rotate(45deg); animation: handmove1 1s both infinite alternate-reverse linear; } @keyframes handmove1{ from{transform: rotate(45deg);} to{transform: rotate(60deg); } } .rline{ content: ""; position: absolute; width: 5vmin; height: 30vmin; left: 0vmin; background: transparent; border-radius: 50%; border: 0.5vmin solid yellow; } .Leftcactus{ position: absolute; width: 6vmin; height: 15vmin; top: 26vmin; left: 26vmin; background: #79C13B; border-radius: 41%; border: 0.4vmin solid #000; transform: rotate(-50deg); animation: handmove2 1s both infinite alternate-reverse linear; } @keyframes handmove2{ from{transform: rotate(-45deg);} to{transform: rotate(-60deg); } } .lline{ content: ""; position: absolute; width: 5vmin; height: 30vmin; left: 0vmin; background: transparent; border-radius: 50%; border: 0.5vmin solid yellow; } .pricks{ position: absolute; width: 1vmin; height: 0.2vmin; left: 7.5vmin; top: -1vmin; background: #000; transform: rotate(90deg); box-shadow: 0vmin 1vmin; } .pricks::before{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: -2vmin; background: #000; box-shadow: 0vmin 1vmin; } .pricks::after{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: -4vmin; left: 0vmin; background: #000; transform: rotate(9deg); box-shadow: 0vmin 1vmin; } .pick{ position: absolute; left: -41.9vmin; top: -17vmin; } .pricks1{ position: absolute; width: 1vmin; height: 0.2vmin; top: 16.5vmin; left: 49vmin; background: #000; transform: rotate(90deg); box-shadow: 0vmin 1vmin; } .pricks1::before{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: -6vmin; left: 0.4vmin; background: #000; transform: rotate(20deg); box-shadow: 0vmin 1vmin; } .pricks1::after{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: 4vmin; left: 1.7vmin; background: #000; transform: rotate(-22deg); box-shadow: 0vmin 1vmin; } .pricks2{ position: absolute; width: 1vmin; height: 0.2vmin; top: 17vmin; left: 47vmin; background: #000; transform: rotate(80deg); box-shadow: 0vmin 1vmin; } .pricks2::before{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: 5vmin; left: 3vmin; background: #000; transform: rotate(-40deg); box-shadow: 0vmin 1vmin; } .pricks2::after{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: 4vmin; left: 1.7vmin; background: #000; transform: rotate(-45deg); box-shadow: 0vmin 1vmin; } .pricks3{ position: absolute; width: 1vmin; height: 0.2vmin; top: 23vmin; left: 41.5vmin; background: #000; transform: rotate(6deg); box-shadow: 0vmin 1vmin; } .pricks3::before{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: 2.5vmin; left: -0.5vmin; background: #000; transform: rotate(-4deg); box-shadow: 0vmin 1vmin; } .pricks3::after{ content: ""; position: absolute; width: 1vmin; height: 0.2vmin; top: 5vmin; left: -0.5vmin; background: #000; transform: rotate(-4deg); box-shadow: 0vmin 1vmin; } .pricks4{ position: absolute; width: 1vmin; height: 0.2vmin; top: 18vmin; left: 57vmin; background: #000; transform: rotate(120deg); box-shadow: 0vmin 1vmin; } .pricks4::before{ content: ""; position: absolute;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0