css+svg实现泳池中漂浮的告示牌飘动效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现泳池中漂浮的告示牌飘动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"); body, html { height: 100%; display: grid; margin: 0; background: Burlywood; background-repeat: repeat; background-size: auto auto; overflow-x: hidden; font-family: "Quicksand", sans-serif; } .sign { margin: auto; padding: 1em; transform: rotate(-10deg) translateY(0%); background-color: #630; background-image: url(//repo.bfw.wiki/bfwrepo/image/6032e554eeb71.png); background-blend-mode: hard-light; color: red; text-align: center; box-shadow: -2px 2px 0px #630, -4px 4px 0px #630, -5px 6px 0px #630, -6px 8px 0px #630, -7px 10px 0px #630; animation: sign 10s linear infinite; } @keyframes sign { 12.5% { transform: rotate(5deg) translateY(-50%); } 25% { transform: rotate(-10deg) translateY(0%); } } h1, h2, h3, ol { background: rgba(255, 255, 255, 0.75); margin: 0px auto; padding: 1rem; } h1 { text-decoration: underline; padding-bottom: 0; } ol { text-align: left; list-style: "🚫"; padding-left: 3rem; } li { padding-left: 0.5rem; font-size: 1.25rem; } h2 { text-transform: uppercase; margin-top: 1rem; padding-bottom: 0; } h3 { padding-top: 0; } #wave { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; z-index: 1; transform: translateY(60%); opacity: 0.75; } #wave svg { filter: drop-shadow(0 -25px rgba(255, 255, 255, 0.25)); } #wave div { width: 100%; height: 100%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0