我是使用css的动画新手。我开发了一个使用css动画旋转图标的代码,但它无法正常工作,我无法确定错误是什么。我的代码是:
.rotate {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="star.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<i class="rotate fa fa-anchor"></i>
<img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg">
</body>
</html>
答案 0 :(得分:1)
试试这个
<i class=" fa fa-anchor fa-spin"></i>
.rotate {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
&#13;
<script src="https://use.fontawesome.com/79a4552de1.js"></script>
<i class=" fa fa-anchor fa-spin"></i>
<img class="fa-spin" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" style="width:100px;">
&#13;
答案 1 :(得分:1)
试试这个。
<强> CSS 强>
.element {
display: inline-block;
background-color: #0074d9;
height: 100px;
width: 100px;
font-size: 1px;
padding: 1px;
color: white;
margin-right: 5px;
margin-left: 5px;
animation: roll 3s infinite;
transform: rotate(30deg);
opacity: .7;
}
@keyframes roll {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
body, html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<强> HTML:强>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
答案 2 :(得分:1)
.spinner {
-webkit-animation:spin 0.5s linear infinite;
-moz-animation:spin 0.5s linear infinite;
animation:spin 0.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
-webkit-keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
&#13;
<img class="spinner" src="http://placehold.it/200x200">
&#13;
答案 3 :(得分:0)
.rotate {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@keyframes spin{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(90deg);
}
100%{
transform:rotate(180deg);
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="star.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<i class="rotate fa fa-anchor"></i>
<img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg">
</body>
</html>