滚动选择和收藏颜色代码
代码语言:html
所属分类:加载滚动
代码描述:滚动选择和收藏颜色代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap'> <style> /* common */ html, body { overflow: hidden; width: 100%; height: 100%; color: #141517; font-family: 'Noto Sans', sans-serif; font-size: 100%; } a { color: #141517; text-decoration: none; } a:visited { color: #141517; } a:hover { color: deeppink; } body { position: relative; } /* header */ header { position: fixed; top: 1.6rem; left: 1.6rem; z-index: 9999; } header > h1 { font-size: 1.6rem; padding-bottom: 0.8rem; } /* footer */ footer { position: fixed; z-index: 9999; bottom: 1.6rem; right: 1.6rem; } /* main */ div { height: 100%; width: 100%; position: absolute; } .in { -webkit-animation: in .4s ease 0s 1 normal; animation: in .4s ease 0s 1 normal; } @-webkit-keyframes in { 0% { opacity: 0; } 100% { opacity: 100%; } } @keyframes in { 0% { opacity: 0; } 100% { opacity: 100%; } } div > ul { padding: 0.8rem; position: absolute; text-align: left; background: rgba(0, 0, 0, .8); color: #FFF; width: 20%; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); } div > ul > li { cursor: copy; } div > ul > li:first-child { padding-bottom: 0.8rem; } div > ul > li:hover { color: deeppink; } div > ul > li:hover:after { display: block; position: fixed; content: 'Click to copy!'; top: -1.6rem; -webkit-animation-name: pop; animation-name: pop; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } div > ul > li:hover:active:after { content: 'Get Color!' } @-webkit-keyframes pop { 0% { top: 0rem; } 100% { top: -1.6rem; } } @keyframes pop { 0% { top: 0rem; } 100% { top: -1.6rem; } } /* frame */ span.upRight { position: fixed; top: 1.6rem; right: 1.6rem; width: 32px; border-top: 2px solid #000; } span.upRight::after { content: ''; display: block; height: 32px; width: 30px; border-right: 2px solid #000; } span.dwLeft { position: fixed; bottom: 1.6rem; left: 1.6rem; width: 32px; border-top: 2px solid #000; -webkit-transform: rotate(180deg); transform: rotate(180deg); } span.dwLeft::after { content: ''; display: block; height: 32px; width: 30px; border-right: 2px solid #000; } span#meter { z-index: 9999; position: fixed; top: 0rem; right: 0rem; background: #141517; width: 4px; height: 0%; } span#heart { cursor: copy; z-index: 9999; position: fixed; bottom: 20%; left: 50%; width: 40px; height: 40px; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); } span#heart::before, span#heart::after { position: absolute; display: inline-block; -webkit-transform-origin: center; transform-origin: center; content: ''; background: #141517; top: 10px; width: 40px; height: 30px; border-radius: 50%; -webkit-transform: rotate(60deg); transform: rotate(60deg); } span#heart::before { right: 5px; } span#heart::after { -webkit-transform: rotate(120deg); transform: rotate(120deg); left: 5px; } span#heart:active::after, span#heart:active::before { background: deeppink; } ol { z-index: 9999; position: fixed; top: 2.4rem; right: 2.4rem; } ol > li { cursor: pointer; border: solid 1px #141517; width: 20px; height: 20px; margin-bottom: 0.4rem; } .appear { -webkit-animation: appear 1s ease-out 0s 1 normal forwards; animation: appear 1s ease-out 0s 1 normal forwards; } @-webkit-keyframes appear { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 25% { -webkit-transform: scale(2, 2); transform: scale(2, 2); } 50% { -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } 75% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes appear { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 25% { -webkit-transform: scale(2, 2); transform: scale(2, 2); } 50% { -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } 75% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } /* smartphone */ @media screen and (max-width: 48rem) { div > ul { width: 60%; } } </style> </head> <body translate="no" > <header> <h1>SCROLL COLORS</h1> <h2>Find your favorite color.&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0