css五角星发光旋转动画效果代码
代码语言：html
所属分类：动画
代码描述：css五角星发光旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*, *:before, *:after {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
content: "";
}
html, body {
height: 100%;
}
body {
position: relative;
background: #272727;
overflow: hidden;
}
.container, .container *, .container *:before, .container *:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.thing {
width: 10em;
height: 10em;
}
.thing:before, .thing:after {
width: 0.33333em;
height: 0;
}
.thing:before {
margin-top: 10em;
bottom: auto;
background: #272727;
}
.thing:after {
top: auto;
background: #272727;
}
.thing:nth-child(1) {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.thing:nth-child(1):before, .thing:nth-child(1):after {
animation: thing 0.75s -0s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(1):before {
background: rgba(255, 77, 77, 0.1);
animation: thing 1s -0s linear infinite;
}
.thing:nth-child(1):after {
background: rgba(255, 77, 77, 0.75);
}
.thing:nth-child(2) {
-moz-transform: rotateZ(12deg);
-ms-transform: rotateZ(12deg);
-webkit-transform: rotateZ(12deg);
transform: rotateZ(12deg);
}
.thing:nth-child(2):before, .thing:nth-child(2):after {
animation: thing 0.75s -0.25s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(2):before {
background: rgba(255, 112, 77, 0.1);
animation: thing 1s -0.03333s linear infinite;
}
.thing:nth-child(2):after {
background: rgba(255, 112, 77, 0.75);
}
.thing:nth-child(3) {
-moz-transform: rotateZ(24deg);
-ms-transform: rotateZ(24deg);
-webkit-transform: rotateZ(24deg);
transform: rotateZ(24deg);
}
.thing:nth-child(3):before, .thing:nth-child(3):after {
animation: thing 0.75s -0.5s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(3):before {
background: rgba(255, 148, 77, 0.1);
animation: thing 1s -0.06667s linear infinite;
}
.thing:nth-child(3):after {
background: rgba(255, 148, 77, 0.75);
}
.thing:nth-child(4) {
-moz-transform: rotateZ(36deg);
-ms-transform: rotateZ(36deg);
-webkit-transform: rotateZ(36deg);
transform: rotateZ(36deg);
}
.thing:nth-child(4):before, .thing:nth-child(4):after {
animation: thing 0.75s -0.75s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(4):before {
background: rgba(255, 184, 77, 0.1);
animation: thing 1s -0.1s linear infinite;
}
.thing:nth-child(4):after {
background: rgba(255, 184, 77, 0.75);
}
.thing:nth-child(5) {
-moz-transform: rotateZ(48deg);
-ms-transform: rotateZ(48deg);
-webkit-transform: rotateZ(48deg);
transform: rotateZ(48deg);
}
.thing:nth-child(5):before, .thing:nth-child(5):after {
animation: thing 0.75s -1s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(5):before {
background: rgba(255, 219, 77, 0.1);
animation: thing 1s -0.13333s linear infinite;
}
.thing:nth-child(5):after {
background: rgba(255, 219, 77, 0.75);
}
.thing:nth-child(6) {
-moz-transform: rotateZ(60deg);
-ms-transform: rotateZ(60deg);
-webkit-transform: rotateZ(60deg);
transform: rotateZ(60deg);
}
.thing:nth-child(6):before, .thing:nth-child(6):after {
animation: thing 0.75s -1.25s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(6):before {
background: rgba(255, 255, 77, 0.1);
animation: thing 1s -0.16667s linear infinite;
}
.thing:nth-child(6):after {
background: rgba(255, 255, 77, 0.75);
}
.thing:nth-child(7) {
-moz-transform: rotateZ(72deg);
-ms-transform: rotateZ(72deg);
-webkit-transform: rotateZ(72deg);
transform: rotateZ(72deg);
}
.thing:nth-child(7):before, .thing:nth-child(7):after {
animation: thing 0.75s -1.5s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(7):before {
background: rgba(219, 255, 77, 0.1);
animation: thing 1s -0.2s linear infinite;
}
.thing:nth-child(7):after {
background: rgba(219, 255, 77, 0.75);
}
.thing:nth-child(8) {
-moz-transform: rotateZ(84deg);
-ms-transform: rotateZ(84deg);
-webkit-transform: rotateZ(84deg);
transform: rotateZ(84deg);
}
.thing:nth-child(8):before, .thing:nth-child(8):after {
animation: thing 0.75s -1.75s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(8):before {
background: rgba(184, 255, 77, 0.1);
animation: thing 1s -0.23333s linear infinite;
}
.thing:nth-child(8):after {
background: rgba(184, 255, 77, 0.75);
}
.thing:nth-child(9) {
-moz-transform: rotateZ(96deg);
-ms-transform: rotateZ(96deg);
-webkit-transform: rotateZ(96deg);
transform: rotateZ(96deg);
}
.thing:nth-child(9):before, .thing:nth-child(9):after {
animation: thing 0.75s -2s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(9):before {
background: rgba(148, 255, 77, 0.1);
animation: thing 1s -0.26667s linear infinite;
}
.thing:nth-child(9):after {
background: rgba(148, 255, 77, 0.75);
}
.thing:nth-child(10) {
-moz-transform: rotateZ(108deg);
-ms-transform: rotateZ(108deg);
-webkit-transform: rotateZ(108deg);
transform: rotateZ(108deg);
}
.thing:nth-child(10):before, .thing:nth-child(10):after {
animation: thing 0.75s -2.25s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(10):before {
background: rgba(112, 255, 77, 0.1);
animation: thing 1s -0.3s linear infinite;
}
.thing:nth-child(10):after {
background: rgba(112, 255, 77, 0.75);
}
.thing:nth-child(11) {
-moz-transform: rotateZ(120deg);
-ms-transform: rotateZ(120deg);
-webkit-transform: rotateZ(120deg);
transform: rotateZ(120deg);
}
.thing:nth-child(11):before, .thing:nth-child(11):after {
animation: thing 0.75s -2.5s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(11):before {
background: rgba(77, 255, 77, 0.1);
animation: thing 1s -0.33333s linear infinite;
}
.thing:nth-child(11):after {
background: rgba(77, 255, 77, 0.75);
}
.thing:nth-child(12) {
-moz-transform: rotateZ(132deg);
-ms-transform: rotateZ(132deg);
-webkit-transform: rotateZ(132deg);
transform: rotateZ(132deg);
}
.thing:nth-child(12):before, .thing:nth-child(12):after {
animation: thing 0.75s -2.75s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(12):before {
background: rgba(77, 255, 112, 0.1);
animation: thing 1s -0.36667s linear infinite;
}
.thing:nth-child(12):after {
background: rgba(77, 255, 112, 0.75);
}
.thing:nth-child(13) {
-moz-transform: rotateZ(144deg);
-ms-transform: rotateZ(144deg);
-webkit-transform: rotateZ(144deg);
transform: rotateZ(144deg);
}
.thing:nth-child(13):before, .thing:nth-child(13):after {
animation: thing 0.75s -3s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(13):before {
background: rgba(77, 255, 148, 0.1);
animation: thing 1s -0.4s linear infinite;
}
.thing:nth-child(13):after {
background: rgba(77, 255, 148, 0.75);
}
.thing:nth-child(14) {
-moz-transform: rotateZ(156deg);
-ms-transform: rotateZ(156deg);
-webkit-transform: rotateZ(156deg);
transform: rotateZ(156deg);
}
.thing:nth-child(14):before, .thing:nth-child(14):after {
animation: thing 0.75s -3.25s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(14):before {
background: rgba(77, 255, 184, 0.1);
animation: thing 1s -0.43333s linear infinite;
}
.thing:nth-child(14):after {
background: rgba(77, 255, 184, 0.75);
}
.thing:nth-child(15) {
-moz-transform: rotateZ(168deg);
-ms-transform: rotateZ(168deg);
-webkit-transform: rotateZ(168deg);
transform: rotateZ(168deg);
}
.thing:nth-child(15):before, .thing:nth-child(15):after {
animation: thing 0.75s -3.5s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(15):before {
background: rgba(77, 255, 219, 0.1);
animation: thing 1s -0.46667s linear infinite;
}
.thing:nth-child(15):after {
background: rgba(77, 255, 219, 0.75);
}
.thing:nth-child(16) {
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.thing:nth-child(16):before, .thing:nth-child(16):after {
animation: thing 0.75s -3.75s ease-in-out infinite alternate-reverse;
}
.thing:nth-child(16):before {
background: rgb.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0