利用CSS3實現注釋疊加效果



18 69 24



特效描述:利用CSS3實現 注釋疊加效果,利用CSS3實現注釋疊加效果

代碼結構

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>

3. HTML代碼

        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Development/FlipboardPageLayout/">
                    <strong>&laquo; Previous Demo: </strong>Flipboard Page Layout
                </a>
                <span class="right">
					<a href="http://www.cqetom.live//blog/simple-arrows-psd/">Arrows by Alessio Atzeni</a>
					<a href="http://themeforest.net/item/blenton-premium-wordpress-template/1995225">Theme Preview by Ana Segota</a>
                    <a href=" http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<header>
				<h1>Annotation Overlay Effect <span>with CSS3</span></h1>
				<p>Make some simple annotations to images/items and show them on click</p>
				<h2 class="ie-note ie-note-1">CSS3 Selectors don't work in Internet Explorer &lt; 9</h2>
				<h2 class="ie-note ie-note-2">CSS3 Transitions don't work in Internet Explorer &lt; 10</h2>
			</header>
			<section>
				<div class="ao-item">
					<div class="ao-details">
						<h2>Blenton Wordpress Theme</h2>
						<p>Blenton is a simple and clean Wordpress theme which was made with a lot of attention to detail. It is suitable for commercial and private projects and comes with a variety of features.</p>
						<p><a href="http://themeforest.net/item/blenton-premium-wordpress-template/1995225">Take a look &rarr;</a></p>
					</div>
					<div class="ao-preview">
						<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
						<img src="images/Anariel_BlentonTemplate.jpg" alt="image01" />
						<div class="ao-annotations">
							<span>Full Localisation Support</span>
							<span>Custom Image Widget</span>
							<span>Blog and Contact Widgets</span>
							<span>Easy Theme Options</span>
							<span>4 Footer Widget Columns</span>
						</div>
					</div>
				</div>
				<div class="ao-item ao-item-left">
					<div class="ao-details">
						<h2>Blenton is elegant</h2>
						<p>The design of Blenton makes a great match with a portfolio. It comes with many features like full localisation support and easy theme options.</p>
						<p><a href="http://themeforest.net/item/blenton-premium-wordpress-template/1995225">Buy the theme &rarr;</a></p>
					</div>
					<div class="ao-preview">
						<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
						<img src="images/Anariel_UnixTemplate.jpg" alt="image02" />
						<div class="ao-annotations">
							<span>Easy Logo Upload</span>
							<span>Custom Post Portfolio</span>
							<span>Custom Background Color and Pattern</span>
						</div>
					</div>
				</div>
			</section>
        </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 漸隱切換 淡出淡進 淡出 淡進 其他 css繪制樣式 文字提示框 提示文字 文字淡出淡進 文字淡出 文字淡進 提示框/彈出層
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子