css模拟船只在海洋中扬帆起航海水波光粼粼动画效果代码
代码语言:html
所属分类:背景
代码描述:css模拟船只在海洋中扬帆起航海水波光粼粼动画效果代码
代码标签: 只在 海洋 中 扬帆 起航 海水 波光粼粼 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{margin:0 auto;} svg{position:absolute;} </style> <style> .ocean{ position:absolute; height:100%; width:100%; top:50%; left:50%; transform:translate(-50%,-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cfilter id='filter-eri793pwz'%3E%3CfeTurbulence baseFrequency='0.05' numOctaves='4'/%3E%3CfeColorMatrix class='anim' type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='360' dur='5s' repeatCount='indefinite'/%3E%3C/feColorMatrix%3E%3CfeColorMatrix values='0.2 -2 -2.3 4.1 -2.6 2.2 -1.4 2.9 -2.5 -2.4 -2.2 -3.2 4.4 -0.6 3 -4.4 2.3 -4.1 1.4 1.8'/%3E%3CfeSpecularLighting result='specOut' specularExponent='60' lighting-color='rgb(35,100,218)'%3E%3CfePointLight id='pointLight' x='200' y='200' z='30'%3E%3C/fePointLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25.........完整代码请登录后点击上方下载按钮下载查看
网友评论0