纯css布局实现小树发芽的动画效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现小树发芽的动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .plant-wrap { background-color: #b5deff; height: 300px; width: 600px; min-width: 600px; border: 7px solid #EEEEEE; display: block; position: absolute; overflow: hidden; z-index: 10; } .plant-wrap:before { height: 20px; width: 600px; background: white; z-index: 10; transform: translateY(270px) skew(-40deg, 0); } .window-frame { height: 300px; width: 300px; border: 2px solid black; transform: translateY(270px) skew(-40deg, 0); } .clouds { animation: clouds 20s infinite; animation-direction: alternate-reverse; background: white; width: 220px; height: 50px; border-radius: 50%; z-index: 9; transform: translate(350px, 30px); } .clouds:before { background: white; width: 220px; height: 50px; border-radius: 50%; transform: translate(-170px, 20px); } .sun { background: yellow; display: inline-block; position: absolute; width: 200px; height: 200px; border-radius: 50%; z-index: 8; } .sun-ray { width: 170px; height: 600px; background: orange; display: inline-block; position: absolute; transform: rotate(-53deg); margin-left: 215px; margin-top: -100px; z-index: -1; } .sun-ray:after { width: 170px; height: 600px; background: yellow; mix-blend-mode: saturation; z-index: -1; } div:before, div:after { content: ''; display: block; position: absolute; } .pot { position: absolute; left: 50%; top: 75%; width: 70px; height: 70px; background-color: #4a2e2c; border-radius: 20%; z-index: 11; } .pot:before { width: 70px; height: 70px; background-color: #8a5652; border-bottom-left-radius: 20%; bord.........完整代码请登录后点击上方下载按钮下载查看
网友评论0