首页

JS特效

CSS3特效

CSS3做的日食动画特效

立即下载预览

<头>
<元字符集=“utf-8”>
新颖的CSS3日食动画效果

<风格>
html, 正文 {
宽度：100%；
溢出-x：隐藏；
}

*, *:之前, *:之后 {
框大小：边框框；
边距：0；
填充：0;
}

。宇宙 {＃＃＃宽度：100vw；
高度：100vh；
背景：#030613;
显示：块；
位置：相对；
-webkit-animation：skyDim 4s 8s 线性向前；
动画：skyDim 4s 8s 线性向前；
}

.universe:在{
之前内容： ””;＃＃＃框阴影：10vw 1vh #fff、14vw 29vh 2px #FFF、23vw 34vh 1px #FFF、1vw 99vh 1px #FFF、20vw 80vh #FFF、90vw 10vh 2px #fff、55vw 9vh #FFF、24vw 4vh 1px #FFF，50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
宽度：4px；
高度：4px；
位置：绝对；
边界半径：50%；
-webkit-animation: starsFloating 100s -200s 线性既无限;
动画：星星浮动100s -200s 线性既无限；
}

.universe:{
之后内容： ””;＃＃＃框阴影：37vw 78vh #fff、17vw 69vh #FFF、68vw 4vh 1px #FFF、98vw 9vh 1px #FFF、45vw 67vh #FFF、95vw 1vh 2px #fff、35vw 75vh 2px #FFF、44vw 47vh 1像素#FFF，54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
宽度：2px；
高度：2px；
位置：绝对；
边界半径：50%；
-webkit-animation: starsFloating 100s 3s 线性向后无限;
动画：starsFloating 100s 3s 线性向后无限；
}

。太阳 {＃＃＃高度：200px；
宽度：200px；
边界半径：50%；
背景：#cfcfd4;
框阴影：0 0 60px 金色，0 0 100px #b9a018，插图 0 5px 35px 53px #dbdbdb，插图 48px 8px 34px 25px #c4c4c4;
左：计算(50% - 100px);
顶部：计算(50% - 100px);
位置：绝对；
-webkit-animation：sunFreakOut 5s 7.1s 线性前进；
动画：sunFreakOut 5s 7.1s 线性前进；
}

。月亮 {＃＃＃高度：50px；
宽度：50px；
边界半径：50%；
背景：rgba(0,0,0,0.99);
框阴影：插图 5px 1px 10px -8px #d4d4d6;
-webkit-transition: 1s;
转换：1s；
顶部：计算(40% - 100px);
位置：绝对；
z 索引：5；
-webkit-animation：向前移动 20 秒的缓入缓出；
动画：向前移动 20 秒缓入缓出；
}

@-webkit-keyframes 移动 {
0% {
# -webkit-transform：translateX(100vw);
变换：translateX(100vw);
}
40%, 60% {
顶部：计算(50% - 100px);
}
50%, 50.5% {
宽度：200px；
高度：200px；
-webkit-transform：translateX(calc(50vw - 100px));
变换：translateX(calc(50vw - 100px));
框阴影：插图 20px 1px 35px -15px #d4d4d6;
顶部：计算(50% - 100px);
}
60% {
# 框阴影：插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度：50px；
高度：50px；
-webkit-transform：translateX(calc(-1vw - 60px));
变换：translateX(calc(-1vw - 60px));
顶部：计算(40% - 100px);
框阴影：插入 -5px 1px 10px -8px #d4d4d6;
}
}

@关键帧移动{
0% {
# -webkit-transform：translateX(100vw);
变换：translateX(100vw);
}
40%, 60% {
顶部：计算(50% - 100px);
}
50%, 50.5% {
宽度：200px；
高度：200px；
-webkit-transform：translateX(calc(50vw - 100px));
变换：translateX(calc(50vw - 100px));
框阴影：插图 20px 1px 35px -15px #d4d4d6;
顶部：计算(50% - 100px);
}
60% {
# 框阴影：插图 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 宽度：50px；
高度：50px；
-webkit-transform：translateX(calc(-1vw - 60px));
变换：translateX(calc(-1vw - 60px));
顶部：计算(40% - 100px);
框阴影：插入 -5px 1px 10px -8px #d4d4d6;
}
}
@-webkit-keyframes skyDim {
0%, 100% {
背景：#030613;
}
50%, 70% {
背景：黑色；
}
}
@keyframes skyDim {
0%, 100% {
背景：#030613;
}
50%, 70% {
背景：黑色；
}
}
@-webkit-keyframes sunFreakOut {
0%, 100% {
框阴影：0 0 60px 金色，0 0 100px #b9a018，插图 0 5px 35px 53px #dbdbdb，插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影：0 0 50px #e30000，0 0 0px #b91818，插图 0 5px 35px 53px #dbdbdb，插图 48px 8px 34px 25px #c4c4c4;
}
}
@keyframes sunFreakOut {
0%, 100% {
框阴影：0 0 60px 金色，0 0 100px #b9a018，插图 0 5px 35px 53px #dbdbdb，插图 48px 8px 34px 25px #c4c4c4;
}
50%, 70% {
框阴影：0 0 50px #e30000，0 0 0px #b91818，插图 0 5px 35px 53px #dbdbdb，插图 48px 8px 34px 25px #c4c4c4;
}
}
@-webkit-keyframes starFloating {
0% {
# 不透明度：0；
}
10% {
# 不透明度：1；
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换：translateY(-100vh);
}
}
@keyframes starFloating {
0% {
# 不透明度：0；
}
10% {
# 不透明度：1；
}
100% {
# -webkit-transform: 翻译Y(-100vh);
变换：translateY(-100vh);
}
}
</风格>
</头>