css实现波浪动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现波浪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> html, body { height: 100%; } body { background: radial-gradient(ellipse at center, #fffeea 0%, #fffeea 35%, #B7E8EB 100%); overflow: hidden; } .ocean { height: 5%; width: 100%; position: absolute; bottom: 0; left: 0; background: #015871; } .wave { background: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSIxOTgiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iNTAlIiB4Mj0iNTAlIiB5MT0iLTEwLjk1OSUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzU3QkJDMSIgc3RvcC1vcGFjaXR5PSIuMjUiIG9mZnNldD0iMCUiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAxNTg3MSIgb2Zmc2V0PSIxMDAlIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cGF0aCBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0uMDA1IDEyMUMzMTEgMTIxIDQwOS44OTgtLjI1IDgxMSAwYzQwMCAwIDUwMCAxMjEgNzg5IDEyMXY3N0gwcy4wMDUtNDggLjAwNS03N3oiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE2MDAgMCkiLz4KPC9zdmc+Cg==) repeat-x; position: absolute; top: -198px; width: 6400px; height: 198px; -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0