master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_layout_widgets_5.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>可用的一些布局(动画篇) - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
/* 图标动画 */
.animations-box .badge {
    position: absolute;
    top: -10px;
    left: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
    animation: pulse-danger 2s infinite;
}
.dot {
    display: block;
    position: absolute;
    top: -0.5rem;
    right: -0.1rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c03c;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--bs-success-rgb), 0.9);
    animation: pulse-success 2s infinite;
}
@-webkit-keyframes pulse-success {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
    }
}
@keyframes pulse-success {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
    }
}
@-webkit-keyframes pulse-danger {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
    }
}
@keyframes pulse-danger {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
    }
}
.bell-animations {
    display: inline-block;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
    0% { -webkit-transform: rotateZ(0); }
    1% { -webkit-transform: rotateZ(30deg); }
    3% { -webkit-transform: rotateZ(-28deg); }
    5% { -webkit-transform: rotateZ(34deg); }
    7% { -webkit-transform: rotateZ(-32deg); }
    9% { -webkit-transform: rotateZ(30deg); }
    11% { -webkit-transform: rotateZ(-28deg); }
    13% { -webkit-transform: rotateZ(26deg); }
    15% { -webkit-transform: rotateZ(-24deg); }
    17% { -webkit-transform: rotateZ(22deg); }
    19% { -webkit-transform: rotateZ(-20deg); }
    21% { -webkit-transform: rotateZ(18deg); }
    23% { -webkit-transform: rotateZ(-16deg); }
    25% { -webkit-transform: rotateZ(14deg); }
    27% { -webkit-transform: rotateZ(-12deg); }
    29% { -webkit-transform: rotateZ(10deg); }
    31% { -webkit-transform: rotateZ(-8deg); }
    33% { -webkit-transform: rotateZ(6deg); }
    35% { -webkit-transform: rotateZ(-4deg); }
    37% { -webkit-transform: rotateZ(2deg); }
    39% { -webkit-transform: rotateZ(-1deg); }
    41% { -webkit-transform: rotateZ(1deg); }
    43% { -webkit-transform: rotateZ(0); }
    100% { -webkit-transform: rotateZ(0); }
}
/* 背景动画 */
.wave {
    background-color: #f9fafb;
    overflow: hidden;
    position: relative;
}
.wave > div {
    z-index: 1;
}
.wave:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: -1;
}
.wave:after {
    content: ' ';
    width: 1000px;
    height: 1025px;
    position: absolute;
    bottom: 65%;
    left: -250px;
    border-radius: 35%;
    background: white;
    z-index: 0;
}
.wave:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.wave-animate:after {
    -webkit-animation: animate-wave 15s infinite linear;
    animation: animate-wave 15s infinite linear;
}
.wave-animate-slower:after {
    -webkit-animation: animate-wave 30s infinite linear;
    animation: animate-wave 30s infinite linear;
}
.wave-animate-slow:after {
    -webkit-animation: animate-wave 25s infinite linear;
    animation: animate-wave 25s infinite linear;
}
.wave-animate-fast:after {
    -webkit-animation: animate-wave 10s infinite linear;
    animation: animate-wave 10s infinite linear;
}
.wave-animate-faster:after {
    -webkit-animation: animate-wave 5s infinite linear;
    animation: animate-wave 5s infinite linear;
}
.wave.wave-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
.wave.wave-primary .svg-icon svg g [fill] {
    fill: var(--bs-primary);
}
.wave.wave-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
}
.wave.wave-secondary .svg-icon svg g [fill] {
    fill: var(--bs-secondary);
}
.wave.wave-success {
    background-color: rgba(var(--bs-success-rgb), 0.1) !important;
}
.wave.wave-success .svg-icon svg g [fill] {
    fill: var(--bs-success);
}
.wave.wave-info {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}
.wave.wave-info .svg-icon svg g [fill] {
    fill: var(--bs-info);
}
.wave.wave-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
}
.wave.wave-warning .svg-icon svg g [fill] {
    fill: var(--bs-warning);
}
.wave.wave-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
}
.wave.wave-danger .svg-icon svg g [fill] {
    fill: var(--bs-danger);
}
.wave.wave-light {
    background-color: rgba(var(--bs-light-rgb), 0.1) !important;
}
.wave.wave-light .svg-icon svg g [fill] {
    fill: var(--bs-light);
}
.wave.wave-dark {
    background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
}
.wave.wave-dark .svg-icon svg g [fill] {
    fill: var(--bs-dark);
}
.wave.wave-white {
    background-color: rgba(var(--bs-white-rgb), 0.1) !important;
}
.wave.wave-white .svg-icon svg g [fill] {
    fill: var(--bs-white);
}
@-webkit-keyframes animate-wave {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes animate-wave {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* 动画css库演示 */
#myTabContent li {
    margin: 10px 10px 0 0;
    padding: 5px 10px;
    background-color: #eee;
    cursor: pointer;
}
#myTabContent li.active {
    color: var(--bs-primary);
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">可用的一些布局 - 动画篇</div>
  	    </header>
  		<div class="card-body">

  		  <p>布局来源于网络，大家看需要使用，O(∩_∩)O。</p>

  	    </div>
  	  </div>
    </div>

  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><div class="card-title">图标动画</div></div>
        <div class="card-body">

          <span class="position-relative animations-box">
            <i class="mdi mdi-message-text-outline fs-4"></i>
            <span class="badge bg-danger badge-pill">3</span>
          </span>
          <br/>
          <span class="position-relative animations-box">
            <i class="mdi mdi-bell fs-4"></i>
            <span class="dot bg-success"></span>
          </span>
          <br/>
          <span class="position-relative animations-box">
            <i class="mdi mdi-bell bell-animations fs-4"></i>
            <span class="dot bg-success"></span>
          </span>

        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
	  <!--begin::Iconbox-->
	  <div class="card wave wave-animate-slow wave-primary">
	    <div class="card-body position-relative">
          <a href="#!" class="text-dark fs-4">第四十九回</a>
	      <div class="mt-2 mb-2">薛招讨大破围城将 盖苏文失计飞刀阵</div>
          <p>诗曰：枉去扶余借救兵，苏文难获大唐君。飞刀失去雄师丧，天意谁能谋得成。</p>
	    </div>
	  </div>
	</div>

    <div class="col-md-4">
      <div class="card wave wave-animate wave-danger">
	    <div class="card-body position-relative">
	      <a href="#!" class="text-dark fs-4">第五十回</a>
	      <div class="mt-2 mb-2">扶余国二次借兵 朱皮仙播弄神通</div>
          <p>诗曰：苏文几次上仙山，再炼飞刀又设坛。怎奈唐王洪福大，机谋枉用也徒然。</p>
	    </div>
	  </div>
    </div>
    <div class="col-md-4">
      <div class="card wave wave-animate-fast wave-info">
		<div class="card-body position-relative">
		  <a href="#!" class="text-dark fs-4">第五十一回</a>
		  <div class="mt-2 mb-2">香山弟子除妖法 唐国元戎演阵图</div>
          <p>诗曰：龟灵妖法仗红珠，千载精华功不殊。指望威名成海国，那知一旦露形躯。</p>
		</div>
	  </div>
    </div>

  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><div class="card-title">动画样式示例</div></div>
        <div class="card-body">

          <p>模板中的样式文件 <code>animate.css</code> 是一个随时可用的跨浏览器动画库，供您在项目中使用。这里单独对改文件的动画做个示例。新版的这个 <code>css</code> 里面，所有的 <code>class</code> 都带上了<code>animate__</code>，这个跟以前的有区别，大家用的时候注意一下</p>
          <div class="text-center my-3"><h2 id="animate">Animate.css</h2></div>
          <ul id="myTabs" class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#attention-seekers">Attention Seekers</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#bouncing-entrances">Bouncing Entrances</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#bouncing-exits">Bouncing Exits</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#fading-entrances">Fading Entrances</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#fading-exits">Fading Exits</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#flippers">Flippers</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#lightspeed">Lightspeed</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#rotating-entrances">Rotating Entrances</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#rotating-exits">Rotating Exits</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sliders">Sliders</a></li>
		    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#specials">Specials</a></li>
          </ul>
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade show active" id="attention-seekers">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__bounce</li>
		        <li class="list-inline-item">animate__flash</li>
		        <li class="list-inline-item">animate__pulse</li>
		        <li class="list-inline-item">animate__rubberBand</li>
		        <li class="list-inline-item">animate__shake</li>
		        <li class="list-inline-item">animate__swing</li>
		        <li class="list-inline-item">animate__tada</li>
		        <li class="list-inline-item">animate__wobble</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="bouncing-entrances">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__bounceIn</li>
		        <li class="list-inline-item">animate__bounceInDown</li>
		        <li class="list-inline-item">animate__bounceInLeft</li>
		        <li class="list-inline-item">animate__bounceInRight</li>
		        <li class="list-inline-item">animate__bounceInUp</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="bouncing-exits">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__bounceOut</li>
		        <li class="list-inline-item">animate__bounceOutDown</li>
		        <li class="list-inline-item">animate__bounceOutLeft</li>
		        <li class="list-inline-item">animate__bounceOutRight</li>
		        <li class="list-inline-item">animate__bounceOutUp</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="fading-entrances">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__fadeIn</li>
		        <li class="list-inline-item">animate__fadeInDown</li>
		        <li class="list-inline-item">animate__fadeInDownBig</li>
		        <li class="list-inline-item">animate__fadeInLeft</li>
		        <li class="list-inline-item">animate__fadeInLeftBig</li>
		        <li class="list-inline-item">animate__fadeInRight</li>
		        <li class="list-inline-item">animate__fadeInRightBig</li>
		        <li class="list-inline-item">animate__fadeInUp</li>
		        <li class="list-inline-item">animate__fadeInUpBig</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="fading-exits">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__fadeOut</li>
		        <li class="list-inline-item">animate__fadeOutDown</li>
		        <li class="list-inline-item">animate__fadeOutDownBig</li>
		        <li class="list-inline-item">animate__fadeOutLeft</li>
		        <li class="list-inline-item">animate__fadeOutLeftBig</li>
		        <li class="list-inline-item">animate__fadeOutRight</li>
		        <li class="list-inline-item">animate__fadeOutRightBig</li>
		        <li class="list-inline-item">animate__fadeOutUp</li>
		        <li class="list-inline-item">animate__fadeOutUpBig</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="flippers">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__flip</li>
		        <li class="list-inline-item">animate__flipInX</li>
		        <li class="list-inline-item">animate__flipInY</li>
		        <li class="list-inline-item">animate__flipOutX</li>
		        <li class="list-inline-item">animate__flipOutY</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="lightspeed">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__lightSpeedIn</li>
		        <li class="list-inline-item">animate__lightSpeedOut</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="rotating-entrances">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__rotateIn</li>
		        <li class="list-inline-item">animate__rotateInDownLeft</li>
		        <li class="list-inline-item">animate__rotateInDownRight</li>
		        <li class="list-inline-item">animate__rotateInUpLeft</li>
		        <li class="list-inline-item">animate__rotateInUpRight</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="rotating-exits">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__rotateOut</li>
		        <li class="list-inline-item">animate__rotateOutDownLeft</li>
		        <li class="list-inline-item">animate__rotateOutDownRight</li>
		        <li class="list-inline-item">animate__rotateOutUpLeft</li>
		        <li class="list-inline-item">animate__rotateOutUpRight</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="sliders">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__slideInDown</li>
		        <li class="list-inline-item">animate__slideInLeft</li>
		        <li class="list-inline-item">animate__slideInRight</li>
		        <li class="list-inline-item">animate__slideOutLeft</li>
		        <li class="list-inline-item">animate__slideOutRight</li>
		        <li class="list-inline-item">animate__slideOutUp</li>
		      </ul>
            </div>
            <div class="tab-pane fade" id="specials">
		      <ul class="list-inline">
		        <li class="list-inline-item">animate__hinge</li>
		        <li class="list-inline-item">animate__rollIn</li>
		        <li class="list-inline-item">animate__rollOut</li>
		      </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$(function(){
	var $animate = $('#animate');
	var $btn = $('#myTabContent').find('li');
	$btn.click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		$animate.removeClass().addClass($(this).text() + ' animate__animated animate__infinite');
		setTimeout(removeClass, 1000);
	});

	function removeClass(){
		$animate.removeClass();
	}
});
</script>
</body>
</html>