Question

我有一个主网页，我想添加以下动画：公司徽标应该从屏幕右侧开始旋转，然后在到达页面中心时停止（并正确对齐）。我相信jQuery UI应该用于此，但我找不到任何东西，也不知道如何将这种效果放在我的徽标上。任何帮助将不胜感激谢谢

<!DOCTYPE html>
<html ng-app="myHome">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Home Page</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
        <link rel="stylesheet" href="/css/redirect.css"/>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
        <script src="/js/redirect.js"></script>  
    </head>
    <body>
        <div class="container">
            <div class="row" id="rotate">
                <div class="col-md-6 col-md-offset-3">
                    <img src="/css/PrattLogo_75.png">
                </div>
            </div>
            <div class="row">
                <h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
                <h1>DIGITAL OR SCREEN QUOTE?</h1>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <button type="button" class="btn btn-success">DIGITAL QUOTE</button>
                    <button type="button" class="btn btn-success">SCREEN QUOTE</button>
                </div>
            </div>
        </div>
    </body>

这是我的css

body {
    padding-top: 30px;
    padding-bottom: 20px;
    background: #43cea2; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #43cea2 , #185a9d); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #43cea2 , #185a9d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}

footer {
    color:white;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom:15px;
}

#rotate{
    -moz-animation: rotate 6s 1;
    -webkit-animation: rotate 6s 1;
    -o-animation: rotate 6s 1;
    -webkit-border-radius: 5px;

}
.btn {
    background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.btn:hover {
    background-color: #4CAF50;
    border:none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

Answer 1

如果您查看@VelmimirTchatchevsky提供的示例的来源，您可以确切地看到通过CSS完成的操作。这是它自己的：

https://jsfiddle.net/Twisty/et7sx8a2/

<强> HTML

<h2>CSS3 Animations</h2>
<p>CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!</p>
<div id="animated_div">CSS3
  <br><span style="font-size:10px;">Animation</span>
</div>

<强> CSS

#animated_div {
  width: 76px;
  height: 47px;
  background: #92B901;
  color: #ffffff;
  position: relative;
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  animation: animated_div 5s 1;
  -moz-animation: animated_div 5s 1;
  -webkit-animation: animated_div 5s 1;
  -o-animation: animated_div 5s 1;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

@keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }
  25% {
    transform: rotate(20deg);
    left: 0px;
  }
  50% {
    transform: rotate(0deg);
    left: 500px;
  }
  55% {
    transform: rotate(0deg);
    left: 500px;
  }
  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

@-webkit-keyframes animated_div {
  0% {
    -webkit-transform: rotate(0deg);
    left: 0px;
  }
  25% {
    -webkit-transform: rotate(20deg);
    left: 0px;
  }
  50% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }
  55% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }
  70% {
    -webkit-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    -webkit-transform: rotate(-360deg);
    left: 0px;
  }
}

@-moz-keyframes animated_div {
  0% {
    -moz-transform: rotate(0deg);
    left: 0px;
  }
  25% {
    -moz-transform: rotate(20deg);
    left: 0px;
  }
  50% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }
  55% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }
  70% {
    -moz-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    -moz-transform: rotate(-360deg);
    left: 0px;
  }
}

@-o-keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }
  25% {
    transform: rotate(20deg);
    left: 0px;
  }
  50% {
    transform: rotate(0deg);
    left: 500px;
  }
  55% {
    transform: rotate(0deg);
    left: 500px;
  }
  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }
  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

由于这是W3Schools，他们做得太过分以确保无论什么工作都能解决并涵盖所有可能的情况。他们使用@keyframes和transform来创建动画。你的最终代码也将使用这些代码，但会做不同的事情。

我建议学习每个部分，然后将它们组合起来。找出您网站所需的CSS。在常用浏览器中测试，并根据需要进行调整。

公司徽标的图像旋转

1 个答案: