[BBCODE] Kitt BBCode

[Stoker]

Kitt BBCode

Do you remember the tv-show from '82 Knight Rider?
And the car KITT and the glowing lights?

BBCode:

Code: Select all

[kitt][/kitt]

HTML:

Code: Select all

<div class="riderline"><div class="riderlight"></div></div>

Helpline:

Code: Select all

Kitt: [kitt][/kitt]

Example:

Code: Select all

[kitt][/kitt]

Demo:

Now, to make this work we need some css.
You can add it to the bottom of your styles colours.css

Code: Select all

/** Knight Rider START **/
:root {
	--rider-bg: #111;
	--rider-height: 12px;
	--rider-light-width: 50%;
	--rider-cell-number: 8;
	--rider-cell-width: calc(var(--rider-height) * 3);
	--rider-cell-gap: calc(var(--rider-height) * 0.1);
	--rider-color-on: rgba(255, 0, 0, 1);
	--rider-color-off: rgba(255, 0, 0, 0.25);
}
.riderline {
	position: relative;
	width: calc(((var(--rider-cell-width) + var(--rider-cell-gap)) * var(--rider-cell-number)) - var(--rider-cell-gap));
	height: var(--rider-height);
	overflow: hidden;
	background: var(--rider-bg);
}
.riderline:after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: repeating-linear-gradient(
	90deg,
	var(--rider-color-off),
	var(--rider-color-off) var(--rider-cell-width),
	var(--rider-bg) var(--rider-cell-width),
	var(--rider-bg) calc(var(--rider-cell-width) + var(--rider-cell-gap))
	);
	background-size: 200% 200%;
}
.riderlight {
	position: absolute;
	top: 0;
	height: 100%;
	left: calc(var(--rider-light-width) / 2 * -1);
	width: var(--rider-light-width);
	background: linear-gradient(90deg, transparent 0%, var(--rider-color-on) 45%, var(--rider-color-on) 55%, transparent 100%);
	animation: rider-kitt 2s infinite ease-in-out alternate;
	filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.6));
}
@keyframes rider-kitt {
	0%, 100% {
	left: calc(var(--rider-light-width) / 2 * -1);
	}
	50% {
	left: calc(100% - var(--rider-light-width) / 2);
	}
}
/** Knight Rider END **/

This piece controls the speed:

Code: Select all

animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;

Save, upload and refresh

Need a stylesheet for adding extra styling? No need to edit phpBB core!
You can use the Add CSS EXT