css实现绚丽滚动边框效果
代码语言:html
所属分类:布局界面
代码描述:css实现绚丽滚动边框效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body, .bg { height: 100%; } html { background-color: white; padding: 1vmin; } body { border: 2vmin solid black; border-radius: 5vmin; padding: calc(2vmin + 10px); margin: 0; } .fal.fa-hand-paper:not(*:root) { padding-top: 0.051em; } .far.fa-dot-circle:not(*:root) { padding-top: 0.060625em; } .fas.fa-circle:not(*:root) { padding-top: 0.0675em; } .fas.fa-eye:not(*:root) { padding-top: 0.05em; } .fas.fa-hand-paper:not(*:root) { padding-top: 0.05em; } .fas.fa-map-marker:not(*:root) { padding-top: 0.055em; } .fas.fa-sparkles:not(*:root) { padding-top: 0.067em; } .bg { background-color: black; background-image: radial-gradient(circle, white 1vmin, transparent 1.1vmin, transparent 8vmin), radial-gradient(circle, white 0.8vmin, transparent 0.9vmin, transparent 10vmin), radial-gradient(circle, white 0.5vmin, transparent 0.51vmin, transparent 3vmin); background-position: 20px 50px, -10px -10px, 50px -55px; background-size: 150px 200px; display: -webkit-box; display: flex; position: relative; } .border-bottom { bottom: -10px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .border-left { bottom: -20px; left: -10px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: top left; transform-origin: top left; } .border-right { bottom: 0; right: 10.1px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: bottom right; transform-origin: bottom right; } .border-top { top: -10px; } .border-bottom, .border-top { width: calc(100vw - 10vmin - 20px); } .border-left, .border-right { width: calc(100vh - 10vmin - 20px); } .border-bottom, .border-left, .border-right, .border-top { -webkit-animation: wavy 0.5s linear infinite; animation: wavy 0.5s linear infinite; background-repeat: repeat-x; background-size: 20px 20px, 40px 20px; background-image: radial-gradient(circle at center -5px, transparent 12px, black 13.5px), radial-gradient(circle at 10px 15px, black 15px, transparent 16.5px); height: 20px; position: absolute; } .border-bottom::before, .border-left::before, .border-right::before, .border-top::before { background-color: black; border-radius: 15px; content: ''; height: 30px; left: -10px; position: absolute; top: 0; width: 30px; } .drop { color: red; font-size: 20vmin; height: 20.4vmin; position: absolute; -webkit-text-stroke: 2px black; -webkit-transform: scale(0.75) scaleY(1.33); transform: scale(0.75) scaleY(1.33); width: 15.3vmin; } .drop:first-child { right: 2vmin; top: 0; -webkit-transform: rotate(45deg) scale(0.75) scaleY(1.33); transform: rotate(45deg) scale(0.75) scaleY(1.33); } .drop:nth-child(2) { right: 3vmin; top: 50%; -webkit-transform: rotate(90deg) translateX(-50%) scale(0.75) scaleY(1.33); transform: rotate(90deg) translateX(-50%) scale(0.75) scaleY(1.33); } .drop:nth-child(3) { right: 0; top: 100%; -webkit-transform: rotate(135deg) translateX(-82%) translateY(82%) scale(0.75) scaleY(1.33); transform: rotate(135deg) translateX(-82%) translateY(82%) scale(0.75) scaleY(1.33); } .drop:nth-child(4) { left: 0; top: 100%; -webkit-transform: rotate(-135deg) translateX(82%) translateY(82%) scale(0.75) scaleY(1.33); transform: rotate(-135deg) translateX(82%) translateY(82%) scale(0.75) scaleY(1.33); } .drop:nth-child(5) { left: 3vmin; top: 50%; -webkit-transform: rotate(-90deg) translateX(50%) scale(0.75) scaleY(1.33); transform: rotate(-90deg) translateX(50%) scale(0.75) scaleY(1.33); } .drop:last-child { left: 2vmin; top: 0; -webkit-transform: rotate(-45deg) scale(0.75) scaleY(1.33); transform: rotate(-45deg) scale(0.75) scaleY(1.33); } .drop:nth-child(1) { color: #ff8f57; } .drop:nth-child(2) { color: #c7ff57; } .drop:nth-child(3) { color: #57ff8f; } .drop:nth-child(4) { color: #57c7ff; } .drop:nth-child(5) { color: #8f57ff; } .drop:nth-child(6) { color: #ff57c7; } .eye { background-position: 0.2vmin 0; bottom: 6vmin; font-size: 20vmin; height: 15.35vmin; position: absolute; right: 7vmin; text-align: center; width: 23vmin; } .eye::before { position: relative; top: -2.5vmin; } .eye:not(*:root)::before { display: block; margin-top: -2.5vmin; position: static; } .eye-fill { bottom: 7vmin; color: white; font-size: 14vmin; height: 14vmin; position: absolute; right: 11vmin; width: 14vmin; } .eye-fill:not(*:root) { padding-top: 0.8vmin; } .hamsa { -webkit-animation: bounce 1s infinite linear alternate; animation: bounce 1s infinite linear alternate; height: 51vmin; margin: auto; position: relative; width: 45vmin; } .hand { font-size: 50vmin; height: 1.008em; left: 0.014em; position: relative; -webkit-transform: scaleX(0.9); transform: scaleX(0.9); width: 0.884em; } .hand-outline { -webkit-animation: scroll 30s linear infinite; animation: scroll 30s linear infinite; bottom: 0; font-size: 51vmin; height: 1.0058823529em; position: absolute; right: 0; width: 0.8823529412em; } .iris { -webkit-animation: iris 5s linear infinite; animation: iris 5s linear infinite; bottom: 9.6vmin; font-size: 8vmin; height: 8.07vmin; position: absolute; right: 14.1vmin; width: 8.07vmin; } .iris::before { position: relative; left: -0.12vmin; top: -0.14vmin; } .nail { color: white; position: absolute; font-size: 3vmin; } .nail-middle { left: 22vmin; top: 4.7vmin; } .nail-pinky { right: 4.25vmin; top: 16.2vmin; } .nail-pointer { left: 14.2vmin; top: 8.4vmin; } .nail-ring { left: 29.75vmin; top: 8.2vmin; } .nail-thumb { left: 5vmin; top: 28vmin; } .pupil-outline { bottom: 5.7vmin; font-size: 16vmin; height: 15.8vmin; position: absolute; right: 10.2vmin; width: 15.8vmin; } .pupil-outline::before { left: -0.25vmin; position: relative; top: -0.25vmin; } .sparkle { color: white; -webkit-filter: drop-shadow(0 0 1vmin black).........完整代码请登录后点击上方下载按钮下载查看
网友评论0