利用CSS3實現動畫3D條形圖



21 80 27



特效描述:利用CSS3實現 動畫3D條形圖,利用CSS3實現動畫3D條形圖

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/graph.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/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/Tutorials/CSS3AnnotationOverlayEffect/">
                    <strong>&laquo; Previous Demo: </strong>Annotation Overlay Effect with CSS3
                </a>
                <span class="right">
                    <a href="http://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header>
                <h1>Animated 3D Bar Chart <span>with CSS3</span></h1>
				<h2 class="ie-note ie-note-1">Please view this in a modern browser.</h2>
				<h2 class="ie-note ie-note-2">CSS3 Transitions don't work in Internet Explorer &lt; 10</h2>
            </header>
            <section class="main">
				<span class="button-label">Size:</span>
                <input type="radio" name="resize-graph" id="graph-small" /><label for="graph-small">Small</label>
                <input type="radio" name="resize-graph" id="graph-normal" checked="checked" /><label for="graph-normal">Normal</label>
                <input type="radio" name="resize-graph" id="graph-large" /><label for="graph-large">Large</label>   
				<span class="button-label">Color:</span>
                <input type="radio" name="paint-graph" id="graph-blue" checked="checked" /><label for="graph-blue">Blue</label>
                <input type="radio" name="paint-graph" id="graph-green" /><label for="graph-green">Green</label>
                <input type="radio" name="paint-graph" id="graph-rainbow" /><label for="graph-rainbow">Rainbow</label>
				<span class="button-label">Product:</span>
                <input type="radio" name="fill-graph" id="f-none" /><label for="f-none">None</label>
                <input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">Product 1</label>
                <input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">Product 2</label>
                <input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">Product 3</label>
                <ul class="graph-container">
                    <li>
                        <span>2008</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">25</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2009</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2010</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">75</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2011</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">100</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2012</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <ul class="graph-marker-container">
                            <li style="bottom:25%;"><span>25%</span></li>
                            <li style="bottom:50%;"><span>50%</span></li>
                            <li style="bottom:75%;"><span>75%</span></li>
                            <li style="bottom:100%;"><span>100%</span></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </div>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航切換 菜單切換 圖片切換 圖片選項卡 圖標選項卡 滑動手風琴
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子