css布局实现一个热气球飘动云朵效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个热气球飘动云朵效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .balloon { width: 9.35rem; height: 9.35rem; background-color: #F27C68; border-radius: 50%; border: 4px solid #D7E7EA; position: absolute; left: 50%; top: 50px; transform: translate(-50%); -webkit-animation: moving-balloon 3s ease infinite; animation: moving-balloon 3s ease infinite; } .balloon::after { width: 4.35rem; height: 0; border-top: 3.75rem solid #F27C68; border-left: 1.85rem solid transparent; border-right: 1.85rem solid transparent; content: ""; position: absolute; top: 100px; left: 50%; transform: translate(-50%); } .balloon::before { width: 70px; height: 25px; background-color: #E86B5A; border-radius: 5px; content: ""; position: absolute; left: 50%; top: 9.35rem; transform: translate(-50%); } .basket { width: 2.65rem; height: 1.75rem; background: #D1C1A6; border-radius: 0 0 3px 3px; position: absolute; left: 50%; transform: translate(-50%); top: 16.85rem; -webkit-animation: moving-basket 3s ease infinite; animation: moving-basket 3s ease infinite; } .basket:before { width: 3.15rem; height: 0.65rem; background: #B2A082; border-radius: 3px; content: ""; position: absolute; top: -0.65rem; left: 50%; transform: translate(-50%); } .basket:after { width: 1.55rem; height: 2.15rem; border-left: 2px solid #B2A082; border-right: 2px solid #B2A082; content: ""; position: absolute; top: -2.5rem; left: 50%; transform: translate(-50%) perspective(50px) rotateX(-40deg); } .cloud { width: 140px; height: 1.85rem; background: white; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0