<template>
	<div>
		<!-- 菜单项hover下划线动画 -->
		<!-- <hover-line></hover-line> -->
		<!-- 文字效果 -->
		<!-- <hover-text></hover-text> -->
		<!-- tab伸缩、移动滑块 -->
		<!-- <tab-stretch></tab-stretch> -->
		<!-- tab背景转换 -->
		<!-- <tab-bg></tab-bg> -->
		<!-- 圆形进度 -->
		<!-- <div class="line-title">圆形</div>
		<circle-progress></circle-progress>
		<div class="line-title">斜切背景</div>
		<beveli-bg></beveli-bg>
		<br>
		<a href="/scroll-blur">滚动背景模糊</a>
		<br>
		<div class="line-title">模仿camera动画 <a href="https://codepen.io/damienpm/pen/esoJG/?spm=a2c6h.12873639.0.0.1873a972HcUlxd">CodePen Home
Flat design camera with CSS animation</a></div>
		<anima></anima> -->
		<!-- 按钮效果 -->
		<!-- <hover-btn></hover-btn> -->
		<!-- 借助clip-path实现的border环绕 -->
		<!-- <flow-border></flow-border> -->
		<!-- 图片手风琴 -->
		<!-- <blind></blind> -->
		<!-- 切角 -->
		<!-- <corner></corner> -->
		<!-- 伪类实现另类阴影 -->
		<!-- <pseudo-class-shadow></pseudo-class-shadow> -->
		<!-- css计数器 -->
		<css-counter></css-counter>
	</div>
</template>

<script>
	import hoverLine from './hover-line.vue'
	import hoverText from './hover-text.vue'
	import tabStretch from './tab-stretch.vue'
	import tabBg from './tab-bg.vue'
	import circleProgress from './circle-progress.vue'
	import beveliBg from './beveli-bg.vue'
	import anima from './anima.vue'
	import hoverBtn from './hover-btn.vue'
	import flowBorder from './flow-border.vue'
	import blind from './blind.vue'
	import corner from './corner.vue'
	import pseudoClassShadow from './pseudo-class-shadow.vue'
	import cssCounter from './css-counter.vue'
	export default {
		components: { hoverLine, hoverText, tabStretch, tabBg, circleProgress, beveliBg, anima, hoverBtn, flowBorder, blind, corner, pseudoClassShadow, cssCounter}
	}
</script>

<style scoped>
	.line-title {
		font-size: 24px;
		line-height: 2;
	}
</style>