css布局实现多个icon图标效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现多个icon图标效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #btn--yp { box-sizing: content-box; position: fixed; z-index: 9; bottom: 1em; right: 1em; border: solid 1em transparent; width: 4.625em; height: 3.25em; font: 16px/ 1.25 trebuchet ms, sans-serif; text-indent: 200vw; text-shadow: none; -webkit-filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0); filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0); -webkit-transition: .5s; transition: .5s; white-space: nowrap; } #btn--yp:before { box-sizing: inherit; position: absolute; left: 0; bottom: 100%; margin: 1em -.5em; padding: .5em; width: 100%; border-radius: 5px; background: #e8e0e0; color: #000; text-align: center; text-decoration: none; text-indent: 0vw; white-space: normal; -webkit-animation: float 1s ease-in-out infinite alternate; animation: float 1s ease-in-out infinite alternate; content: attr(data-txt); } #btn--yp:hover, #btn--yp:focus { outline: none; -webkit-filter: grayscale(0) drop-shadow(0 0 1px crimson); filter: grayscale(0) drop-shadow(0 0 1px crimson); } @-webkit-keyframes float { to { -webkit-transform: translateY(0.75em); transform: translateY(0.75em); } } @keyframes float { to { -webkit-transform: translateY(0.75em); transform: translateY(0.75em); } } body { display: grid; grid-template-columns: repeat(auto-fit, 7.125em); grid-gap: 1em; place-content: center; overflow-x: hidden; margin: 0; height: 100vh; background: repeating-linear-gradient(45deg, #222 0 3px, #000 0 13px); } .ico { border: solid 2em transparent; padding: 0.3125em; height: 2.5em; border-radius: 50%; -webkit-transform: rotate(-140deg); transform: rotate(-140deg); background: radial-Gradient(circle at 50% 1em, var(--c1) 1em, transparent calc(1em + 1px)) border-box, radial-Gradient(circle at calc(50% + (50% - 1em)*-0.70711) calc(50% + (50% - 1em)*0.70711), var(--c1) 1em, transparent calc(1em + 1px)) border-box, radial-Gradient(closest-side, var(--c2) 100%, transparent calc(100% + 1px)) content-box, conic-Gradient(var(--c1) 225deg, transparent 0%).........完整代码请登录后点击上方下载按钮下载查看
网友评论0