css实现万圣节巫婆施法动画效果代码
代码语言：html
所属分类：布局界面
代码描述：css实现万圣节巫婆施法动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
body {
background: #500d78;
display: flex;
align-items: center;
justify-content: center;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.container {
width: 820px;
height: 620px;
overflow: hidden;
}
.shelf-one,
.shelf-two,
.shelf-three {
width: 220px;
height: 20px;
top: 220px;
right: 50px;
z-index: 3;
}
.shelf-one .shelf:after {
width: 30%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 50px 0 0;
bottom: 0;
opacity: 0.1;
z-index: 3;
}
.shelf-one .shelf:before {
width: 90%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 100px 0 0;
bottom: 0;
opacity: 0.1;
z-index: 2;
}
.shelf-two {
top: 340px;
}
.shelf-two .shelf:after {
width: 15%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 100% 0 0;
bottom: 0;
opacity: 0.4;
z-index: 3;
}
.shelf-two .shelf:before {
width: 70%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 40px 0 0;
bottom: 0;
z-index: 2;
opacity: 0.2;
}
.shelf-three {
top: 460px;
}
.shelf-three .shelf:after {
width: 27%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 5px 0 0;
bottom: 0;
opacity: 0.4;
z-index: 3;
}
.shelf-three .shelf:before {
width: 80%;
height: 100%;
background-color: #8f65a9;
border-radius: 0px 5px 0 0;
bottom: 0;
opacity: 0.2;
z-index: 2;
}
.shelf {
width: 220px;
height: 20px;
top: 0px;
right: 0px;
z-index: 2;
}
.shelf .base {
width: 100%;
height: 100%;
border-radius: 2px;
background-color: #3a0956;
}
.shelf .shelf-hooks {
background-color: #1c0526;
background: linear-gradient(to right, #3a0956 0%, #3a0956 50%, #1c0526 50%, #1c0526 100%);
right: 15px;
height: 20px;
width: 14px;
z-index: -1;
top: 100%;
border-radius: 0 0 5px 5px;
}
.shelf .shelf-hooks:after {
width: 100%;
height: 100%;
right: 176px;
background: linear-gradient(to right, #500d78 0%, #500d78 50%, #1c0526 50%, #1c0526 100%);
border-radius: 0 0 5px 5px;
}
.bottle {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.bottle .bowl {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #E6EFF2;
overflow: hidden;
}
.bottle .bowl:after {
background-color: #A8DCEA;
}
.bottle .bowl-in {
width: 88%;
height: 88%;
left: 6%;
bottom: 6%;
border-radius: 50%;
overflow: hidden;
z-index: 2;
}
.bottle .liquid {
width: 100%;
height: 70%;
bottom: 0;
background-color: #500d78;
}
.bottle .liquid:after {
background-color: #3a0956;
}
.bottle .liquid .bottle-bubble {
border-radius: 20px;
width: 5px;
height: 5px;
top: 14px;
left: 2px;
background-color: #6c11a1;
z-index: 2;
}
.bottle .liquid .bottle-bubble:nth-child(2) {
top: 3px;
left: 10px;
width: 7px;
height: 7px;
}
.bottle .liquid .bottle-bubble:nth-child(3) {
top: 6px;
left: 25px;
width: 5px;
height: 5px;
}
.bottle .liquid .bottle-bubble:nth-child(4) {
top: 17px;
left: 30px;
width: 5px;
height: 5px;
}
.bottle .liquid .bottle-bubble:nth-child(5) {
top: -4px;
left: 30px;
width: 8px;
height: 8px;
background-color: #3a0956;
}
.bottle .bottle-reflection {
opacity: 0.5;
border-radius: 0px 0px 0px 50px;
border: 6px solid #feffff;
border-top: 0;
border-right: 0;
width: 18px;
height: 18px;
bottom: 5px;
left: 5px;
z-index: 10;
}
.bottle .bottle-reflection:after {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #feffff;
bottom: 10px;
left: -6px;
box-shadow: 15px 16px #feffff;
}
.bottle-1 {
bottom: 20px;
left: 35%;
width: 50px;
height: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.bottle-1 *:after {
width: 50%;
height: 100%;
right: 0;
}
.bottle-1 .bottle-neck {
width: 12px;
height: 20px;
top: -16px;
left: 19px;
background-color: #E6EFF2;
}
.bottle-1 .bottle-neck:after {
background-color: #A8DCEA;
}
.bottle-1 .bottle-neck:before {
background-color: #feffff;
height: 80%;
width: 30%;
left: 12%;
border-radius: 3px;
z-index: 2;
opacity: 0.5;
}
.bottle-1 .bottle-top {
width: 24px;
height: 7px;
top: -23px;
left: 13px;
border-radius: 5px;
background-color: #E6EFF2;
}
.bottle-1 .bottle-top:after {
background-color: #A8DCEA;
border-radius: 0 5px 5px 0;
}
.crystal-ball {
left: 10px;
bottom: 20px;
width: 60px;
height: 60px;
}
.crystal-ball .stand {
z-index: 2;
width: 50px;
left: 5px;
height: 10px;
border-radius: 3px;
background-color: #E6EFF2;
background: linear-gradient(to right, #E6EFF2 0%, #E6EFF2 50%, #A8DCEA 50%, #A8DCEA 100%);
bottom: 0;
}
.crystal-ball .stand:after {
width: 40px;
left: 5px;
height: 7px;
border-radius: 2px;
bottom: 9px;
background: linear-gradient(to right, #A8DCEA 0%, #A8DCEA 50%, #92BFCC 50%, #92BFCC 100%);
}
.crystal-ball .ball {
border-radius: 50%;
width: 56px;
height: 56px;
left: 2px;
top: -6px;
background-color: #f495f0;
overflow: hidden;
}
.crystal-ball .ball:after {
width: 50%;
height: 100%;
right: 0;
background-color: #f175eb;
}
.crystal-ball .ball .ball-highlight {
opacity: 0.5;
border-radius: 0px 0px 0px 50px;
border: 6px solid #feffff;
border-top: 0;
border-right: 0;
width: 18px;
height: 18px;
bottom: 10px;
left: 7px;
z-index: 10;
}
.crystal-ball .ball .ball-highlight:after {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #feffff;
bottom: 10px;
left: -6px;
box-shadow: 15px 16px #feffff;
}
.drippings {
width: 30px;
height: 12px;
background-color: #3EBCBC;
left: 58%;
border-radius: 3px;
top: -1px;
z-index: 15;
}
.drippings:after {
width: 8px;
height: 18px;
border-radius: 3px;
background-color: #3EBCBC;
top: 8px;
right: 0px;
}
.drippings .drip {
width: 8px;
height: 12px;
border-radius: 3px;
background-color: #3EBCBC;
top: 10px;
right: 0px;
-webkit-animation: drip 5s ease-in infinite;
animation: drip 5s ease-in infinite;
}
.bottle-3 {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
bottom: 70px;
left: 73%;
width: 50px;
height: 50px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.bottle-3 *:after {
width: 50%;
height: 100%;
right: 0;
}
.bottle-3 .bowl {
width: 80%;
height: 80%;
left: 0px;
border-radius: 5px;
background-color: #E6EFF2;
overflow: hidden;
}
.bottle-3 .bowl:after {
background-color: #A8DCEA;
width: 20%;
}
.bottle-3 .bowl:before {
z-index: 3;
width: 20px;
height: 8px;
border-radius: 10px;
background-color: #feffff;
opacity: 0.4;
left: 5px;
top: 6px;
}
.bottle-3 .bowl .bowl-in {
border-radius: 5px;
}
.bottle-3 .bowl .liquid {
height: 100%;
width: 38%;
bottom: 0;
left: 0;
background-color: #3EBCBC;
z-index: 2;
}
.bottle-3 .bowl .liquid:after {
background-color: #3EBCBC;
}
.bottle-3 .bottle-neck {
width: 10px;
height: 10px;
top: -10px;
left: 15px;
background-color: #E6EFF2;
}
.bottle-3 .bottle-neck:after {
background-color: #A8DCEA;
}
.bottle-3 .bottle-top {
width: 14px;
height: 7px;
top: -16px;
left: 13px;
border-radius: 5px;
background-color: #E6EFF2;
}
.bottle-3 .bottle-top:after {
background-color: #A8DCEA;
border-radius: 0 5px 5px 0;
}
.skull {
width: 60px;
height: 60px;
bottom: 100%;
right: 12%;
}
.skull .head {
width: 100%;
height: 100%;
border-radius: 30px 30px 18px 18px;
background-color: #feffff;
overflow: hidden;
}
.skull .head .skull-stain {
width: 40px;
height: 20px;
left: -2px;
top: -5px;
border-radius: 10px;
background-color: #3EBCBC;
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
}
.skull .head .skull-stain:before {
width: 10px;
height: 20px;
border-radius: 5px;
background-color: #3EBCBC;
top: 12px;
left: 6px;
}
.skull .head:before {
width: 50%;
height: 100%;
right: 0;
background-color: rgba(20, 1, 30, 0.15);
}
.skull .eye {
left: 15%;
top: 37%;
background-color: #14011e;
width: 17px;
height: 24px;
border-radius: 20px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.skull .eye:after {
background-color: #ee8228;
width: 8px;
height: 8px;
border-radius: 10px;
top: 8px;
left: 4px;
box-shadow: 0 0 2px #ee8228, 0 0 6px #ee8228;
-webkit-animation: eyes 15s linear infinite;
animation: eyes 15s linear infinite;
}
.skull .eye:nth-child(2) {
left: auto;
right: 15%;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.skull .nose {
top: 76%;
left: 40%;
background-color: #14011e;
width: 5px;
height: 10px;
border-radius: 10px;
box-shadow: 7px 0 #14011e;
}
.skull .teeth {
background-color: #feffff;
width: 60%;
height: 10px;
top: 92%;
left: 20%;
border-radius: 5px;
}
.skull .teeth:before {
width: 50%;
height: 100%;
right: 0;
background-color: rgba(20, 1, 30, 0.15);
}
.skull .tooth {
top: 50%;
width: 8px;
height: 10px;
background-color: #feffff;
border-radius: 2px;
}
.skull .tooth:after {
height: 100%;
right: 0;
}
.skull .tooth:nth-child(2) {
left: 14px;
}
.skull .tooth:nth-child(2):after {
width: 50%;
background-color: rgba(20, 1, 30, 0.15);
}
.skull .tooth:nth-child(3) {
left: 28px;
}
.skull .tooth:nth-child(3):after {
width: 100%;
background-color: rgba(20, 1, 30, 0.15);
}
.candles {
width: 50%;
height: 40px;
bottom: 10px;
left: 15%;
}
.candle {
width: 30px;
height: 30px;
background-color: #ee8228;
}
.candle:after {
width: 50%;
height: 100%;
right: 0;
background-color: #d16d1b;
}
.candle:before {
z-index: -1;
border-radius: 50%;
width: 50px;
height: 50px;
bottom: 40px;
left: -10px;
background-color: #f5b987;
opacity: 0.2;
}
.candle .candle-reflection {
width: 8px;
height: 24px;
background-color: #fdf0e5;
opacity: 0.4;
border-radius: 6px;
left: 0px;
bottom: 5px;
}
.candle .candle-wax {
background-color: #f9d4b6;
border-radius: 6px;
width: 120%;
left: -10%;
height: 10px;
top: -10px;
z-index: 2;
}
.candle .candle-wax .wax-reflection-top {
width: 20px;
height: 8px;
border-radius: 4px;
background-color: #fdf0e5;
opacity: 0.8;
left: 0px;
top: 0px;
z-index: 4;
}
.candle .candle-wax .wax-reflection {
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #fdf0e5;
opacity: 0.8;
left: 3px;
top: 20px;
z-index: 4;
}
.candle .candle-wax:after {
width: 8px;
height: 20px;
background-color: #f9d4b6;
border-radius: 6px;
left: 3px;
top: 5px;
}
.candle .candle-wax:before {
width: 8px;
height: 12px;
background-color: #f9d4b6;
border-radius: 6px;
right: 10px;
top: 5px;
}
.candle .flame {
width: 24px;
height: 24px;
bottom: 150%;
left: 3px;
-webkit-animation: flicker 15s linear infinite;
animation: flicker 15s linear infinite;
}
.candle .flame .flame-in {
width: 100%;
height: 100%;
background-color: #ee8228;
border-radius: 0 50% 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: flame 2s linear infinite;
animation: flame 2s linear infinite;
}
.candle .flame .flame-in:before {
border-radius: 0 50% 50%;
background-color: #f5b987;
height: 70%;
width: 70%;
bottom: 0%;
left: 30%;
}
.candle:nth-child(2) {
left: 50px;
height: 40px;
bottom: 10px;
}
.candle:nth-child(2):before {
bottom: 50px;
}
.candle:nth-child(2) .flame {
bottom: 140%;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.spider-group {
width: 40px;
height: 80px;
right: 80px;
top: 20px;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.spider-group .thread {
width: 1px;
height: 50px;
top: -4px;
right: 0;
background-color: #feffff;
}
.spider-group .spider {
border-radius: 50%;
width: 22px;
height: 22px;
top: 35px;
right: -11px;
background-color: #ee8228;
-webkit-animation: spider 5s ease infinite;
animation: spider 5s ease infinite;
background: linear-gradient(to right, #ee8228 0%, #ee8228 50%, #d26911 50%, #d26911 100%);
}
.spider-group .spider:before {
border-radius: 50%;
width: 16px;
height: 16px;
top: -8px;
right: 3px;
background-color: #ee8228;
background: linear-gradient(to right, #ee8228 0%, #ee8228 50%, #d26911 50%, #d26911 100%);
}
.spider-group .spider:after {
background-color: #fdf0e5;
width: 12px;
height: 12px;
border-radius: 50%;
left: 2px;
top: 5px;
opacity: 0.3;
}
.spider-group .spider .spider-leg {
width: 7px;
height: 3px;
right: -5px;
top: 8px;
background-color: #d26911;
border-radius: 1px;
}
.spider-group .spider .spider-leg:after {
width: 7px;
height: 3px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
background-color: #d26911;
border-radius: 1px;
right: -5px;
top: 2px;
}
.spider-group .spider .spider-leg:nth-child(2) {
top: 1px;
right: -4px;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.spider-group .spider .spider-leg:nth-child(3) {
top: 15px;
right: -4px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.spider-group .spider .spider-leg:nth-child(4),
.spider-group .spider .spider-leg:nth-child(5),
.spider-group .spider .spider-leg:nth-child(6) {
background-color: #ee8228;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
right: 21px;
}
.spider-group .spider .spider-leg:nth-child(4):after,
.spider-group .spider .spider-leg:nth-child(5):after,
.spider-group .spider .spider-leg:nth-child(6):after {
background-color: #ee8228;
}
.spider-group .spider .spider-leg:nth-child(5) {
-webkit-transform: scaleX(-1) rotate(-25deg);
transform: scaleX(-1) rotate(-25deg);
top: 1px;
right: 18px;
}
.spider-group .spider .spider-leg:nth-child(6) {
-webkit-transform: scaleX(-1) rotate(35deg);
transform: scaleX(-1) rotate(35deg);
top: 15px;
right: 20px;
}
.books {
bottom: 18px;
left: 10px;
height: 60px;
width: 120px;
}
.books .book {
height: 24px;
width: 60px;
background-color: #faf1c5;
bottom: 2px;
border-radius: 8px 0 0 8px;
}
.books .book:before {
height: 4px;
width: 94%;
bottom: 5px;
left: 4px;
background-color: #d5cda8;
}
.books .book:after {
width: 105%;
height: 100%;
border: 5px solid #c237bb;
border-right: 0;
border-radius: 8px 0 0 8px;
}
.books .book .details {
width: 60%;
height: 1px;
background-color: rgba(219, 77, 39, 0.3);
top: 8px;
left: 4px;
box-shadow: 20px 4px rgba(219, 77, 39, 0.3);
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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