div+css实现蝴蝶效应动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现蝴蝶效应动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: black;
}
.wrap {
width: 100vh;
height: 80vh;
margin: 8vh auto;
}
.left, .right {
width: 50%;
height: 100%;
position: absolute;
overflow: hidden;
}
.left:before, .right:before {
content: "";
display: block;
width: 80px;
height: 150px;
border-radius: 50%;
border-left: 3px solid #FFF;
position: absolute;
top: 15%;
-webkit-transform: rotate(30deg) translateX(-20px);
transform: rotate(30deg) translateX(-20px);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.left {
left: 0;
-webkit-transform: scaleX(-1) translateX(100%);
transform: scaleX(-1) translateX(100%);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.right {
right: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.circle {
position: absolute;
bottom: 65%;
left: -5vh;
width: 10vh;
height: 10vh;
border-radius: 50%;
border: 1px solid #6e7fca;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.circle:nth-child(1) {
-webkit-animation: anim 30s 0.5s linear infinite;
animation: anim 30s 0.5s linear infinite;
}
.circle:nth-child(2) {
-webkit-animation: anim 30s 1s linear infinite;
animation: anim 30s 1s linear infinite;
}
.circle:nth-child(3) {
-webkit-animation: anim 30s 1.5s linear infinite;
animation: anim 30s 1.5s linear infinite;
}
.circle:nth-child(4) {
-webkit-animation: anim 30s 2s linear infinite;
animation: anim 30s 2s linear infinite;
}
.circle:nth-child(5) {
-webkit-animation: anim 30s 2.5s linear infinite;
animation: anim 30s 2.5s linear infinite;
}
.circle:nth-child(6) {
-webkit-animation: anim 30s 3s linear infinite;
animation: anim 30s 3s linear infinite;
}
.circle:nth-child(7) {
-webkit-animation: anim 30s 3.5s linear infinite;
animation: anim 30s 3.5s linear infinite;
}
.circle:nth-child(8) {
-webkit-animation: anim 30s 4s linear infinite;
animation: anim 30s 4s linear infinite;
}
.circle:nth-child(9) {
-webkit-animation: anim 30s 4.5s linear infinite;
animation: anim 30s 4.5s linear infinite;
}
.circle:nth-child(10) {
-webkit-animation: anim 30s 5s linear infinite;
animation: anim 30s 5s linear infinite;
}
.circle:nth-child(11) {
-webkit-animation: anim 30s 5.5s linear infinite;
animation: anim 30s 5.5s linear infinite;
}
.circle:nth-child(12) {
-webkit-animation: anim 30s 6s linear infinite;
animation: anim 30s 6s linear infinite;
}
.circle:nth-child(13) {
-webkit-animation: anim 30s 6.5s linear infinite;
animation: anim 30s 6.5s linear infinite;
}
.circle:nth-child(14) {
-webkit-animation: anim 30s 7s linear infinite;
animation: anim 30s 7s linear infinite;
}
.circle:nth-child(15) {
-webkit-animation: anim 30s 7.5s linear infinite;
animation: anim 30s 7.5s linear infinite;
}
.circle:nth-child(16) {
-webkit-animation: anim 30s 8s linear infinite;
animation: anim 30s 8s linear infinite;
}
.circle:nth-child(17) {
-webkit-animation: anim 30s 8.5s linear infinite;
animation: anim 30s 8.5s linear infinite;
}
.circle:nth-child(18) {
-webkit-animation: anim 30s 9s linear infinite;
animation: anim 30s 9s linear infinite;
}
.circle:nth-child(19) {
-webkit-animation: anim 30s 9.5s linear infinite;
animation: anim 30s 9.5s linear infinite;
}
.circle:nth-child(20) {
-webkit-animation: anim 30s 10s linear infinite;
animation: anim 30s 10s linear infinite;
}
.circle:nth-child(21) {
-webkit-animation: anim 30s 10.5s linear infinite;
animation: anim 30s 10.5s linear infinite;
}
.circle:nth-child(22) {
-webkit-animation: anim 30s 11s linear infinite;
animation: anim 30s 11s linear infinite;
}
.circle:nth-child(23) {
-webkit-animation: anim 30s 11.5s linear infinite;
animation: anim 30s 11.5s linear infinite;
}
.circle:nth-child(24) {
-webkit-animation: anim 30s 12s linear infinite;
animation: anim 30s 12s linear infinite;
}
.circle:nth-child(25) {
-webkit-animation: anim 30s 12.5s linear infinite;
animation: anim 30s 12.5s linear infinite;
}
.circle:nth-child(26) {
-webkit-animation: anim 30s 13s linear infinite;
animation: anim 30s 13s linear infinite;
}
.circle:nth-child(27) {
-webkit-animation: anim 30s 13.5s linear infinite;
animation: anim 30s 13.5s linear infinite;
}
.circle:nth-child(28) {
-webkit-animation: anim 30s 14s linear infinite;
animation: anim 30s 14s linear infinite;
}
.circle:nth-child(29) {
-webkit-animation: anim 30s 14.5s linear infinite;
animation: anim 30s 14.5s linear infinite;
}
.circle:nth-child(30) {
-webkit-animation: anim 30s 15s linear infinite;
animation: anim 30s 15s linear infinite;
}
.circle:nth-child(31) {
-webkit-animation: anim 30s 15.5s linear infinite;
animation: anim 30s 15.5s linear infinite;
}
.circle:nth-child(32) {
-webkit-animation: anim 30s 16s linear infinite;
animation: anim 30s 16s linear infinite;
}
.circle:nth-child(33) {
-webkit-animation: anim 30s 16.5s linear infinite;
animation: anim 30s 16.5s linear infinite;
}
.circle:nth-child(34) {
-webkit-animation: anim 30s 17s linear infinite;
animation: anim 30s 17s linear infinite;
}
.circle:nth-child(35) {
-webkit-animation: anim 30s 17.5s linear infinite;
animation: anim 30s 17.5s linear infinite;
}
.circle:nth-child(36) {
-webkit-animation: anim 30s 18s linear infinite;
animation: anim 30s 18s linear infinite;
}
.circle:nth-child(37) {
-webkit-animation: anim 30s 18.5s linear infinite;
animation: anim 30s 18.5s linear infinite;
}
.circle:nth-child(38) {
-webkit-animation: anim 30s 19s linear infinite;
animation: anim 30s 19s linear infinite;
}
.circle:nth-child(39) {
-webkit-animation: anim 30s 19.5s linear infinite;
animation: anim 30s 19.5s linear infinite;
}
.circle:nth-child(40) {
-webkit-animation: anim 30s 20s linear infinite;
animation: anim 30s 20s linear infinite;
}
.circle:nth-child(41) {
-webkit-animation: anim 30s 20.5s linear infinite;
animation: anim 30s 20.5s linear infinite;
}
.circle:nth-child(42) {
-webkit-animation: anim 30s 21s linear infinite;
animation: anim 30s 21s linear infinite;
}
.circle:nth-child(43) {
-webkit-animation: anim 30s 21.5s linear infinite;
animation: anim 30s 21.5s linear infinite;
}
.circle:nth-child(44) {
-webkit-animation: anim 30s 22s linear infinite;
animation: anim 30s 22s linear infinite;
}
.circle:nth-child(45) {
-webkit-animation: anim 30s 22.5s linear infinite;
animation: anim 30s 22.5s linear infinite;
}
.circle:nth-child(46) {
-webkit-animation: anim 30s 23s linear infinite;
animation: anim 30s 23s linear infinite;
}
.circle:nth-child(47) {
-webkit-animation: anim 30s 23.5s linear infinite;
animation: anim 30s 23.5s linear infinite;
}
.circle:nth-child(48) {
-webkit-animation: anim 30s 24s linear infinite;
animation: anim 30s 24s linear infinite;
}
.circle:nth-child(49) {
-webkit-animation: anim 30s 24.5s linear infinite;
animation: anim 30s 24.5s linear infinite;
}
.circle:nth-child(50) {
-webkit-animation: anim 30s 25s linear infinite;
animation: anim 30s 25s linear infinite;
}
.circle:nth-child(51) {
-webkit-animation: anim 30s 25.5s linear infinite;
animation: anim 30s 25.5s linear infinite;
}
.circle:nth-child(52) {
-webkit-animation: anim 30s 26s linear infinite;
animation: anim 30s 26s linear infinite;
}
.circle:nth-child(53) {
-webkit-animation: anim 30s 26.5s linear infinite;
animation: anim 30s 26.5s linear infinite;
}
.circle:nth-child(54) {
-webkit-animation: anim 30s 27s linear infinite;
animation: anim 30s 27s linear infinite;
}
.circle:nth-child(55) {
-webkit-animation: anim 30s 27.5s linear infinite;
animation: anim 30s 27.5s linear infinite;
}
.circle:nth-child(56) {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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