html+CSS3动画库
1、新建html文档。
2、书写hmtl代码。
<div class="filters-container">
<headergroup>
<h1><strong>Repaintless.css</strong> 演示页面</h1>
<h2>点击 PLAY按钮开始元素动画。你可以分别点击各个按钮来显示或隐藏相应的动画。</h2>
</headergroup>
<label class="single-filter all-filter">
<input type="checkbox" rel="element-animated"/>
<span>All</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-right" />
<span>Slide from right</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-left" />
<span>Slide from left</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-top" />
<span>Slide from top</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-bottom" />
<span>Slide from bottom</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-right-bottom" />
<span>Slide from right bottom</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-right-top" />
<span>Slide from right top</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-left-bottom" />
<span>Slide from left bottom</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-from-left-top" />
<span>Slide from left top</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-left-right" />
<span>Slide left right</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="slide-top-bottom" />
<span>Slide top bottom</span>
</label>
<label class="single-filter">
<input type="checkbox" rel="tremble" />
<span>Tremble</span>
</label>
</div>
3、书写css代码。
.related { margin-top: 50px; color: #fff; background: #494A5F; text-align: center; font-size: 1.25em; padding: 0.5em 0; overflow: hidden; }
.related > a { vertical-align: top; width: calc(100% - 20px); max-width: 340px; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo; }
.related a { display: inline-block; text-align: left; margin: 20px auto; padding: 10px 20px; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; }
.related a:hover, .related a:active { opacity: 1; }
.related a img { max-width: 100%; opacity: 0.8; border-radius: 4px; }
.related a:hover img, .related a:active img { opacity: 1; }
.related h3 { font-family: "Microsoft YaHei", sans-serif; }
.related a h3 { font-weight: 300; margin-top: 0.15em; color: #fff; }
.icon-htmleaf-home-outline:before { content: "\e5000"; }
.icon-htmleaf-arrow-forward-outline:before { content: "\e5001"; }
@media screen and (max-width: 50em) {
.htmleaf-header { padding: 3em 10% 4em; }
.htmleaf-header h1 { font-size: 2em; }
}
@media screen and (max-width: 40em) {
.htmleaf-header h1 { font-size: 1.5em; }
}
@media screen and (max-width: 30em) {
.htmleaf-header h1 { font-size: 1.2em; }
}
4、书写并添加js代码。
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var checkbox = $('.single-filter').find('input:checkbox');
checkbox.attr("checked", false);
$('.all-filter').find('input:checkbox').attr("checked", true);
$('#play-animation').on('click', function () {
this.remove();
$('.main-container').find('.element-animated').each(function (){
this.classList.add("animation-running");
});
$('.all-filter').find('input:checkbox').attr("checked", true);
});
checkbox.on('click', function () {
$('.element-animated').css({"opacity" : "0"});
$('div.filters-container').find('input:checked').each(function () {
$('.element-animated.' + $(this).attr('rel')).css({"opacity" : ".8"});
});
});
});
</script>
5、代码整体结构。
6、查看效果。
