div+css实现下雨天气预报动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现下雨天气预报动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #03a9f4; text-align: center; padding-top: 60px; } .weather { display: inline-block; position: relative; } .weather .sun { position: relative; left: -20px; background-color: #ffce50; width: 120px; height: 120px; border-radius: 50%; z-index: 1; } .weather .sun:before { content: ""; position: absolute; top: 92px; left: 14px; background-color: #03a9f4; width: 90px; height: 90px; border-radius: 50%; } .weather .sun:after { content: ""; position: absolute; top: 52px; left: 54px; background-color: #03a9f4; width: 90px; height: 90px; border-radius: 50%; } .weather .cloud { position: relative; top: -20px; background-color: #ffffff; width: 270px; height: 80px; border-radius: 80px; z-index: 2; } .weather .cloud:before { content: ""; position: absolute; top: -40px; left: 40px; background-color: #ffffff; width: 80px; height: 80px; border-radius: 50%; } .weather .cloud:after { content: ""; position: absolute; top: -60px; left: 100px; background-color: #ffffff; width: 120px; height: 120px; border-radius: 50%; } .weather .rain { position: relative; top: -10px; } .weather .drop { position: absolute; bottom: 0; left: 20px; } .weather .drop:nth-child(2) { left: 96px; } .weather .drop:nth-child(2):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .weather .drop:nth-child(2):af.........完整代码请登录后点击上方下载按钮下载查看
网友评论0