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