div+css实现5款天气预报动画图标效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现5款天气预报动画图标效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html { height: 100%; margin: 0; padding: 0; font-size: 18px; font-family: Arial, sans-serif; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; margin: 0; padding: 0; color: #8f90a3; background-color: #232435; background-image: linear-gradient(45deg, #232435, #35415f); background-attachment: fixed; } h2 { margin-bottom: 4rem; font-size: 1rem; text-transform: uppercase; } .sunny { position: relative; width: 5rem; height: 5rem; margin-top: 4rem; } .sunny:before, .partly_cloudy__sun:before { content: ""; position: absolute; height: 80%; width: 80%; top: 10%; right: 10%; border-radius: 50%; z-index: 2; background-color: #f1c40f; background-image: radial-gradient(#f1c40f, #f39c12); box-shadow: 0 0 25px #917508; } .sunny:after, .partly_cloudy__sun:after { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 50%; z-index: 1; background-color: #f39c12; will-change: opacity, transform; animation: fadeIn 2s linear infinite reverse, scaleDown 2s linear infinite reverse; } .cloudy { position: relative; width: 5rem; height: 5rem; } .cloudy:before, .partly_cloudy__cloud:before, .rainy__cloud:before, .thundery__cloud:before { content: ""; position: absolute; height: 40%; width: 40%; top: 30%; right: 0%; border-radius: 50%; border-bottom-left-radius: 0; z-index: 2; background-color: #ecf0f1; background-image: radial-gradient(#ecf0f1, #bdc3c7); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } .cloudy:after, .partly_cloudy__cloud:after, .rainy__cloud:after, .thundery__cloud:after { content: ""; position: absolute; height: 60%; width: 70%; top: 10%; right: 30%; border-radius: 50%; border-bottom-right-radius: 0; z-index: 1; background-color: #ecf0f1; background-image: radial-gradient(#ecf0f1, #bdc3c7); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } .partly_cloudy { position: relative; width: 5rem; height: 5rem; } .partly_cloudy__sun { position: absolute; width: 100%; height: 100%; z-index: 1; } .partly_cloudy__cloud { position: absolute; width: 60%; height: 60%; top: 40%; z-index: 2; will-change: transform; -webkit-animation: translateUp 2s linear infinite alternate; animation: translateUp 2s linear infinite alternate; } .rainy, .thundery { position: relative; width: 5rem; height: 5rem; } .rainy__cloud, .thundery__cloud { position: absolute; height: 100%; width: 100%; z-index: 2; } .rainy__cloud:before, .thundery__cloud:before { background-color: #95a5a6; background-image: radial-gradient(#95a5a6, #7f8c8d); } .rainy__cloud:after, .thundery__cloud:after { background-color: #95a5a6; background-image: radial-gradient(#95a5a6, #7f8c8d); } .rainy__rain, .thundery__rain { position: absolute; height: 100%; width: 100%; z-index: 1; overflow: hidden; } .rainy__rain:before, .thundery__rain:before { content: ""; position: absolute; height: 80%; width: 20%; top: 20%; right: 50%; z-index: 1; background-image: linear-gradient(transparent, #94cdd1); will-change: opacity, transform; -webkit-animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite; animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite; } .rainy__rain:after, .thundery__rain:after { content: ""; position: absolute; height: 60%; width: 20%; top: 40%; right: 20%; z-index: 1; opacity: 0; background-image: linear-gradient(transparent, #94cdd1); will-change: opacity, transform; -webkit-animation: fadeIn 2s ease-out 0.4s infinite reverse, scaleUp 2s ease-out 0.4s infinite; animation: fadeIn 2s ease-out 0.4s infinite reverse, scaleUp 2s ease-out 0.4s infinite; } .t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0