js+css实现一个炫酷交互的文字云标签云效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现一个炫酷交互的文字云标签云效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap'); @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: 'IBM Plex Mono', monospace; } body { background: #1b263b; color: #778da9; cursor: none; } #cursor { position: fixed; top: -16px; left: -16px; z-index: 1; height: 32px; width: 32px; border-radius: 50%; background: #e0e1dd; opacity: 0; } #cursor.-activated { -webkit-animation: fadeIn 1s ease-out forwards; animation: fadeIn 1s ease-out forwards; } .tags-cloud { position: fixed; top: calc(50% - 30vmin); left: calc(50% - 30vmin); height: 60vmin; width: 60vmin; list-style: none; opacity: 0; } .tags-cloud.-loaded { -webkit-animation: fadeIn 1s ease-out forwards; animation: fadeIn 1s ease-out forwards; } .tags-cloud > .tag { position: absolute; top: 50%; left: 50%; font-size: 5vmin; font-weight: bold; transition: transform .5s linear, opacity .5s linear; } .tags-cloud > .tag > .wrap { display: inline-block; transform: translateX(-50%) translateY(-50%); } </style> </head> <body > <div id='cursor'></div> <ul class='tags-cloud'> <li class='tag'><span class='wrap'>HTML</span></li> <li class='tag'><span class='wrap'>Pug</span></li> <li class='tag'><span class='wrap'>CSS</span></li> <li class='tag'><span class='wrap'>LESS</span></li> <li class='tag'><span class='wrap'>PostCSS</span></li> <li class='tag'><span class='wrap'>RSCSS</span></li> <li class='tag'><span class='wrap'>SVG</span></li> <li class='tag'><span class='wrap'>Javascript</span></li> <li class='tag'><span class='wrap'>Gulp</span></li> <li class='tag'><span class='wrap'>Webpack</span></li> <li class='tag'><span class='wrap'>Canvas</span></li> <l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0