html中的唯美标签.js(花里胡哨的)

最新推荐文章于 2021-06-03 12:20:08 发布

猫化

最新推荐文章于 2021-06-03 12:20:08 发布

阅读量1.2k

点赞数 1

分类专栏：前端编写(推荐) 文章标签： html js java javascript

I from China

本文链接：https://blog.csdn.net/weixin_43701595/article/details/106782357

版权

这篇博客展示了如何使用HTML和JavaScript创建一个滚动显示的标签效果，并提供了在线运行的示例、源码下载以及如何将其应用到个人网站中的指导。

摘要由CSDN通过智能技术生成

效果图

这里会自己滚动,你也可以在div中添加你需要的a标签

 html在线运行传送门

wmbq.html源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
		<script src="wmbq.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#wmbq{
    position:relative;height:190px;margin:10px auto 10px;}
			#wmbq a{
    position:absolute;color:#FFFFFF;text-decoration: none;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;padding:3px 5px;border:0;transition:none;}
			#wmbq a:hover{
    background: none; display:block;}
			#wmbq a:nth-child(n){
    display:inline-block;line-height:18px;text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red;}
			#wmbq a:nth-child(2n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177;}
			#wmbq a:nth-child(3n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF;}
			#wmbq a:nth-child(4n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;}
			#wmbq a:nth-child(5n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc;}
			#wmbq a:nth-child(6n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de;}
		</style>
	</head>
	<body>
		<div id="wmbq">
            <a target="_blank" href="https://blog.csdn.net/weixin_43701595" title="·♪关于博客 - 个人资料 - 博客中心♪ ♩ ♫ ">我的博客</a>
            <a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088814.html" title="·♪项目经验(后端)♪ ♩ ♫ ">后端编写</a>
            <a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088816.html" title="·♪前端编写(推荐)♪ ♩ ♫ ">前端编写</a>
            <a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088807.html" title="·♪工具经验(杂)♪ ♩ ♫ ">工具经验</a>
            
            <a target="_blank" href

最低0.47元/天解锁文章

猫化

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html中的唯美标签.js(花里胡哨的)

效果图这里会自己滚动,你也可以在div中添加你需要的a标签html在线运行传送门wmbq.html源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
复制链接

扫一扫

专栏目录