zdog实现小船在水中巡航动画效果代码-html代码-BFW代码库

zdog实现小船在水中巡航动画效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现小船在水中巡航动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
	margin: 0;
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	color: hsl(217 57% 45%);
	background: hsl(217 57% 40%);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">\
    <pattern id="p" patternUnits="userSpaceOnUse" width="50" height="10" viewBox="0 0 50 10">\
        <path id="s" fill="none" stroke="hsl(217 60% 38%)" stroke-width="1" d="M 0 2.5 C 7.5 2.5 17.5 -2.5 25 -2.5 C 32.5 -2.5 42.5 2.5 50 2.5" />\
        <use href="%23s" y="5" />\
        <use href="%23s" y="10" />\
    </pattern>\
    <rect width="400" height="200" fill="url(%23p)" /.........完整代码请登录后点击上方下载按钮下载查看