纯css实现一个游泳池效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个游泳池效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { background: #e3edf7; font-family: sans-serif; } .container { margin: 100px auto; width: 600px; height: 600px; background: #f6b8cd; position: relative; box-shadow: 1px 1px 1px #a6a7a4, -1px -1px 1px #a6a7a4, -1px 2px 2px #a6a7a4, 2px -2px 2px #a6a7a4; } .swim-pool-container { position: absolute; top: 30%; left: 20%; width: 60%; height: 30%; border: 15px solid #e9ebea; transform: rotate(20deg); z-index: 2; background-color: #8ac6e2; } .swim-pool-container-left { height: 100%; width: 10%; position: absolute; top: 0; z-index: 5; background: #35afdc; background-size: 50% 50%; background-repeat: no-repeat; } .swim-pool-container-right { width: 100%; height: 20%; background-color: #dbdad8; transform-origin: bottom; z-index: 5; background: #35afdc; background-size: 50% 50%; background-repeat: no-repeat; } .tyre { border: 10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0