极炫首页效果

最新推荐文章于 2025-07-30 15:11:40 发布

y126_Info

最新推荐文章于 2025-07-30 15:11:40 发布

阅读量281

点赞数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   <script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/prefixfree.min.js"></script>
   <style type="text/css">
       /*CSS源代码*/
body{
background:#CFCFCF;
margin:0;
padding:0;
}

.page        {
    bottom:0;
    padding-top:200px;
    position:absolute;
    text-align:center;
    top:0;
    width:100%;
}

.page h1    { font-size:40px; }
.page p     { opacity:.8}
.page a     { margin-top:40px;opacity:.5 }

.page-home      { background:#00D0BC; color:#00907c; }
.page-about     { background:#E59400; color:#a55400; }
.page-contact   { background:#ffa6bb; color:#9e0000; }

@keyframes rotateFall {
    0%      { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%    { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to      { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from    { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from    { transform:translateY(100%); }
    to      { transform: translateY(0); }
}

.ng-enter       { z-index: 8888; }
.ng-leave       { z-index: 9999; }

/* page specific animations ------------------------ */

/* home -------------------------- */
.page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
.page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

/* about ------------------------ */
.page-about.ng-enter        { animation:slideInRight 0.5s both ease-in; }
.page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

/* contact ---------------------- */
.page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
.page-contact.ng-enter      { animation:slideInUp 0.5s both ease-in; }

   </style>
   <script type="text/javascript">
       /*Javascript代码片段*/
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

animateApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/home', {
                      templateUrl: 'home.htm',
                      controller: 'HomeController'
                    }).
                    when('/about', {
                      templateUrl: 'about.htm',
                      controller: 'AboutController'
                    }).
                    when('/contact', {
                      templateUrl: 'contact.htm',
                      controller: 'ContactController'
                    }).
                    otherwise({
                      redirectTo: '/home'
                    });
                }]);

// CONTROLLERS ============================================
// home page controller
animateApp.controller('HomeController', function($scope) {
    $scope.pageClass = 'page-home';
    $scope.message = "<这里是首页>";
});

// about page controller
animateApp.controller('AboutController', function($scope) {
    $scope.pageClass = 'page-about';
    $scope.message = "<这里是关于页>";
});

// contact page controller
animateApp.controller('ContactController', function($scope) {
    $scope.pageClass = 'page-contact';
    $scope.message = "<这里是联系页>";
});
   </script>
   </head>
   <body>
       <p><a href="#home">首页</a></p>
<p><a href="#about">关于</a></p>
<p><a href="#contact">联系</a></p>

<div ng-app="animateApp">



<div class="page {{ pageClass }}" ng-view></div>


<script type="text/ng-template" id="home.htm">
    <h2> 首页 </h2>
    <p>{{message}}</p>
    <a href="#about">关于</a>
    <a href="#contact">联系</a>
</script>

<script type="text/ng-template" id="about.htm">
    <h2> 关于 </h2>
    <p>{{message}}</p>
    <a href="#home">首页</a>
    <a href="#contact">联系</a>
</script>

<script type="text/ng-template" id="contact.htm">
    <h2> 联系 </h2>
    <p>{{message}}</p>
    <a href="#home">首页</a>
    <a href="#about">关于</a>
</script>
</div>
</body>
</html>