分享一下,澳门网站的炫酷css

72 阅读1分钟

image.png

没办法放gif,可以cv代码自行看特效。

可以自行找轮播插件,包裹p标签实现文字滚动,背景色代码换行了。这个自行处理一下


		<style>
			#banner {
				font-size: 18px;
				margin: 50px;
				background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-size: 200% 100%;
				animation: masked-animation 5s infinite linear
			}
			.box {
				background: #000;
			}
			p {
				text-align: center;
				background-color: #333;
				border-radius: 3px;
				box-shadow: 0px 0px 5px #f200ff;
				padding: 5px;
			}

			@keyframes masked-animation {
				0% {
					background-position: 0 0
				}

				100% {
					background-position: -100%, 0
				}
			}
		</style>
		<div class="box">
			<p id="banner">大大大大大多无群无多无群群群群群群群群群群群无群二</p>
		</div>