纯css模拟日食全过程动画效果
代码语言:html
所属分类:动画
代码描述:纯css模拟日食全过程动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #82B1FF; -webkit-animation: dayAndNight 6s linear infinite; animation: dayAndNight 6s linear infinite; } .eclipse { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px; border-radius: 50%; } .eclipse.sun { z-index: 0; background-color: #FFAD00; -webkit-animation: shadow 6s linear infinite; animation: shadow 6s linear infinite; } .eclipse.moon { z-index: 1; -webkit-animation: eclipse 6s linear infinite; animation: eclipse 6s linear infinite; } @-webkit-keyframes eclipse { 0% { left: 250px; background-color: #82B1FF; } 45%, 60% { left: 0; background-color: #04101C; } 100% { left: -250.........完整代码请登录后点击上方下载按钮下载查看
网友评论0