纯css实现个白天黑夜切换动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现个白天黑夜切换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { background-color: #3c5913; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; border-radius: 20px; overflow: hidden; } .day, .night { position: relative; width: 100%; height: 100%; transition: 1s; } .day { background: linear-gradient(#fff3a0 20%, #ffc31e 60%, #3a8bc1, #255d82); } .wave { position: absolute; left: 50%; transform: translateX(-50%); width: 200%; height: 200%; z-index: 100; transition: 1s; } .wave1 { top: 60%; border-radius: 45%; background-color: rgba(89, 207, 247, 0.6); animation: rotating 5s linear infinite; } .wave2 { top: 68%; border-radius: 40%; background-color: rgba(37, 130, 206, 0.5); animation: rotating 8s linear infinite; } .wave3 { top: 70%; border-radius: 37%; background-color: rgba(20, 113, 188, 0.5); animation: rotating 12s linear infinite; } @keyframes rotating { 100% { transform: translateX(-50%) rotate(360deg); } } .sun { position: absolute; top: 5%; left: 20%; width: 80px; height: 80px; background-color: #ffcc3e; border-radius: 50%; box-shadow: 0 0 25px #ffcc3e; } .cloud { position: absolute; top: 20%; width: 120px; height: 40px; background-color: #fff; border-radius: 50px; animation: moving 5s linear infinite alternate-reverse; } .cloud::before { content: ""; position: absolute; top: -65%; left: 10%; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; } .cloud::after { content: ""; position: absolute; top: -35%; left: 45%; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; } @keyframes moving { 0% { left: 30%; } 100% { left: 50%; } } .night { background: linear-gradient(#255d82, #1d4763, #0e2230); } .container:hover .day, .container:hover .night { transform: translateY(-400px); } .moon { position: absolute; top: 5%; right: 20%; width: 80px; height: 80px; border-radius: 50%; box-shadow: inset -20px -15px 0 #fff; } .star { position: absolute; width: 4px; height: 4px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff; animation: staring 2s linear infinite; } .star1 { top: 1%; left: 34%; animation-delay: -0.1s; } .star2 { top: 3%; left: 31%; animation-delay: -0.2s; } .star3 { top: 4%; left: 27%; animation-delay: -0.3s; } .star4 { top: 48%; left: 21%; animation-delay: -0.4s; } .star5 { top: 49%; left: 85%; animation-delay: -0.5s; } .star6 { top: 14%; left: 77%; animation-delay: -0.6s; } .star7 { top: 41%; left: 96%; animation-delay: -0.7s; } .star8 { top: 2%; left: 39%; animation-delay: -0.8s; } .star9 { top: 48%; left: 5%; animation-delay: -0.9s; } .star10 { top: 43%; left: 42%; animation-delay: -1s; } .star11 { top: 45%; left: 48%; animation-delay: -1.1s; } .star12 { top: 32%; left: 82%; animation-delay: -1.2s; } .star13 { top: 40%; left: 3%; animation-delay: -1.3s; } .star14 { top: 29%; left: 25%; animation-delay: -1.4s; } .star15 { top: 39%; left: 78%; animation-delay: -1.5s; } .star16 { top: 46%; left: 74%; animation-delay: -1.6s; } .star17 { top: 5%; left: 18%; animation-delay: -1.7s; } .star18 { top: 14%; left: 13%; animation-delay: -1.8s; } .star19 { top: 26%; left: 92%; animation-delay: -1.9s; } .star20 { top: 2%; left: 7%; animation-delay: -2s; } .star21 { top: 23%; left: 37%; animation-delay: -2.1s; } .star22 { top: 22%; left: 97%; animation-delay: -2.2s; } .star23 { top: 33%; left: 89%; animation-delay: -2.3s; } .star24 { top: 38%; left: 8%; animation-delay: -2.4s; } .star25 { top: 24%; left: 45%; animation-delay: -2.5s; } .star26 { top: 49%; left: 7%; animation-delay: -2.6s; } .star27 { top: 44%; left: 86%; animation-delay: -2.7s; } .star28 { top: 7%; left: 22%; animation-delay: -2.8s; } .star29 { top: 17%; left: 36%; animation-delay: -2.9s; } .star30 { top: 25%; left: 20%; animation-delay: -3s; } .star31 { top: 9%; left: 6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0