div+css实现天气预报小部件效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现天气预报小部件效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:300); *, *:after, *:before { box-sizing: border-box; } body { background: #CEF; } .container { display: flex; justify-content: center; align-items: center; height: 98vh; } .widget { background: linear-gradient(to bottom right, #3cc0fe 20%, #0066ff); width: 900px; height: 400px; border-radius: 6px; box-shadow: 0px 60px 80px -20px rgba(39, 165, 253, 0.4); position: relative; overflow: hidden; } .pictoBackdrop { position: absolute; height: 560px; width: 560px; border-radius: 50%; background: linear-gradient(160deg, rgba(60, 192, 254, 0.7) 40%, rgba(0, 102, 255, 0.6)); right: -40px; top: -90px; } .pictoFrame { position: absolute; background: #34373e; border-radius: 50%; box-shadow: 0px 50px 60px -20px #0066ff; height: 336px; width: 336px; right: 80px; top: 25px; } .pictoCloudBig { position: absolute; border-radius: 50%; background: #aacbe6; box-shadow: 20px 20px 80px -20px #aacbe6; height: 218.4px; width: 218.4px; top: 80px; right: 160px; } .pictoCloudFill { position: absolute; background: #aacbe6; box-shadow: 0px 20px 80px -20px #aacbe6; height: 107.016px; width: 107.016px; top: 191px; right: 265px; } .pictoCloudSmall { position: absolute; border-radius: 50%; background: #d2e9fa; height: 152.88px; width: 152.88px; top: 146px; right: 282px; } .iconCloudBig { position: absolute; border-radius: 50%; background: #9cd0ff; height: 36px; width: 36px; top: 200px; left: 80px; } .iconCloudSmall { position: absolute; border-radius: 50%; h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0