CSS3の「:target疑似クラス」を使い、CSSだけでテキストのテロップ（CSS2のmarqueeと同じ動き）の開始と停止を制御します。サンプルの開始ボタンをクリックすると、ボタンの下のテロップが動きだします。停止ボタンをクリックすると止まります。

仕組み：「CSS3 :target疑似クラスを使い、CSSだけでアニメーション（画像）の開始と停止」とほぼ同じですが、こちらではやや詳しく解説します。

• テロップ無しのdiv要素（１）とテロップ有りのdiv要素（２）を用意し、div要素（id="start"の兄要素）の弟要素として順に配置し、間接セレクタ「#start ~ div」で「display:none」により、弟要素である（１）（２）とも隠します。
• 次に隣接セレクタ「#start + div」で「display:block 」として兄要素に隣接した（１）のみを表示させます（ロードしたときに、テロップは停止状態）。
• 開始ボタンをクリックすると、内部リンクであるdiv要素（id="start"）に飛び、:target疑似クラスの「#start:target ~ div」の間接セレクタ指定で、「display:block」により、弟要素である（１）（２）とも表示させます。
• 続いて:target疑似クラスの「#start:target + div」の隣接セレクタ指定で「display:none」として、兄要素に隣接した（１）のみを隠します。
• その結果、見た目はテロップが動き出します。
• 停止ボタンをクリックすると、:target疑似クラス無指定の要素（id="stop"）に飛ぶため、元に戻ります。

（動作サンプルは最下段です）

サンプルのhtmlソース

<div class="btn" id="stop">
	<a class="mmm" href="#start">テロップ開始</a>　
  <a href="#stop">テロップ停止</a>
</div>
<div class="telop">
	<div id="start"></div> /*兄のdiv要素*/
	<div class="static"> /*弟のdiv要素（１）*/
		<p>　</p>
	</div>
	<div class="marquee"> /*弟のdiv要素（２）*/
		<p>経費を削減しながら顧客満足度アップ　百万石&nbsp;WEB受注システム</p>
	</div> 
</div>

サンプルのCSSソース

テロップ（アニメーション）部分のCSSは省略します。省略部分はtest-css3-marquee.htmlのものとほぼ同じです。

#start ~ div {
	display:none;
	}
#start + div {
	display:block;
	}
#start:target ~ div { 
	display:block;
	}
#start:target + div { 
	display:none;
	}