<! doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Label Cloud Effect</title> <style> *{margin:0; padding:0;border:0;} .wordbox{position:relative;} .box{position: absolute;text-align: center;word-wrap: break-word;overflow: hidden;border: 1px solid rgb(255 255 255 / 0.6); transition-duration: .6s,.6s;transition-property: background-color,color;transition-timing-function: ease,ease;} .box:hover{ opacity:0.6} .box a {color: #fff; text-decoration: none;display: inline-block;width: 100%;height:100%;} </style> <script type="text/ javascript " src=" https://cdn.staticfile.org/ jquery /1.10.2/jquery.min.js"></script> <script type="text/javascript" src=" https://cdn.jsdelivr.net/npm/wordbox @1.3.1/dist/wordbox.min.js"></script> </head> <body> <div id="wordbox"></div> <script type="text/javascript"> var titles = ['JavaScript', 'CSS', 'HTML', ' HTML5 ', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL']; var words = []; for(var i = 0; i < titles.length; i++) { words[i] = { "title" : titles[i], "url" : "" } } var colors = ['#cc5b34', '#ff9800','#00aff0','#09c','#8bc34a','#136486']; $("#wordbox").wordbox({ isLead: false, LeadWord: {'title': 'All', 'url': ''}, words: words, colors: colors, isFixedWidth: true, width: window.innerWidth - 2, height: 160 }); </script> </body> </html>