div+css实现广阔无边一望无际的大海效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现广阔无边一望无际的大海效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } .sky { background-image: linear-gradient(#69f, #fff); bottom: 50%; left: 0; position: fixed; right: 0; top: 0; } .sea { background-image: linear-gradient(#7ad, #25a); bottom: 0; left: 0; position: fixed; right: 0; top: 50%; } .sea > div { animation: tide 12s infinite ease-out; height: 100%; opacity: 0; position: absolute; width: 100%; } .sea .wave1, .sea .wave2, .sea wave3 { background-image: linear-gradient(transparent, #036, transparent); } .sea .wave1 { animation-delay: 2s; } .sea .wave2 { animation-delay: 6s; } .sea .wave3 { animation-delay: 10s; } .sea .wave4, .sea wave5, .sea .wave6 { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0