css布局实现月亮瀑布动画夜景效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现月亮瀑布动画夜景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: hidden; background-image: linear-gradient(to bottom, #022c5d, #83c1be); position: relative; } moon { z-index: -1; top: 20vh; left: calc(50vw - 10vmin); background-color: #fffbde; box-shadow: 0 0 4vmin 0 #fffbde inset, -3vmin -3vmin 0 0 #eae7d2 inset, 0 0 0 10vmin rgba(255, 255, 255, 0.05), 0 0 0 20vmin rgba(255, 255, 255, 0.05), 0 0 0 40vmin rgba(255, 255, 255, 0.05), 0 0 0 70vmin rgba(255, 255, 255, 0.05); } moon, moon::before, moon::after { display: block; border-radius: 50%; position: absolute; } moon, moon::before { width: 20vmin; height: 20vmin; } moon::before, moon::after { content: ""; } moon::before { box-shadow: 0 0 10vmin white, 0 0 10vmin white, 0 0 10vmin white; -webkit-animation: moon-before 4s ease-in-out infinite alternate; animation: moon-before 4s ease-in-out infinite alternate; } moon::after { width: 4vmin; height: 4vmin; box-shadow: 5vmin 5vmin 0 1vmin #e1dcbe, 13vmin 13vmin 0 -1vmin #e1dcbe, 10vmin 7vmin 0 -0.5vmin #e1dcbe, 9vmin 15vmin 0 -0.5vmin #e1dcbe, 6vmin 14vmin 0 -1vmin #e1dcbe; } @-webkit-keyframes moon-before { to { opacity: 0.5; } } @keyframes moon-before { to { opacity: 0.5; } } waterfall { display: block; background-image: linear-gradient(to bottom, #005c99, #c4def3); box-shadow: 0 0.5vmin 0 0 rgba(255, 251, 222, 0.7) inset; position: absolute; bottom: 0; left: calc(50vw - 12vmin); width: 24vmin; height: 38vmin; border-radius: 4vmin 4vmin 0 0/12vmin 12vmin 0 0; } waterfall::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8vmin 8vmin 0 0; background-image: radial-gradient(ellipse at top, rgba(196, 222, 243, 0) 40%, rgba(196, 222, 243, 0.5) 70%, #c4def3 70%, rgba(196, 222, 243, 0) 70%); background-size: 200% 8vmin; background-position: 50% 0; -webkit-animation: waterfall 700ms linear infinite; animation: waterfall 700ms linear infinite; } waterfall::after { content: ""; display: block; position: absolute; border-radius: 50%; width: 6vmin; height: 6vmin; bottom: -3vmin; left: -9vmin; background-color: transparent; box-shadow: 6vmin 0 0 0 white, 12vmin 0 0 2vmin white, 18vmin 0 0 -1vmin white, 24vmin 0 0 1.5vmin white, 30vmin 0 0 0 white, 7vmin 0 0 2vmin transparent, 11vmin 0 0 5vmin transparent, 19vmin 0 0 3vmin transparent, 25vmin 0 0 4vmin transparent, 29vmin 0 0 1.5vmin .........完整代码请登录后点击上方下载按钮下载查看
网友评论0