css布局实现一个人顶住压力将石球往坡上推代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个人顶住压力将石球往坡上推代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: darkorange; overflow: hidden; } .forever{ --c: #180527; position: absolute; bottom: 0; right: 0; width: 100vmin; height: 100vmin; background: /* sisyphus */ /* head */ radial-gradient(farthest-side at 55% 50%, #000 99%, #0000 0) 38.5% 66.25% / 5% 5%, /* foot back */ radial-gradient(farthest-side at 40% 50%, #000 99%, #0000 0) 27.5% 95% / 2% 2%, radial-gradient(farthest-side at 40% 50%, #000 99%, #0000 0) 26.5% 95.75% / 1.5% 5%, radial-gradient(farthest-side, #000 99%, #0000 0) 26.25% 92% / 1.25% 1.25%, /* leg front */ radial-gradient(farthest-side at 40% 40%, #000 99%, #0000 0) 36.5% 80% / 8% 2.75%, radial-gradient(farthest-side, #000 99%, #0000 0) 38.5% 88.5% / 2% 5%, /* hand + arm */ radial-gradient(circle at 45.5% 64%, #000 2%, #0000 0), radial-gradient(farthest-side at 45% 60%, #000 99%, #0000 0) 45.35% 70% / 1.5% 7%, /* /sisyphus */ /* boulder */ radial-gradient(at 55% 55%, #000 18%, #0000 0), /* mountain */ linear-gradient(340deg, #000 24%, #0000 0), linear-gradient(320deg, #000 35%, #0000 0) 20% 100% / 80% 80%, conic-gradient(at 83% 49%, #0000 60deg, #000 0 180deg, #0000 0), radial-gradient(100% 50% at 80% 100%, #000 50%, #0000 0), radial-gradient(circle at 85% 53.66%, #000 5%, #0000 0), /* sun setting */ radial-gradient(farthest-side at 100% 100%, #ff8, #0000); background-repeat: no-repeat; } .forever::before, .forever::after { content: ""; position: absolute; bottom: -10%; right: 0; wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0