最新评论 - 第 38 页

广西南宁市 2018-01-06 17:12

#0

阅读 33.8万

CSS3实现垂直居中

<style>
.prm {
	width:300px;
	height:300px;
	background:green;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
</style>
<div class="pr" style="display:none">
	<p class="c">单行居中 单行居中</p>
</div>

<div class="prm">
	<p class="c">
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
	</p>
</div>

查看文章跳到评论

广西南宁市 2018-01-06 11:23

#0

阅读 103.5万

免费ssl证书：网站域名使用 https (nginx) 访问配置参考

微信小程序TLS版本必须大于等于1.2

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\Multi-Protocol Unified Hello]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\Multi-Protocol Unified Hello\Client]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\Multi-Protocol Unified Hello\Server]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\PCT 1.0]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\PCT 1.0\Client]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\PCT 1.0\Server]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Client]
"DisabledByDefault"=dword:00000001
"Enabled"=dword:00000000

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Server]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 3.0]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 3.0\Client]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 3.0\Server]
"Enabled"=dword:00000000
"DisabledByDefault"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.0]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.0\Client]
"Enabled"=dword:00000001
"DisabledByDefault"=dword:00000000

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.0\Server]
"Enabled"=dword:00000001
"DisabledByDefault"=dword:00000000

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.1]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.1\Client]
"DisabledByDefault"=dword:00000000
"Enabled"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.1\Server]
"DisabledByDefault"=dword:00000000
"Enabled"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2]

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client]
"DisabledByDefault"=dword:00000000
"Enabled"=dword:00000001

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server]
"Enabled"=dword:00000001
"DisabledByDefault"=dword:00000000

双击执行，重启服务器 TLS1.2.reg

查看文章跳到评论

广西南宁市 2018-01-05 12:22

#0

阅读 434万

微信小程序开发笔记

点击切换

var App = getApp();

// pages/about/about.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "content": '广西南宁共振广告有限公司，2008年成立于南宁，是一家以“品牌咨询+品牌设计+品牌策划+品牌落地”于一体的品牌服务平台，通过360°全景式纵深品牌打造，从品牌标识设计、VI设计、空间设计、包装、海报等多维度构建完善的品牌价值链，致力于以实战服务中国企业，以品牌推动中国成长。公司创立至今，已是当之无愧的品牌实战专家，客户涵盖国内外地产、金融、IT、汽车、服装时尚、奢侈品、能源、机械、快速消费品等各行业著名的企业，深受客户信赖。我们坚持以实力深耕市场，力求达成艺术与商业之间、客户与市场之间、虚拟与现实之间的价值共生，将企业打造成为一个能为客户提供综合化',
    "content2": '更换内容21321',
    "content3": '2222222222222更换内容21321',
    radioCheckVal: 0,
    all: [{
      one: "公司介绍",
      two: '../../images/ab2.gif',
      two1: '../../images/ab5.gif'
    }, {
        one: "公司理念",
        two: '../../images/ab3.gif',
        two1: '../../images/ab4.gif'
      }, 
    {
      one: "核心优势",
      two: '../../images/ab4.gif',
      two1: '../../images/ab3.gif'
    },
     {
       one: "公司使命",
       two: '../../images/ab5.gif',
       two1: '../../images/ab2.gif'
    }],
    oall:{

    }


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    App.editTabBar(this);

    this.setData({
      "oall": this.data.all
    })//保存初始图片数据 2018.01.05


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  //更换内容
  getnewcontent:function(n){
    var cc = (n.currentTarget.dataset.c);
    var ncc ='content'+cc;
   // var adata =''; 
    var id = n.currentTarget.dataset.id; //打印可以看到，此处已获取到了包含id、title、和content的对象
    

    var that = this;
    

    //var two = all[id].two = all[id].two1;
    

    this.setData({
      "all":this.data.oall
    },function(){
      that.data.all[id].two = that.data.all[id].two1;
      //console.log(that.data.all);
      var all = that.data.all;
      that.setData({
        "content": that.data[ncc],
        "all": all,
        "id": id
      })
    });
    

    

    
  }

})

广西南宁市2018-01-05 12:22:56

<!-------------banner 开始-------------->
<image style='width:100%;' src='../../images/ab0.png' mode="widthFix" ></image>
<!-------------banner 结束-------------->


<view class="about" style="background:url('https://hhh.liangtianmei.com/images/bjjj.png');">
  <!-------------标题 开始-------------->
  <view class='title'>
    <view class='zuo'>
      <view class='xian'></view>
      <view class='yuan'>●</view>
    </view>

    <view class='wz'>
      <text class='yw'>ABOUT SU\n</text>
      <text class='zw'>关于我们\n</text>
    </view>

    <view class='you'>
      <view class='yuan'>●</view>
      <view class='xian'></view>
    </view>
  </view>
  <!-------------标题 结束-------------->

  <!-------------导航 开始-------------->
    <view class='nav'>


      <view class='meiyi'>

<block wx:for="{{all}}">
      <view class="dg"  bindtap="getnewcontent" data-id="{{index}}" data-c='{{index+1}}' style="{{index == id?' border:1rpx solid red':'border:1rpx solid gainsboro;'}}">
          <image src="{{item.two}}" mode="widthFix" data-index="{{index}}"></image>
          
          <text>{{item.one}}</text>
        </view>
</block>
      <!--
        <view class='dg' bindtap="getnewcontent" data-c='2'>
          <image src='../../images/ab2.gif' mode="widthFix"></image>\r\n
          <text>公司介绍</text>
        </view>

        <view class='dg' bindtap="getnewcontent" data-c='3'>
          <image src='../../images/ab3.gif' mode="widthFix"></image>\r\n
          <text>公司理念</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab4.gif' mode="widthFix"></image>\r\n
          <text>核心优势</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab5.gif' mode="widthFix"></image>\r\n
          <text>公司使命</text>
        </view>-->
      </view>
    </view>
  <!-------------导航 结束-------------->



  <!-------------图文 开始-------------->
    <view class='nr'>
      <image src='../../images/ab1.png' mode="widthFix"></image>
      <text>{{content}}</text>
    </view>
  <!-------------图文 结束-------------->

</view>





<import src="../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />

广西南宁市2018-01-05 12:23:51

微信模板文件wxml循坏遍历怎么json键名变量？？😅

广西南宁市2018-01-05 14:15:21

getnewcontent:function(n){
    var cc = (n.currentTarget.dataset.c);
    var ncc ='content'+cc;
    var id = n.currentTarget.dataset.id;
    this.setData({
    "content": this.data[ncc],
      id:id
    })
  }
<block wx:for="{{all}}">
       <view class='dg'  data-id="{{index}}" bindtap="getnewcontent" data-c='{{index+1}}'>
         <block wx:if="{{index==id}}">
          <image src='{{item.two1}}' mode="widthFix"></image>\r\n
          </飙泪ock>

          <block wx:else>
          <image src='{{item.two}}' mode="widthFix"></image>\r\n
          </飙泪ock>

          <text>{{item.one}}</text>
        <iew>

         </飙泪ock>

广西南宁市2018-01-05 17:57:00

#²小程序函数传参

查看文章跳到评论

广西南宁市 2018-01-05 09:37

#0

阅读 2205.6万

程序员编程常用网页工具集[游戏]

随机数接口API

https://www.random.org/integers/?num=1&min=100000&max=999999&col=1&base=10&format=plain&rnd=new

查看文章跳到评论

广西南宁市 2018-01-04 17:19

#0

阅读 126.9万

微信小程序自定义选项卡tabBar模板底部顶部导航

<template name="tabBar">  
  <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">  
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
    <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
      <text style="color:{{item.selectedColor}}" wx:if="{{item.active}}">{{item.text}}</text> 
      <text style="color:{{item.color}}" wx:if="{{!item.active}}">{{item.text}}</text>  
    </navigator>  
    </block>  
  </view>  
</template>

查看文章跳到评论

广西南宁市 2018-01-04 17:06

#0

阅读 126.9万

微信小程序自定义选项卡tabBar模板底部顶部导航

// pages/about/about.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "content": '广西南宁共振广告有限公司，2008年成立于南宁，是一家以“品牌咨询+品牌设计+品牌策划+品牌落地”于一体的品牌服务平台，通过360°全景式纵深品牌打造，从品牌标识设计、VI设计、空间设计、包装、海报等多维度构建完善的品牌价值链，致力于以实战服务中国企业，以品牌推动中国成长。公司创立至今，已是当之无愧的品牌实战专家，客户涵盖国内外地产、金融、IT、汽车、服装时尚、奢侈品、能源、机械、快速消费品等各行业著名的企业，深受客户信赖。我们坚持以实力深耕市场，力求达成艺术与商业之间、客户与市场之间、虚拟与现实之间的价值共生，将企业打造成为一个能为客户提供综合化',
    "content2": '更换内容21321',
    "content3": '2222222222222更换内容21321'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  //更换内容
  getnewcontent:function(n){
    var cc = (n.currentTarget.dataset.c);
    var ncc ='content'+cc;
    console.log(ncc);
    this.setData({
      "content": this.data[ncc],
    })
  }

})

广西南宁市2018-01-04 17:06:34

<!-------------banner 开始-------------->
<image style='width:100%;' src='../../images/ab0.png' mode="widthFix" ></image>
<!-------------banner 结束-------------->


<view class="about" style="background:url('https://hhh.liangtianmei.com/images/bjjj.png');">
  <!-------------标题 开始-------------->
  <view class='title'>
    <view class='zuo'>
      <view class='xian'></view>
      <view class='yuan'>●</view>
    </view>

    <view class='wz'>
      <text class='yw'>ABOUT SU\n</text>
      <text class='zw'>关于我们\n</text>
    </view>

    <view class='you'>
      <view class='yuan'>●</view>
      <view class='xian'></view>
    </view>
  </view>
  <!-------------标题 结束-------------->

  <!-------------导航 开始-------------->
    <view class='nav'>


      <view class='meiyi'>
        <view class='dg' bindtap="getnewcontent" data-c='2'>
          <image src='../../images/ab2.gif' mode="widthFix"></image>\r\n
          <text>公司介绍</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab3.gif' mode="widthFix"></image>\r\n
          <text>公司理念</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab4.gif' mode="widthFix"></image>\r\n
          <text>核心优势</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab5.gif' mode="widthFix"></image>\r\n
          <text>公司使命</text>
        </view>
      </view>
    </view>
  <!-------------导航 结束-------------->



  <!-------------图文 开始-------------->
    <view class='nr'>
      <image src='../../images/ab1.png' mode="widthFix"></image>
      <text>{{content}}</text>
    </view>
  <!-------------图文 结束-------------->

</view>

广西南宁市2018-01-04 17:07:20

Javascript中解析json时key为变量

alert(json.lastMonth[dep]);

使用中括号的方式就可以用变量key值
js json键名变量
js变量名变量

查看文章跳到评论

广西南宁市 2018-01-04 16:36

#0

阅读 126.9万

微信小程序自定义选项卡tabBar模板底部顶部导航

小程序不支持DOM和BOM操作，所有逻辑都需要通过数据驱动
1.css方案

<view class="{{isFold ?'flod':'extend' }}" bindtap="flodFn">
    我是一个很长的文字
</view>
.flod{
    //折叠样式
}
.extend{
    //展开样式
}
flodFn:function(){
    this.setData({
       isFold: !this.isFold 
    });
}

2.动态渲染方案

<view bindtap="flodFn">
<view wx:if="{{isFold}}" >
    我是一个很长的文字
</view>
<view wx:else>
    我是一个很长的文字
</view>
</view>
flodFn:function(){
    this.setData({
       isFold: !this.isFold 
    });
}

显示被隐藏的元素，并隐藏已显示的元素

$("button").click(function(){
  $("p").toggle();
});

查看文章跳到评论

广西南宁市 2018-01-03 17:23

#0

阅读 33.9万

在新旧年交替的时候给自己励志

任何事物之所以存在，不平等就是基础，

广西南宁市2018-01-03 17:23:41

成功的革命从来就不是穷人自己搞的，都是有产阶级分赃不均挑拨出来的。

广西南宁市2018-01-03 17:24:12

穷人之所以穷，原因在于他们懒于改变自己，乐于享受他们的懒惰带给他们的短暂舒适感。社会的变革只和优秀的人有关系

广西南宁市2018-01-03 17:25:06

大部分人都是有口饭吃就愿意老实本分，就怕那几个自愿上山的疯家伙

广西南宁市2018-01-03 17:25:15

所以要重申儒家，用家庭绑住年轻人，因为历史告诉我们，学生才是真的什么都不怕

查看文章跳到评论

广西南宁市 2018-01-03 14:54

#0

阅读 36.7万

301重定向PHP代码 PHP的301自动跳转代码

$the_host = $_SERVER['HTTP_HOST'];	//取得当前域名
$the_url = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : '';	//判断地址后面部分
	//$the_url = strtolower($the_url);//将英文字母转成小写
if($the_url=="/index.php"){
	//判断是不是首页
	$the_url="";//如果是首页，赋值为空
}
if($the_host !== 'www.lizhenqiu.com'){
	//如果域名不是带www的网址那么进行下面的301跳转
	header('HTTP/1.1 301 Moved Permanently');//发出301头部
	header('Location:http://www.lizhenqiu.com'.$the_url);//跳转到带www的网址
	 //header后的PHP代码还会被执行 .确保重定向后，后续代码不会被执行 
	exit;
}

查看文章跳到评论

广西南宁市 2018-01-02 18:40

#0

阅读 2223万

@意见反馈/技术支持/伊网/安企网

Sogou搜狗等浏览器点击有cursor: pointer;鼠标手型之后点击其他元素如果没有设置css鼠标样式，则默认箭头形状bug

查看文章跳到评论

广西南宁市 2018-01-02 17:59

#0

阅读 94.4万

Yourphp，thinkphp修改分页代码

Yourphp后台多语言选择更新生成文章URL混篡错误网址url问题bug修复

/GZphp/Lib/Action/Admin/

	public function doUpdateurl()
    {
		//echo getlang();exit;
		$llllggg=1;
		if(getlang()=='en') $llllggg=3;
		$where=' lang= '.$llllggg;
		//修复后台多语言
		
		
		$this->assign ( 'waitSecond', 0);
		$moduleid = intval($_GET['moduleid']);
		extract($_GET,EXTR_SKIP);
		if($moduleid<=0 && $catids[0] <= 0){
				
			if($this->module && !$_SESSION['moduleids']){
					foreach($this->module as $moduleid=>$r){
						$tablename=C('DB_PREFIX').$this->module[$moduleid]['name'];
						$db=D('');
						$db =   DB::getInstance();
						$tables = $db->getTables();			
						$Fields=$db->getFields($tablename); 
						foreach ( $Fields as $key =>$r){
							if($key=='url') $_SESSION['moduleids'][] = $moduleid;
						}
					}
			}
			$doid = $doid ? intval($doid) : 0;
			if(!isset($_SESSION['moduleids'][$doid])){
					unset($_SESSION['moduleids']);
					$forward = U("Createhtml/updateurl");
					$this->assign ( 'jumpUrl', $forward);
					$this->success(L('create_update_success'));
			}else{
					$moduleid = $_SESSION['moduleids'][$doid];
					$module=$this->module[$moduleid]['name'];
					$dao = M($module);
					$p = max(intval($p), 1);
					$start = $pagesize*($p-1);
					if(!isset($count)){
						$count = $dao->where($where)->count();
					}
					$pages = ceil($count/$pagesize);
						
					if($count){
						$list = $dao->field('id,catid,url')->where($where)->limit($start . ',' . $pagesize)->select();		 
						foreach($list as $r) {
							if($r['islink']) continue;
							$url = geturl($this->categorys[$r['catid']],$r,$this->Urlrule);
							unset($r['catid']);
							$r['url'] = $url['0'];
							if($url) $dao->save($r);
						}					 
					}

					if($pages > $p) {
							$p++;
							$creatednum = $start + count($list);
							$percent = round($creatednum/$count, 2)*100;
							$urlarray=array(
								'doid' => $doid,
								'dosubmit' => 1,
								'count' => $count,
								'pages' => $pages,
								'p' => $p,
								'pagesize' => $pagesize,
							);
							 
							$message = L('updating').$this->module[$moduleid]['title'].L('create_update_count').$count.L('create_update_num').$creatednum.L('items').$percent.L('items1');
							$forward = U("Createhtml/".ACTION_NAME,$urlarray);
							$this->assign ( 'jumpUrl', $forward);
							$this->success($message);
						} else {
							$doid++;
							$urlarray=array(
								'doid' => $doid,
								'dosubmit' => 1,
								'p' => 1,
								'pagesize' => $pagesize,
							);
							$message = L('start_updating').$this->module[$moduleid]['title']." ...";
							$forward = U("Createhtml/".ACTION_NAME,$urlarray);
							$this->assign ( 'jumpUrl', $forward);
							$this->success($message);
						}
				}
			}elseif($moduleid){
				$module=$this->module[$moduleid]['name'];
				$dao = M($module);

				$p = max(intval($p), 1);
				$start = $pagesize*($p-1);

				if(is_array($catids) && $catids[0] > 0){
					$cids = implode(',',$catids);
					$where = $where." catid IN($cids) ";
					$_SESSION['catids'] = $catids;					
				}
				if(!$catids && $_SESSION['catids'] && $_SESSION['catids'][0] > 0){
					$catids = implode(',',$_SESSION['catids']);;
					$where = $where." catid IN($catids) ";
				}
				if(!isset($count)){
					$count = $dao->where($where)->count();
				}
				$pages = ceil($count/$pagesize);
					
				if($count){
					$list = $dao->field('id,catid,url')->where($where)->limit($start . ',' . $pagesize)->select();		 
					foreach($list as $r) {
						if($r['islink']) continue;
						$url = geturl($this->categorys[$r['catid']],$r,$this->Urlrule);
						unset($r['catid']);
						$r['url'] = $url['0'];
						if($url) $dao->save($r);
					}					 
				}

				if($pages > $p) {
					$p++;
					$creatednum = $start + count($list);
					$percent = round($creatednum/$count, 2)*100;
					$urlarray=array(
						'moduleid' => $moduleid,
						'dosubmit' => 1,
						'count' => $count,
						'pages' => $pages,
						'p' => $p,
						'pagesize' => $pagesize,
					);
					 
					$message = L('create_update_count').$count.L('create_update_num').$creatednum.L('items').$percent.L('items1');
					$forward = U("Createhtml/updateurl",$urlarray);
					$this->assign ( 'jumpUrl', $forward);					
					$this->success($message);
				} else {
					unset($_SESSION['catids']);
					$forward = U("Createhtml/updateurl");
					$this->assign ( 'jumpUrl', $forward);
					$this->success(L('create_update_success'));
				}
			}else{
				//按照栏目更新url
				extract($_GET,EXTR_SKIP);
				$doid = $doid ? intval($doid) : 0;
				if(empty($_SESSION['catids']) && $catids){
					if($catids[0] == 0) { 
							foreach($this->categorys as $id=>$cat) {
								if($cat['child'] || $cat['type']!=0 || $cat['module']=='Page') continue;
								$catids[] = $id;
							}
					}
					$_SESSION['catids'] = $catids;
				}else{
					$catids =$_SESSION['catids'];	
				}
				if(!isset($catids[$doid])){
					unset($_SESSION['catids']);
					$forward = U("Createhtml/updateurl");
					$this->assign ( 'jumpUrl', $forward);
					$this->success(L('create_update_success'));
				}elseif($catids[$doid]<=0){
					$forward = U("Createhtml/updateurl");
					$this->assign ( 'jumpUrl', $forward);
					$this->success(L('create_update_success'));
				
				}else{
					$id = $catids[$doid];					
					$module=$this->categorys[$id]['module'];
					$dao = M($module);
					$where = $where."catid=$id";
					$p = max(intval($p), 1);
					$start = $pagesize*($p-1);
					if(!isset($count)){
						$count = $dao->where($where)->count();
					}
					$pages = ceil($count/$pagesize);
					
					if($count){
						$list = $dao->field('id,catid,url')->where($where)->limit($start . ',' . $pagesize)->select();				 
						foreach($list as $r) {
							if($r['islink']) continue;
							$url = geturl($this->categorys[$r['catid']],$r,$this->Urlrule);
							unset($r['catid']);
							$r['url'] = $url['0'];
							if($url) $dao->save($r);
						}
					}
 
					if($pages > $p) {
						$p++;
						$creatednum = $start + count($list);
						$percent = round($creatednum/$count, 2)*100;
						$urlarray=array(
							'doid' => $doid,
							'dosubmit' => 1,
							'count' => $count,
							'pages' => $pages,
							'p' => $p,
							'pagesize' => $pagesize,
						);
						 
						$message = L('updating').$this->categorys[$id]['catname'].L('create_update_count').$count.L('create_update_num').$creatednum.L('items').$percent.L('items1');
						$forward = U("Createhtml/".ACTION_NAME,$urlarray);
						$this->assign ( 'jumpUrl', $forward);
						$this->success($message);
					} else {
						$doid++;
						$urlarray=array(
							'doid' => $doid,
							'dosubmit' => 1,
							'p' => 1,
							'pagesize' => $pagesize,
						);
						$message = L('start_updating').$this->categorys[$id]['catname']." ...";
						$forward = U("Createhtml/".ACTION_NAME,$urlarray);
						$this->assign ( 'jumpUrl', $forward);
						$this->success($message);
					}
				}
			}
	}

/GZphp/Common/

function geturl($cat,$data='',$Urlrule=''){
		//$Urlrule =F('Urlrule');
		$id=$data['id']; 
		$URL_MODEL =C('URL_M');
		if(APP_LANG)$lang = getlang();

		$parentdir = $cat['parentdir'];
		$catdir = $cat['catdir'];
		if(!$catdir){
			return false; //修复后台多语言
		}
		$year = date('Y',$data['createtime']);
		$month = date('m',$data['createtime']);
		$day = date('d',$data['createtime']);
		$module = $cat['module'];
		$moduleid =$cat['moduleid'];
		$catid=$cat['id'];
		
		if($cat['ishtml']){
			if($cat['urlruleid'] && $Urlrule){
				$showurlrule = $Urlrule[$cat['urlruleid']]['showurlrule'];
				$listurlrule = $Urlrule[$cat['urlruleid']]['listurlrule'];
			}else{
				echo 'This cat has not urlruleid or no Urlrule.';exit;
			}
		}else{
			if($URL_MODEL==0){
				$langurl = $lang ?  '&l='.LANG_NAME : '';
				if($id){
					$url[] = U("Home/$cat[module]/show?id=$id".$langurl);
					$url[] = U("Home/$cat[module]/show?id=".$id.$langurl.'&'.C('VAR_PAGE').'={$page}');	
				}else{
					$url[] = U("Home/$cat[module]/index?id=$cat[id]".$langurl);
					$url[] = U("Home/$cat[module]/index?id=$cat[id]$langurl&".C('VAR_PAGE').'={$page}');
				}
				$urls = str_replace('g=Admin&','',$url);
				$urls = str_replace('g=Home&','',$url);
			}else{
				$urlrule = explode(':::',C('URL_URLRULE'));
				$showurlrule = $urlrule[0];
				$listurlrule = $urlrule[1];
			}
		}
		if(empty($urls)){
			$index =  $URL_MODEL==1 ? __ROOT__.'/index.php/' : __ROOT__.'/';
			$langurl = $lang ? $lang.'/' : '';
			if($id){
				$urls = str_replace(array('{$parentdir}','{$module}','{$moduleid}','{$catdir}','{$year}','{$month}','{$day}','{$catid}','{$id}'),array($parentdir,$module,$moduleid,$catdir,$year,$month,$day,$catid,$id),$showurlrule);
			}else{
				$urls = str_replace(array('{$parentdir}','{$module}','{$moduleid}','{$catdir}','{$year}','{$month}','{$day}','{$catid}','{$id}'),array($parentdir,$module,$moduleid,$catdir,$year,$month,$day,$catid,$id),$listurlrule);
			}
			$urls = explode('|',$urls);
			$urls[0]=$index.$langurl.$urls[0];
			$urls[1]=$index.$langurl.$urls[1];		
		}
		return $urls;
}

查看文章跳到评论

广西南宁市 2018-01-02 17:10

#0

阅读 434万

微信小程序开发笔记

var app = getApp()
//构造令牌
// 在需要使用的js文件中，导入js  
//var util = require('../../utils/util.js');  

//构造令牌 使用服务器时间戳

var utilMd5 = require('../../utils/md5.js');

var util = require('../../utils/util.js');

var ttken = 'JLI5vvqq0KRnzfla';//密钥
var ttime = parseInt(Date.parse(new Date()) / 1000);//时间 秒
//var ttime = util.ntime();
var ntoken = ttken + ttime;
var token = utilMd5.hexMD5(ntoken);
//console.log(token);
//end

Page({

  /**
   * 页面的初始数据
   */
  data: {
    token:0,
    tokenid: 0
  },
  onLoad: function () {
    //console.log('token: ' + token);
    var params = {
      'name': 'json',
      'age': 26
    };

    //util.makeusertoken()
    //初始化 验证码
    util.updatenew('https://hhh.*****.com/index.php/Home/Wxapp/code/token/' + token, token,this);
    //获取验证码图片
    var tokenid = wx.getStorageSync('tokenid');
    //util.updatenew('https://hhh.*****.com/index.php/Home/Wxapp/getcode/token/' + token + '/tokenid/' + tokenid+'/');
    this.setData({
      token: token,
      tokenid:tokenid
    })
  },
  changing:function(){
    util.updatenew('https://hhh.*****.com/index.php/Home/Wxapp/code/token/' + token, token, this);
    var tokenid = wx.getStorageSync('tokenid');
    this.setData({
      token: token,
      tokenid: tokenid
    })
  }
})


//ajax(method, url, data, success)

1.生成令牌
<image style="height:40px;width:100px;margin-top:10px;" bindtap="changing" id="codeyzmm" src="https://hhh.*****.com/index.php/Home/Wxapp/getcode/token/{{token}}/tokenid/{{tokenid}}/" ></image>

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

//服务器时间戳
function ntime(utilMd5, that,url){
  wx.request({
    url: 'https://hhh.*****.com/ntime.php',//请修改为你服务器
    data: {

    },
    header: {
      'content-type': 'application/json'
    },
    success: function (res) {
      //return res;
      var ttken = 'JLI5vvqq0KRnzfla';//密钥
      //var ttime = parseInt(Date.parse(new Date()) / 1000);//时间 秒
      var ttime =res.data;//util.ntime();
      var ntoken = ttken + ttime;
      var token = utilMd5.hexMD5(ntoken);
      //console.log(ntoken);
      //return token;
     // var url = 'https://hhh.*****.com/index.php/Home/Product/index';
      updatenew(url, token, that);
    }
  })
}
//更新数据
function updatenew(url, token, that) {
  
  wx.request({
    url: url,//'https://hhh.*****.com/index.php/Home/Product/index', //仅为示例，并非真实的接口地址
    /*data: {
      token: token


    },*/
    method: 'GET',
    header: {
      'content-type': 'application/json' // 默认值
    },
    success: function (res) {
      //  alert(res.data)
      //  res.data.content = app.convertHtmlToText(res.content)
      /*that.setData({ textdata: res.data });
      console.log (res.data)*/
      // that.setData(res.data)
      /*that.setData({
        all: res.data//第一个data为固定用法，第二个data是json中的data

      })*/
      //console.log(token);
     
      //res.data.jzzz = 1;
      
      if (res.data.tokenid){
        //保存token id
        wx.setStorageSync('tokenid', res.data.tokenid);
      }
      

      if (that){
        that.setData(res.data)
        //that.setData({
        //jzzz:1,
        //jzzzs:'',
          //codeimgurl: res.data.codeimgurl,
          //all: res.data
          //res
          // imageUrl: "../images/sp_07.png"//触发事件时的图片
        //})
      }
    }
  })
}



//构造令牌
// 在需要使用的js文件中，导入js  
//var util = require('../../utils/util.js');  
/*var ttken ='JLI5vvqq0KRnzfla';//密钥
var ttime = parseInt(Date.parse(new Date())/1000);//时间 秒
//var ttime = util.ntime();
var ntoken=ttken+ttime;
var token = utilMd5.hexMD5(ntoken);
console.log(token);*/
//end



//随机字符窜
function randomString(len) {
  　　len = len || 32;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhioOLl,9gq,Vv,Uu,I1jkmnprstwxyz/*~！@#￥%……&*()+=-2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  　　var maxPos = $chars.length;
  　　var pwd = '';
  　　for (var i = 0; i < len; i++) {
    　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  　　}
    
  　　return pwd;
}
//document.write(randomString(32));
/*伪身份凭证*/
function makeusertoken(){
  //console.log(randomString(9))
  var ro = randomString(9);
  //存储随机字符1
  wx.setStorageSync('ros', ro);
  //var code = ro.charCodeAt();
  //var nro = wx.getStorageSync('ros')
  
  //console.log(strToBinary(ro));
  //console.log(binaryToStr('1000010 1000010 111000 1101011 1001101 1000000 110001 1101100 1111001'));

}

//将字符串转换成二进制形式，中间用空格隔开
function strToBinary(str) {
  var result = [];
  var list = str.split("");
  for (var i = 0; i < list.length; i++) {
    if (i != 0) {
      result.push(" ");
    }
    var item = list[i];
    var binaryStr = item.charCodeAt().toString(2);
    result.push(binaryStr);
  }
  return result.join("");
}


//将二进制字符串转换成Unicode字符串
function binaryToStr(str) {
  var result = [];
  var list = str.split(" ");
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    var asciiCode = parseInt(item, 2);
    var charValue = String.fromCharCode(asciiCode);
    result.push(charValue);
  }
  return result.join("");
}
/*end*/
//获取访问者的openid

/*end*/





module.exports = {
  formatTime: formatTime,
  ntime: ntime,
  updatenew: updatenew,
  makeusertoken: makeusertoken
}

广西南宁市2018-01-04 16:39:16

wx.navigateTo({
  url: 'test?id=1'//实际路径要写全
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.id)  
  }
})

参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
test?id=1 中id为参数键，1 为参数值
在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值

查看文章跳到评论

广西南宁市 2017-12-29 12:06

#0

阅读 103.5万

免费ssl证书：网站域名使用 https (nginx) 访问配置参考

西数ssl https访问不了要设置服务器安全狗

广西南宁市2017-12-29 12:07:14

广西南宁市2017-12-29 12:07:54

检测端口是否开启

netstat -ano -p tcp | find "443" >nul 2>nul && echo 443端口已开启 || echo 443未开启

广西南宁市2017-12-29 12:10:04

另一个程序正在使用此文件，进程无法访问。 (异常来自 HRESULT:0x80070020)

[SVN] VisualSVN Server Manager 443端口

netstat -aon|findstr "443"

得到占用443端口的进程ID，发现是VisualSVNServer.exe占用了它。
修改VisualSVN Server Manager的端口方法如下：
（1）打开VisualSVN Server Manager
（2）点击根节点“VisualSVN Server Manager (Local)”
（3）右键-Properties
（4）Network选项卡，Server Port选为8443

广西南宁市2017-12-29 12:11:22

证书系统创建的CSR，包含：证书私钥文件214405557430106.key、PFX格式证书文件214405557430106.pfx、PFX格式证书密码文件pfx-password.txt

广西南宁市2017-12-29 12:13:12

西数自助安装SSL证书教程

广西南宁市2017-12-29 14:43:45

IIS7/IIS7.5 URL 重写 HTTP 重定向到 HTTPS

进入“URL重写”模块，点击“添加规则”

选择“空白规则”

名称：HTTP to HTTPS redirect
模式：(.*)

条件输入：{HTTPS}
模式：off 或 ^OFF$

或

重定向URL：https://{HTTP_HOST}/{R:1}
重定向类型：已找到(302) 或 参阅其它(303)

或

配置完成后“应用”到当前站点

广西南宁市2017-12-29 15:05:57

每个小程序账号仅支持配置最多20个域名；每个域名仅支持绑定最多20个小程序；每个小程序一年内最多支持修改域名50次。

查看文章跳到评论

广西南宁市 2017-12-28 17:58

#0

阅读 54.4万

BAT巨头"阵亡全家桶"

“腾讯的产品、百度的技术、阿里的运营”这种说法，早已深入人心。虽然与其他互联网巨头相比，腾讯似乎是产品的最佳孵化器，尤其是在微信所代表的移动互联网时代，业界对腾讯一直赞誉有加，但在光环之下，腾讯并不是不会犯错。

广西南宁市2017-12-28 17:58:54

百度做为全球最大的中文搜索引擎，本身有巨大流量和数据资源，“All in AI”和“内容分发”业务是百度现在的产品发展方向。

广西南宁市2017-12-28 17:59:45

其实挺不喜欢百度的，但是搜索引擎真的强大

广西南宁市2017-12-28 17:59:58

百度的影响力在持续下降,吴恩达的离开,也能反应出百度的人工智能的未来.我更相信,吴是受办公室政治而不得不离开的.

广西南宁市2017-12-28 18:00:22

百度内部偏家长型集权式管理，各山头做事不够灵活，好处是执行力强，缺点是下边人做事不动脑子。

广西南宁市2017-12-28 18:02:46

百度的搜索业务也快死了，看看百度上的文章材料，都过时了，新的数据百度抓不到。百度死有两个原因
1李老板热心赚快钱，总想利用流量来带自己的产品，手里有个锤子看什么问题都是钉子，目光不够长远。
2团队管理肯定出了大问题，我是见识过一个固化的团队有多可怕，任何方案都有本事做跑样。

广西南宁市2017-12-28 18:04:46

其实腾讯微博和新浪微博的定位不一样，当时腾讯微博已经占据了三四线城市的的上亿用户，活跃度和新浪微博也不相上下，但是有了微信，腾讯没必要再去做这样一个产品，看看现在微信和微博的体量和营收能力就清楚了。

广西南宁市2017-12-28 18:05:09

失败的全是别人的创意，腾讯只是损失些钱

广西南宁市2017-12-28 18:05:23

关闭聊天室完全是响应政策。聊天室是绝对的YP圣地。

查看文章跳到评论

广西南宁市 2017-12-28 17:57

#0

阅读 54.4万

BAT巨头"阵亡全家桶"

百度阵亡全家桶，相信只多不少。。

广西南宁市2017-12-28 17:57:36

巨头也有“难养的儿子”，在扩张帝国版图的同时，也会不断折戟。百度如此，腾讯如此，阿里更是如此。“阵亡”的产品成为了巨头成长路上的垫脚石，也记录了巨头发展的轨迹。

广西南宁市2017-12-28 17:58:00

听说创业公司只要招到腾讯的产品经理就不用愁了？No，梳理一遍腾讯的产品孵化史，你会发现腾讯并不是神：QQ、微信的光环之下，其实也有着众多的失败产品。

广西南宁市2017-12-28 18:00:55

百度重技术轻产品轻运营

广西南宁市2017-12-28 18:01:18

在中国，搜索引擎还是百度最好的。大部分人搜索第一时间想到的就是百度。一句有问题，找百度，也是最直接的反应。还有，百度贴吧也是百度成功的一个产品，但贴吧也有一个缺陷，藏污纳垢。贴吧里的乱象真的不少。另外，我有一个疑问：百度的到底主营业务是什么，这些年百度在干什么？

广西南宁市2017-12-28 18:03:51

整理的很不错，基本把百度的个中“糗历史”梳理好了。说起来百度的情况也真是奇葩，无论先出手还是后出手，总是胜少负多（如果不说全盘皆墨的话）。江湖曾流传“腾讯的产品，阿里的运营，百度的技术”，就好像企业的DNA已经书写，再也无法改变一样。然而吊诡的是，多年之后再来回顾，发现那个简单粗暴的企业DNA好像还真有几分宿命论的味道。从这个角度说，搞不好电商，整不了游戏的百度，倒比一直标榜着“大侠”，向往着“隐居”的Jack Ma来的有“武林人士”的风范——因为除了醉心技术，好像也没啥更好的出路了。

查看文章跳到评论

广西南宁市 2017-12-27 17:08

#0

阅读 68.5万

理解box-sizing布局

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

查看文章跳到评论

广西南宁市 2017-12-27 14:31

#0

阅读 35.8万

jQuery手机端省市区联动代码

定义外部脚本文件中所使用的字符编码：

<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

[b]charset="UTF-8"[/b]

广西南宁市2017-12-27 14:33:43

charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。

广西南宁市2017-12-27 14:34:19

utf-8编码引起js输出中文乱码的解决办法
utf-8编码引起document.writeln输出中文乱码的解决办法
编码规则是utf-8，如网页头中的：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
那么js文件中如果有中文输出就会出现乱码，解决此个问题有两个方法：
1、在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"（假设输出的是Big5繁体字）。
例：
<script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script>
2、把js文件保存为utf-8编码。

广西南宁市2017-12-27 14:35:05

php header utf8 插入header("Content-type: text/html; charset=utf-8");
PHP文件插入header("Content-type: text/html; charset=utf-8");
相当于页面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

查看文章跳到评论

广西南宁市 2017-12-27 11:11

#0

阅读 24.5万

JS酷炫红色LED数字时钟

Canvas飞机树林上空飞行特效

<style>
* {
	margin: 0;
	padding: 0;
}

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}
</style>



<script src="https://out.img.pan.lizhenqiu.com/ae680261c17f84d0fdae004b6189a4d7"></script>

<div id="world"></div>

<script>
var Colors = {
	red:0xf25346,
	yellow:0xedeb27,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
	green:0x458248,
	purple:0x551A8B,
	lightgreen:0x629265,
};



var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;


function createScene() {
	// Get the width and height of the screen
	// and use them to setup the aspect ratio
	// of the camera and the size of the renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Create the scene.
	scene = new THREE.Scene();

	// Add FOV Fog effect to the scene. Same colour as the BG int he stylesheet.
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Create the camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);
	// Position the camera
	camera.position.x = 0;
	camera.position.y = 150;
	camera.position.z = 100;	

	// Create the renderer

	renderer = new THREE.WebGLRenderer ({
	// Alpha makes the background transparent, antialias is performant heavy
		alpha: true,
		antialias:true
	});

	//set the size of the renderer to fullscreen
	renderer.setSize (WIDTH, HEIGHT);
	//enable shadow rendering
	renderer.shadowMap.enabled = true;

	// Add the Renderer to the DOM, in the world div.
	container = document.getElementById('world');
	container.appendChild (renderer.domElement);

	//RESPONSIVE LISTENER
	window.addEventListener('resize', handleWindowResize, false);
}

//RESPONSIVE FUNCTION
function handleWindowResize() {
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
}


var hemispshereLight, shadowLight;

function createLights(){
	// Gradient coloured light - Sky, Ground, Intensity
	hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)
	// Parallel rays
	shadowLight = new THREE.DirectionalLight(0xffffff, .9);



	shadowLight.position.set(0,350,350);
	shadowLight.castShadow = true;

	// define the visible area of the projected shadow
	shadowLight.shadow.camera.left = -650;
	shadowLight.shadow.camera.right = 650;
	shadowLight.shadow.camera.top = 650;
	shadowLight.shadow.camera.bottom = -650;
	shadowLight.shadow.camera.near = 1;
	shadowLight.shadow.camera.far = 1000;

	// Shadow map size
	shadowLight.shadow.mapSize.width = 2048;
	shadowLight.shadow.mapSize.height = 2048;

	// Add the lights to the scene
	scene.add(hemisphereLight);  

	scene.add(shadowLight);
}	


Land = function(){
	var geom = new THREE.CylinderGeometry(600,600,1700,40,10);
	//rotate on the x axis
	geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	//create a material
	var mat = new THREE.MeshPhongMaterial({
		color: Colors.lightgreen,
		shading:THREE.FlatShading,
	});

	//create a mesh of the object
	this.mesh = new THREE.Mesh(geom, mat);
	//receive shadows
	this.mesh.receiveShadow = true;
}

Orbit = function(){

	var geom =new THREE.Object3D();

	this.mesh = geom;
	//this.mesh.add(sun);
}

Sun = function(){

	this.mesh = new THREE.Object3D();

	var sunGeom = new THREE.SphereGeometry( 400, 20, 10 );
	var sunMat = new THREE.MeshPhongMaterial({
		color: Colors.yellow,
		shading:THREE.FlatShading,
	});
	var sun = new THREE.Mesh(sunGeom, sunMat);
	//sun.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	sun.castShadow = false;
	sun.receiveShadow = false;
	this.mesh.add(sun);
}

Cloud = function(){
	// Create an empty container for the cloud
	this.mesh = new THREE.Object3D();
	// Cube geometry and material
	var geom = new THREE.DodecahedronGeometry(20,0);
	var mat = new THREE.MeshPhongMaterial({
		color:Colors.white,  
	});

	var nBlocs = 3+Math.floor(Math.random()*3);

	for (var i=0; i<nBlocs; i++ ){
		//Clone mesh geometry
		var m = new THREE.Mesh(geom, mat);
			//Randomly position each cube
			m.position.x = i*15;
			m.position.y = Math.random()*10;
			m.position.z = Math.random()*10;
			m.rotation.z = Math.random()*Math.PI*2;
			m.rotation.y = Math.random()*Math.PI*2;

			//Randomly scale the cubes
			var s = .1 + Math.random()*.9;
			m.scale.set(s,s,s);
			this.mesh.add(m);
	}
}

Sky = function(){

	this.mesh = new THREE.Object3D();

	// Number of cloud groups
	this.nClouds = 25;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nClouds;

	// Create the Clouds

	for(var i=0; i<this.nClouds; i++){
	
		var c = new Cloud();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the cloud itself
		var h = 800 + Math.random()*200;
		c.mesh.position.y = Math.sin(a)*h;
		c.mesh.position.x = Math.cos(a)*h;		

		// rotate the cloud according to its position
		c.mesh.rotation.z = a + Math.PI/2;

		// random depth for the clouds on the z-axis
		c.mesh.position.z = -400-Math.random()*400;

		// random scale for each cloud
		var s = 1+Math.random()*2;
		c.mesh.scale.set(s,s,s);

		this.mesh.add(c.mesh);
	}
}

Tree = function () {

	this.mesh = new THREE.Object3D();

	var matTreeLeaves = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});

	var geonTreeBase = new THREE.BoxGeometry( 10,20,10 );
	var matTreeBase = new THREE.MeshBasicMaterial( { color:Colors.brown});
	var treeBase = new THREE.Mesh(geonTreeBase,matTreeBase);
	treeBase.castShadow = true;
	treeBase.receiveShadow = true;
	this.mesh.add(treeBase);

	var geomTreeLeaves1 = new THREE.CylinderGeometry(1, 12*3, 12*3, 4 );
	var treeLeaves1 = new THREE.Mesh(geomTreeLeaves1,matTreeLeaves);
	treeLeaves1.castShadow = true;
	treeLeaves1.receiveShadow = true;
	treeLeaves1.position.y = 20
	this.mesh.add(treeLeaves1);

	var geomTreeLeaves2 = new THREE.CylinderGeometry( 1, 9*3, 9*3, 4 );
	var treeLeaves2 = new THREE.Mesh(geomTreeLeaves2,matTreeLeaves);
	treeLeaves2.castShadow = true;
	treeLeaves2.position.y = 40;
	treeLeaves2.receiveShadow = true;
	this.mesh.add(treeLeaves2);

	var geomTreeLeaves3 = new THREE.CylinderGeometry( 1, 6*3, 6*3, 4);
	var treeLeaves3 = new THREE.Mesh(geomTreeLeaves3,matTreeLeaves);
	treeLeaves3.castShadow = true;
	treeLeaves3.position.y = 55;
	treeLeaves3.receiveShadow = true;
	this.mesh.add(treeLeaves3);

}

Flower = function () {

	this.mesh = new THREE.Object3D();

	var geomStem = new THREE.BoxGeometry( 5,50,5,1,1,1 );
	var matStem = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});
	var stem = new THREE.Mesh(geomStem,matStem);
	stem.castShadow = false;
	stem.receiveShadow = true;
	this.mesh.add(stem);


	var geomPetalCore = new THREE.BoxGeometry(10,10,10,1,1,1);
	var matPetalCore = new THREE.MeshPhongMaterial({color:Colors.yellow, shading:THREE.FlatShading});
	petalCore = new THREE.Mesh(geomPetalCore, matPetalCore);
	petalCore.castShadow = false;
	petalCore.receiveShadow = true;

	var petalColor = petalColors [Math.floor(Math.random()*3)];

	var geomPetal = new THREE.BoxGeometry( 15,20,5,1,1,1 );
	var matPetal = new THREE.MeshBasicMaterial( { color:petalColor});
	geomPetal.vertices[5].y-=4;
	geomPetal.vertices[4].y-=4;
	geomPetal.vertices[7].y+=4;
	geomPetal.vertices[6].y+=4;
	geomPetal.translate(12.5,0,3);

		var petals = [];
		for(var i=0; i<4; i++){	

			petals[i]=new THREE.Mesh(geomPetal,matPetal);
			petals[i].rotation.z = i*Math.PI/2;
			petals[i].castShadow = true;
			petals[i].receiveShadow = true;
		}

	petalCore.add(petals[0],petals[1],petals[2],petals[3]);
	petalCore.position.y = 25;
	petalCore.position.z = 3;
	this.mesh.add(petalCore);

}

var petalColors = [Colors.red, Colors.yellow, Colors.blue];



Forest = function(){

	this.mesh = new THREE.Object3D();

	// Number of Trees
	this.nTrees = 300;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nTrees;

	// Create the Trees

	for(var i=0; i<this.nTrees; i++){
	
		var t = new Tree();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the tree itself
		var h = 605;
		t.mesh.position.y = Math.sin(a)*h;
		t.mesh.position.x = Math.cos(a)*h;		

		// rotate the tree according to its position
		t.mesh.rotation.z = a + (Math.PI/2)*3;

		//Andreas Trigo funtime
		//t.mesh.rotation.z = Math.atan2(t.mesh.position.y, t.mesh.position.x)-Math.PI/2;

		// random depth for the tree on the z-axis
		t.mesh.position.z = 0-Math.random()*600;

		// random scale for each tree
		var s = .3+Math.random()*.75;
		t.mesh.scale.set(s,s,s);

		this.mesh.add(t.mesh);
	}

	// Number of Trees
	this.nFlowers = 350;

	var stepAngle = Math.PI*2 / this.nFlowers;


	for(var i=0; i<this.nFlowers; i++){	

		var f = new Flower();
		var a = stepAngle*i;

		var h = 605;
		f.mesh.position.y = Math.sin(a)*h;
		f.mesh.position.x = Math.cos(a)*h;		

		f.mesh.rotation.z = a + (Math.PI/2)*3;

		f.mesh.position.z = 0-Math.random()*600;

		var s = .1+Math.random()*.3;
		f.mesh.scale.set(s,s,s);

		this.mesh.add(f.mesh);
	}

}

var AirPlane = function() {
	
	this.mesh = new THREE.Object3D();

	// Create the cabin
	var geomCockpit = new THREE.BoxGeometry(80,50,50,1,1,1);
	var matCockpit = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	geomCockpit.vertices[4].y-=10;
	geomCockpit.vertices[4].z+=20;
	geomCockpit.vertices[5].y-=10;
	geomCockpit.vertices[5].z-=20;
	geomCockpit.vertices[6].y+=30;
	geomCockpit.vertices[6].z+=20;
	geomCockpit.vertices[7].y+=30;
	geomCockpit.vertices[7].z-=20;
	var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
	cockpit.castShadow = true;
	cockpit.receiveShadow = true;
	this.mesh.add(cockpit);
	
	// Create the engine
	var geomEngine = new THREE.BoxGeometry(20,50,50,1,1,1);
	var matEngine = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var engine = new THREE.Mesh(geomEngine, matEngine);
	engine.position.x = 40;
	engine.castShadow = true;
	engine.receiveShadow = true;
	this.mesh.add(engine);
	
	// Create the tail
	var geomTailPlane = new THREE.BoxGeometry(15,20,5,1,1,1);
	var matTailPlane = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
	tailPlane.position.set(-35,25,0);
	tailPlane.castShadow = true;
	tailPlane.receiveShadow = true;
	this.mesh.add(tailPlane);
	
	// Create the wing
	var geomSideWing = new THREE.BoxGeometry(40,4,150,1,1,1);
	var matSideWing = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	var sideWingTop = new THREE.Mesh(geomSideWing, matSideWing);
	var sideWingBottom = new THREE.Mesh(geomSideWing, matSideWing);
	sideWingTop.castShadow = true;
	sideWingTop.receiveShadow = true;
	sideWingBottom.castShadow = true;
	sideWingBottom.receiveShadow = true;

	sideWingTop.position.set(20,12,0);
	sideWingBottom.position.set(20,-3,0);
	this.mesh.add(sideWingTop);
	this.mesh.add(sideWingBottom);

	var geomWindshield = new THREE.BoxGeometry(3,15,20,1,1,1);
	var matWindshield = new THREE.MeshPhongMaterial({color:Colors.white,transparent:true, opacity:.3, shading:THREE.FlatShading});;
	var windshield = new THREE.Mesh(geomWindshield, matWindshield);
	windshield.position.set(5,27,0);

	windshield.castShadow = true;
	windshield.receiveShadow = true;

	this.mesh.add(windshield);

	var geomPropeller = new THREE.BoxGeometry(20,10,10,1,1,1);
	geomPropeller.vertices[4].y-=5;
	geomPropeller.vertices[4].z+=5;
	geomPropeller.vertices[5].y-=5;
	geomPropeller.vertices[5].z-=5;
	geomPropeller.vertices[6].y+=5;
	geomPropeller.vertices[6].z+=5;
	geomPropeller.vertices[7].y+=5;
	geomPropeller.vertices[7].z-=5;
	var matPropeller = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	this.propeller = new THREE.Mesh(geomPropeller, matPropeller);
	this.propeller.castShadow = true;
	this.propeller.receiveShadow = true;


	var geomBlade1 = new THREE.BoxGeometry(1,100,10,1,1,1);
	var geomBlade2 = new THREE.BoxGeometry(1,10,100,1,1,1);
	var matBlade = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	
	var blade1 = new THREE.Mesh(geomBlade1, matBlade);
	blade1.position.set(8,0,0);
	blade1.castShadow = true;
	blade1.receiveShadow = true;

	var blade2 = new THREE.Mesh(geomBlade2, matBlade);
	blade2.position.set(8,0,0);
	blade2.castShadow = true;
	blade2.receiveShadow = true;
	this.propeller.add(blade1, blade2);
	this.propeller.position.set(50,0,0);
	this.mesh.add(this.propeller);

	var wheelProtecGeom = new THREE.BoxGeometry(30,15,10,1,1,1);
	var wheelProtecMat = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var wheelProtecR = new THREE.Mesh(wheelProtecGeom,wheelProtecMat);
	wheelProtecR.position.set(25,-20,25);
	this.mesh.add(wheelProtecR);

	var wheelTireGeom = new THREE.BoxGeometry(24,24,4);
	var wheelTireMat = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	var wheelTireR = new THREE.Mesh(wheelTireGeom,wheelTireMat);
	wheelTireR.position.set(25,-28,25);

	var wheelAxisGeom = new THREE.BoxGeometry(10,10,6);
	var wheelAxisMat = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var wheelAxis = new THREE.Mesh(wheelAxisGeom,wheelAxisMat);
	wheelTireR.add(wheelAxis);

	this.mesh.add(wheelTireR);

	var wheelProtecL = wheelProtecR.clone();
	wheelProtecL.position.z = -wheelProtecR.position.z ;
	this.mesh.add(wheelProtecL);

	var wheelTireL = wheelTireR.clone();
	wheelTireL.position.z = -wheelTireR.position.z;
	this.mesh.add(wheelTireL);

	var wheelTireB = wheelTireR.clone();
	wheelTireB.scale.set(.5,.5,.5);
	wheelTireB.position.set(-35,-5,0);
	this.mesh.add(wheelTireB);

	var suspensionGeom = new THREE.BoxGeometry(4,20,4);
	suspensionGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,10,0))
	var suspensionMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var suspension = new THREE.Mesh(suspensionGeom,suspensionMat);
	suspension.position.set(-35,-5,0);
	suspension.rotation.z = -.3;
	this.mesh.add(suspension);
};

var Fox = function() {
	
	this.mesh = new THREE.Object3D();
	
	var redFurMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	// Create the Body
	var geomBody = new THREE.BoxGeometry(100,50,50,1,1,1);
	var body = new THREE.Mesh(geomBody, redFurMat);
	body.castShadow = true;
	body.receiveShadow = true;
	this.mesh.add(body);
	
	// Create the Chest
	var geomChest = new THREE.BoxGeometry(50,60,70,1,1,1);
	var chest = new THREE.Mesh(geomChest, redFurMat);
	chest.position.x = 60;
	chest.castShadow = true;
	chest.receiveShadow = true;
	this.mesh.add(chest);

	// Create the Head
	var geomHead = new THREE.BoxGeometry(40,55,50,1,1,1);
	this.head = new THREE.Mesh(geomHead, redFurMat);
	this.head.position.set(80, 35, 0);
	this.head.castShadow = true;
	this.head.receiveShadow = true;

	// Create the Snout
	var geomSnout = new THREE.BoxGeometry(40,30,30,1,1,1);
	var snout = new THREE.Mesh(geomSnout, redFurMat);
	geomSnout.vertices[0].y-=5;
	geomSnout.vertices[0].z+=5;
	geomSnout.vertices[1].y-=5;
	geomSnout.vertices[1].z-=5;
	geomSnout.vertices[2].y+=5;
	geomSnout.vertices[2].z+=5;
	geomSnout.vertices[3].y+=5;
	geomSnout.vertices[3].z-=5;
	snout.castShadow = true;
	snout.receiveShadow = true;
	snout.position.set(30,0,0);
	this.head.add(snout);

	// Create the Nose
	var geomNose = new THREE.BoxGeometry(10,15,20,1,1,1);
	var matNose = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var nose = new THREE.Mesh(geomNose, matNose);
	nose.position.set(55,0,0);
	this.head.add(nose);

	// Create the Ears
	var geomEar = new THREE.BoxGeometry(10,40,30,1,1,1);
	var earL = new THREE.Mesh(geomEar, redFurMat);
	earL.position.set(-10,40,-18);
	this.head.add(earL);
	earL.rotation.x=-Math.PI/10;
	geomEar.vertices[1].z+=5;
	geomEar.vertices[4].z+=5;
	geomEar.vertices[0].z-=5;
	geomEar.vertices[5].z-=5;

	// Create the Ear Tips
	var geomEarTipL = new THREE.BoxGeometry(10,10,20,1,1,1);
	var matEarTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var earTipL = new THREE.Mesh(geomEarTipL, matEarTip);
	earTipL.position.set(0,25,0);
	earL.add(earTipL);

	var earR = earL.clone();
	earR.position.z = -earL.position.z;
	earR.rotation.x = -	earL.rotation.x;
	this.head.add(earR);

	this.mesh.add(this.head);

	
	// Create the tail
	var geomTail = new THREE.BoxGeometry(80,40,40,2,1,1);
	geomTail.vertices[4].y-=10;
	geomTail.vertices[4].z+=10;
	geomTail.vertices[5].y-=10;
	geomTail.vertices[5].z-=10;
	geomTail.vertices[6].y+=10;
	geomTail.vertices[6].z+=10;
	geomTail.vertices[7].y+=10;
	geomTail.vertices[7].z-=10;
	this.tail = new THREE.Mesh(geomTail, redFurMat);
	this.tail.castShadow = true;
	this.tail.receiveShadow = true;

	// Create the tail Tip
	var geomTailTip = new THREE.BoxGeometry(20,40,40,1,1,1);
	var matTailTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var tailTip = new THREE.Mesh(geomTailTip, matTailTip);
	tailTip.position.set(80,0,0);
	tailTip.castShadow = true;
	tailTip.receiveShadow = true;
	this.tail.add(tailTip);
	this.tail.position.set(-40,10,0);
	geomTail.translate(40,0,0);
	geomTailTip.translate(10,0,0);
	this.tail.rotation.z = Math.PI/1.5;
	this.mesh.add(this.tail);


	// Create the Legs
	var geomLeg = new THREE.BoxGeometry(20,60,20,1,1,1);
	this.legFR = new THREE.Mesh(geomLeg, redFurMat);
	this.legFR.castShadow = true;
	this.legFR.receiveShadow = true;

	// Create the feet
	var geomFeet = new THREE.BoxGeometry(20,20,20,1,1,1);
	var matFeet = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var feet = new THREE.Mesh(geomFeet, matFeet);
	feet.position.set(0,0,0);
	feet.castShadow = true;
	feet.receiveShadow = true;
	this.legFR.add(feet);
	this.legFR.position.set(70,-12,25);
	geomLeg.translate(0,40,0);
	geomFeet.translate(0,80,0);
	this.legFR.rotation.z = 16;
	this.mesh.add(this.legFR);

	this.legFL = this.legFR.clone();
	this.legFL.position.z = -this.legFR.position.z;
	this.legFL.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legFL);

	this.legBR = this.legFR.clone();
	this.legBR.position.x = -(this.legFR.position.x)+50;
	this.legBR.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legBR);

	this.legBL = this.legFL.clone();
	this.legBL.position.x = -(this.legFL.position.x)+50;
	this.legBL.rotation.z = -this.legFL.rotation.z;
	this.mesh.add(this.legBL);

};


var sky;
var forest;
var land;
var orbit;
var airplane;
var sun;
var fox;

var mousePos={x:0, y:0};
var offSet = -600;


function createSky(){
  sky = new Sky();
  sky.mesh.position.y = offSet;
  scene.add(sky.mesh);
}

function createLand(){
  land = new Land();
  land.mesh.position.y = offSet;
  scene.add(land.mesh);
}

function createOrbit(){
  orbit = new Orbit();
  orbit.mesh.position.y = offSet;
  orbit.mesh.rotation.z = -Math.PI/6; 
  scene.add(orbit.mesh);
}

function createForest(){
  forest = new Forest();
  forest.mesh.position.y = offSet;
  scene.add(forest.mesh);
}

function createSun(){ 
	sun = new Sun();
	sun.mesh.scale.set(1,1,.3);
	sun.mesh.position.set(0,-30,-850);
	scene.add(sun.mesh);
}


function createPlane(){ 
	airplane = new AirPlane();
	airplane.mesh.scale.set(.35,.35,.35);
	airplane.mesh.position.set(-40,110,-250);
	// airplane.mesh.rotation.z = Math.PI/15;
	scene.add(airplane.mesh);
}

function createFox(){ 
	fox = new Fox();
	fox.mesh.scale.set(.35,.35,.35);
	fox.mesh.position.set(-40,110,-250);
	scene.add(fox.mesh);
}


function updatePlane() {

	var targetY = normalize(mousePos.y,-.75,.75, 50, 190);
	var targetX = normalize(mousePos.x,-.75,.75,-100, -20);
	
	// Move the plane at each frame by adding a fraction of the remaining distance
	airplane.mesh.position.y += (targetY-airplane.mesh.position.y)*0.1;

	airplane.mesh.position.x += (targetX-airplane.mesh.position.x)*0.1;

	// Rotate the plane proportionally to the remaining distance
	airplane.mesh.rotation.z = (targetY-airplane.mesh.position.y)*0.0128;
	airplane.mesh.rotation.x = (airplane.mesh.position.y-targetY)*0.0064;
	airplane.mesh.rotation.y = (airplane.mesh.position.x-targetX)*0.0064;

	airplane.propeller.rotation.x += 0.3;
}

function normalize(v,vmin,vmax,tmin, tmax){

	var nv = Math.max(Math.min(v,vmax), vmin);
	var dv = vmax-vmin;
	var pc = (nv-vmin)/dv;
	var dt = tmax-tmin;
	var tv = tmin + (pc*dt);
	return tv;

}


function loop(){
  land.mesh.rotation.z += .005;
  orbit.mesh.rotation.z += .001;
  sky.mesh.rotation.z += .003;
  forest.mesh.rotation.z += .005;
  updatePlane();

  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}

function handleMouseMove (event) {
	var tx = -1 + (event.clientX / WIDTH)*2;
	var ty = 1 - (event.clientY / HEIGHT)*2;
	mousePos = {x:tx, y:ty};	
}


function init(event) {
	createScene();
	createLights();
	createPlane();
	createOrbit();
	createSun();
	createLand();
	createForest();
	createSky();
	//createFox();

	document.addEventListener('mousemove', handleMouseMove, false);

	loop();
}

window.addEventListener('load', init, false);
</script>

查看文章跳到评论

广西南宁市 2017-12-27 11:07

#0

阅读 24.5万

JS酷炫红色LED数字时钟

HTML5 SVG自行车行驶动画特效

<style>html {background-color: #78D89B;}
.container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.st0{fill:#1E0F02;}
.st1{fill:none;}
.st2{fill:#23110D;}
.st3{fill:#FFFFFF;}
.st4{fill:#E14C00;}
.st5{fill:#807B7C;}
.st6{fill:#4D4A4A;}
.st7{fill:#6A1D02;}
.st8{fill:#6EC48C;}
.st9{fill:#64B380;}
.st10{fill:#807B7C;}
.st11{fill: none; stroke:none; stroke-miterlimit="10"}
.bg{fill:url(#pattern);}
</style>
<div class="container">
  <svg id="bike" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="750px"
  	height="500px" viewBox="0 0 750 500" style="enable-background:new 0 0 750 500;" xml:space="preserve">
<rect id="city" class="bg" width="750" height="500" x="0" y="0"/>
<g id="wheel">
	<path class="st0" id="anima_wheel_1" d="M234,222.25c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S280.53,222.25,234,222.25z M263.192,323.776l-13.949-11.086l18.36-1.271l41.305,10.665c-1.185,5.727-3.025,11.211-5.413,16.392
		L263.192,323.776z M303.081,339.39c-1.837,3.852-3.998,7.518-6.428,10.982l-30.986-24.628L303.081,339.39z M272.533,372.577
		c-4.94,2.887-10.222,5.253-15.787,6.984l-16.052-39.808l-1.095-17.785l13.229,12.793L272.533,372.577z M255.102,336.96
		l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L255.102,336.96z M255.779,379.836c-4.024,1.193-8.187,2.059-12.459,2.578
		l-2.432-39.506L255.779,379.836z M210.673,379.365c-5.549-1.775-10.821-4.167-15.739-7.094l18.832-38.545l12.485-12.714
		l-0.655,18.392L210.673,379.365z M225.484,342.562l-1.416,39.775c-4.266-0.553-8.425-1.443-12.441-2.669L225.484,342.562z
		 M194.072,371.758c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.237L194.072,371.758z M164.253,337.917
		c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.82L164.253,337.917z M201.502,324.302
		L170.99,349.87c-2.402-3.482-4.518-7.173-6.325-11.041L201.502,324.302z M157.5,306.5c0-5.785,0.663-11.411,1.88-16.828
		l42.474,5.999l15.95,7.944l-17.694,5.061l-42.601-1.843C157.508,306.721,157.5,306.611,157.5,306.5z M310.5,306.5
		c0,0.318-0.02,0.63-0.024,0.947l-42.783,2.963l-17.252-4.454l16.255-8.629l42.063-7.056C309.889,295.503,310.5,300.929,310.5,306.5
		z M229.058,294.881l-2.494-1.561l-4.258-15.332l9.216,13.683l-0.379,2.541C230.423,294.379,229.724,294.597,229.058,294.881z
		 M227.993,295.394c-0.251,0.136-0.49,0.29-0.73,0.442l-0.302-1.089L227.993,295.394z M223.501,299.491l-0.713-0.864l1.223,0.173
		C223.836,299.026,223.66,299.253,223.501,299.491z M222.951,300.396c-0.351,0.634-0.641,1.304-0.88,1.998l-2.842,0.813
		l-14.243-7.094l16.334,2.307L222.951,300.396z M221.741,303.529c-0.067,0.278-0.125,0.558-0.173,0.843l-1.011-0.504
		L221.741,303.529z M221.43,305.421c-0.03,0.357-0.055,0.715-0.055,1.079c0,0.372,0.024,0.738,0.056,1.102l-2.265,1.898
		l-15.896-0.688l15.862-4.536L221.43,305.421z M221.59,308.773c0.052,0.284,0.117,0.563,0.188,0.84l-1.131-0.049L221.59,308.773z
		 M228.129,317.672l-0.786,0.801l0.044-1.234C227.63,317.39,227.874,317.538,228.129,317.672z M232.349,292.9l0.689,1.023
		c-0.289,0.022-0.573,0.056-0.856,0.097L232.349,292.9z M246.6,305.995l1.099,0.284l-1.092,0.579
		c0.003-0.12,0.018-0.238,0.018-0.359C246.625,306.33,246.606,306.164,246.6,305.995z M246.519,304.942
		c-0.091-0.735-0.236-1.452-0.448-2.142l1.814-2.318l15.694-2.633l-14.572,7.735L246.519,304.942z M245.671,301.69
		c-0.109-0.265-0.235-0.52-0.362-0.776l1.115-0.187L245.671,301.69z M242.703,297.369c-0.207-0.197-0.415-0.394-0.635-0.577
		l0.934-0.619L242.703,297.369z M241.221,296.152c-0.594-0.415-1.227-0.775-1.89-1.085l-0.512-2.914l8.545-13.424l-4.002,16.005
		L241.221,296.152z M238.236,294.619c-0.269-0.096-0.542-0.185-0.819-0.263l0.606-0.952L238.236,294.619z M238.374,318.331
		l0.069,1.129l-0.882-0.852C237.837,318.526,238.106,318.43,238.374,318.331z M245.722,311.17l0.881,0.7l-1.231,0.085
		C245.496,311.697,245.616,311.437,245.722,311.17z M246.078,310.174c0.21-0.69,0.355-1.406,0.445-2.139l2.61-1.386l15.407,3.978
		l-16.458,1.14L246.078,310.174z M269.488,295.844l35.176-18.673c1.616,3.888,2.907,7.942,3.868,12.123L269.488,295.844z
		 M266.372,296.367l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L266.372,296.367z M247.337,299.56
		l-2.538,0.426c-0.377-0.624-0.804-1.214-1.28-1.761l0.717-2.869l13.267-8.788L247.337,299.56z M244.596,293.916l4.464-17.853
		l22.897-35.972c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L244.596,293.916z M249.828,272.996l9.659-38.63
		c4.034,1.425,7.911,3.176,11.602,5.227L249.828,272.996z M248.131,275.662l-9.568,15.032l-3.183-18.125l6.288-42.186
		c5.845,0.582,11.488,1.839,16.87,3.661L248.131,275.662z M237.766,291.944l-1.377,2.164c-0.705-0.135-1.43-0.209-2.171-0.222
		l-1.651-2.451l2.346-15.738L237.766,291.944z M231.739,290.206l-10.28-15.263l-11.414-41.095
		c5.395-1.778,11.051-2.976,16.901-3.511l7.42,42.246L231.739,290.206z M219.692,272.319l-22.248-33.033
		c3.707-2.02,7.607-3.725,11.652-5.117L219.692,272.319z M220.538,275.365l4.768,17.169l-15.601-9.763l-27.141-32.898
		c4.256-3.868,8.961-7.248,14.01-10.086L220.538,275.365z M225.703,293.961l0.689,2.481c-0.58,0.439-1.12,0.925-1.615,1.456
		l-2.933-0.414l-10.127-12.275L225.703,293.961z M220.377,297.276l-18.221-2.573l-38.176-19.015
		c2.342-5.314,5.255-10.319,8.688-14.917l36.369,22.76L220.377,297.276z M199.024,294.261l-39.418-5.567
		c0.995-4.172,2.314-8.218,3.962-12.094L199.024,294.261z M197.069,309.545l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657
		L197.069,309.545z M219.51,310.516l2.569,0.111c0.24,0.694,0.532,1.364,0.884,1.997l-1.295,2.65l-14.803,5.838L219.51,310.516z
		 M223.585,313.631c0.162,0.236,0.336,0.462,0.513,0.686l-1.05,0.414L223.585,313.631z M224.791,315.117
		c0.497,0.53,1.038,1.016,1.618,1.454l-0.105,2.958l-11.149,11.354l7.242-14.822L224.791,315.117z M227.289,319.955l1.791-1.824
		c0.666,0.282,1.365,0.498,2.084,0.663l1.105,2.741l-5.567,14.908L227.289,319.955z M232.326,319.001
		c0.283,0.038,0.57,0.064,0.859,0.082l-0.397,1.063L232.326,319.001z M234.241,319.113c0.742-0.014,1.468-0.088,2.173-0.224
		l2.12,2.05l0.978,15.883l-6.17-15.301L234.241,319.113z M239.508,320.49l-0.158-2.567c0.663-0.311,1.295-0.672,1.889-1.089
		l2.775,1.012l7.353,14.111L239.508,320.49z M242.175,316.111c0.218-0.185,0.43-0.377,0.635-0.577l0.52,0.998L242.175,316.111z
		 M243.534,314.76c0.475-0.548,0.9-1.138,1.276-1.763l2.954-0.205l12.457,9.901l-15.499-5.653L243.534,314.76z M270.756,311.2
		l39.695-2.749c-0.108,4.314-0.565,8.539-1.359,12.647L270.756,311.2z M295.094,260.464l-33.007,21.865l24.52-31.34
		C289.687,253.909,292.533,257.071,295.094,260.464z M240.667,230.307l-5.835,39.147l-6.883-39.194
		c1.999-0.157,4.012-0.26,6.051-0.26C236.248,230,238.468,230.117,240.667,230.307z M181.839,250.564l25.186,30.529l-33.738-21.114
		C175.875,256.607,178.736,253.459,181.839,250.564z M171.571,350.687l32.872-27.545l16.575-6.537l-8.078,16.535l-29.873,30.423
		C178.767,359.723,174.914,355.4,171.571,350.687z M225.064,382.463l1.526-42.862l6.234-16.692l6.883,17.068l2.62,42.564
		C239.59,382.837,236.815,383,234,383C230.975,383,227.997,382.805,225.064,382.463z M284.468,363.966l-30.827-29.81l-8.234-15.802
		l17.289,6.306l33.377,26.527C292.693,355.874,288.799,360.159,284.468,363.966z"/>
	<circle class="st1" cx="234" cy="306.649" r="84.25"/>
</g>
<g id="wheel_2">
	<path class="st0" id="anima_wheel_front" d="M517.471,222.963c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S564.001,222.963,517.471,222.963z M546.665,324.49l-13.95-11.088l18.359-1.271l41.305,10.665
		c-1.185,5.727-3.026,11.212-5.413,16.392L546.665,324.49z M586.552,340.103c-1.837,3.852-3.998,7.518-6.428,10.981l-30.985-24.627
		L586.552,340.103z M556.004,373.29c-4.94,2.887-10.222,5.254-15.788,6.984l-16.052-39.808l-1.095-17.785l13.23,12.793
		L556.004,373.29z M538.573,337.673l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L538.573,337.673z M539.249,380.549
		c-4.024,1.193-8.187,2.059-12.458,2.578l-2.432-39.505L539.249,380.549z M494.144,380.078c-5.549-1.775-10.821-4.167-15.738-7.094
		l18.833-38.546l12.483-12.713l-0.655,18.391L494.144,380.078z M508.954,343.278l-1.416,39.771
		c-4.265-0.553-8.424-1.443-12.439-2.669L508.954,343.278z M477.543,372.471c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.238
		L477.543,372.471z M447.724,338.63c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.819
		L447.724,338.63z M484.974,325.014l-30.513,25.568c-2.402-3.482-4.518-7.174-6.325-11.041L484.974,325.014z M440.971,307.213
		c0-5.785,0.663-11.411,1.88-16.828l42.475,5.999l15.949,7.944l-17.693,5.06l-42.602-1.843
		C440.979,307.434,440.971,307.324,440.971,307.213z M593.971,307.213c0,0.318-0.02,0.63-0.024,0.947l-42.782,2.962l-17.253-4.455
		l16.254-8.628l42.063-7.056C593.36,296.216,593.971,301.642,593.971,307.213z M507.305,303.644
		c-0.258,0.736-0.443,1.505-0.537,2.303l-2.742-1.366L507.305,303.644z M502.7,303.92l-14.243-7.094l16.334,2.307l2.796,3.389
		L502.7,303.92z M506.534,306.948l-3.896,3.265l-15.897-0.688l15.86-4.536L506.534,306.948z M506.732,308.087
		c0.064,0.801,0.208,1.58,0.438,2.322l-3.051-0.132L506.732,308.087z M508.211,301.707l-1.952-2.367l3.378,0.477
		C509.095,300.392,508.618,301.025,508.211,301.707z M513.312,297.263c-0.733,0.307-1.421,0.698-2.061,1.151l-0.821-2.955
		L513.312,297.263z M510.033,294.031l-4.259-15.333l9.217,13.686l-0.648,4.345L510.033,294.031z M512.962,316.998l-2.149,2.188
		l0.121-3.412C511.56,316.253,512.238,316.664,512.962,316.998z M515.819,293.613l1.906,2.83c-0.085-0.002-0.169-0.013-0.254-0.013
		c-0.72,0-1.422,0.074-2.103,0.208L515.819,293.613z M522.084,297.478c-0.707-0.336-1.454-0.6-2.235-0.776l1.645-2.585
		L522.084,297.478z M522.289,292.868l8.544-13.424l-4.002,16.003l-3.664,2.427L522.289,292.868z M521.726,317.121l0.188,3.052
		l-2.449-2.368C520.252,317.657,521.009,317.429,521.726,317.121z M526.473,296.885l-0.827,3.308
		c-0.516-0.6-1.098-1.138-1.732-1.612L526.473,296.885z M528.204,306.226l2.965,0.766l-3.013,1.6
		c0.058-0.452,0.098-0.91,0.098-1.379C528.254,306.88,528.234,306.552,528.204,306.226z M528.223,305.199l3.133-4.004l15.693-2.633
		l-14.571,7.735L528.223,305.199z M527.798,304.12c-0.229-0.764-0.54-1.491-0.923-2.173l3.019-0.507L527.798,304.12z
		 M527.675,310.676l2.399,1.907l-3.404,0.236C527.079,312.148,527.419,311.432,527.675,310.676z M528.113,309.746l4.49-2.384
		l15.407,3.978l-16.457,1.14L528.113,309.746z M552.959,296.557l35.177-18.673c1.616,3.888,2.907,7.942,3.868,12.124
		L552.959,296.557z M549.842,297.08l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L549.842,297.08z
		 M530.808,300.273l-4.333,0.727l1.233-4.933l13.266-8.788L530.808,300.273z M528.068,294.628l4.464-17.853l22.896-35.971
		c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L528.068,294.628z M533.299,273.707l9.659-38.628
		c4.034,1.425,7.911,3.176,11.602,5.227L533.299,273.707z M531.601,276.376l-9.568,15.032l-3.184-18.127l6.287-42.185
		c5.845,0.582,11.488,1.839,16.871,3.661L531.601,276.376z M521.238,292.657l-2.359,3.707l-2.841-4.218l2.346-15.74L521.238,292.657
		z M515.211,290.918l-10.283-15.267l-11.413-41.09c5.395-1.778,11.051-2.976,16.902-3.511l7.419,42.245L515.211,290.918z
		 M503.163,273.03l-22.247-33.032c3.706-2.02,7.606-3.724,11.652-5.117L503.163,273.03z M504.009,276.078l4.768,17.168
		l-15.602-9.764l-27.14-32.898c4.256-3.868,8.961-7.247,14.01-10.086L504.009,276.078z M509.174,294.674l1.176,4.234l-5.035-0.711
		l-10.127-12.275L509.174,294.674z M503.848,297.99l-18.221-2.574l-38.176-19.015c2.342-5.314,5.255-10.319,8.688-14.917
		l36.369,22.76L503.848,297.99z M482.496,294.974l-39.419-5.568c0.995-4.172,2.314-8.218,3.962-12.094L482.496,294.974z
		 M480.54,310.258l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657L480.54,310.258z M502.982,311.229l4.39,0.19l-2.232,4.568
		l-14.802,5.838L502.982,311.229z M508.011,312.389c0.381,0.695,0.843,1.337,1.362,1.929l-2.855,1.126L508.011,312.389z
		 M509.955,315.163l-0.181,5.082l-11.148,11.353l7.242-14.823L509.955,315.163z M510.76,320.667l3.079-3.136l1.901,4.714
		l-5.567,14.907L510.76,320.667z M514.984,317.696c0.755,0.179,1.539,0.282,2.346,0.293l-1.071,2.869L514.984,317.696z
		 M518.35,318.117l3.655,3.534l0.978,15.883l-6.17-15.301L518.35,318.117z M522.979,321.202l-0.27-4.385l4.777,1.742l7.353,14.112
		L522.979,321.202z M523.601,316.078c0.651-0.451,1.245-0.976,1.781-1.556l1.419,2.723L523.601,316.078z M526.163,313.856
		l5.072-0.351l12.457,9.901l-15.498-5.653L526.163,313.856z M554.227,311.913l39.694-2.749c-0.108,4.314-0.565,8.539-1.359,12.647
		L554.227,311.913z M578.565,261.177l-33.007,21.865l24.52-31.34C573.158,254.622,576.004,257.784,578.565,261.177z M524.138,231.02
		l-5.835,39.149l-6.884-39.196c1.999-0.157,4.013-0.26,6.052-0.26C519.719,230.713,521.939,230.83,524.138,231.02z M465.31,251.276
		l25.185,30.528l-33.737-21.113C459.346,257.32,462.207,254.171,465.31,251.276z M455.042,351.4l32.873-27.545l16.575-6.536
		l-8.079,16.536l-29.872,30.422C462.239,360.436,458.385,356.114,455.042,351.4z M508.535,383.176l1.526-42.862l6.234-16.693
		l6.883,17.069l2.62,42.564c-2.736,0.296-5.512,0.459-8.326,0.459C514.446,383.713,511.468,383.518,508.535,383.176z
		 M567.939,364.679l-30.826-29.809l-8.234-15.802l17.288,6.305l33.377,26.528C576.164,356.587,572.27,360.872,567.939,364.679z"/>
	<circle class="st1" cx="517.471" cy="307.166" r="84.25"/>
</g>
<g id="velik">
	<g id="rul">
		<g>
			<path class="st2" d="M405.833,142.563l0.468,3.846l0.574-0.221v-0.679c0-0.971,0.521-2.868,1.365-3.349l6.923-3.949
				c0.669-0.382,1.419-0.587,2.189-0.596c2.782-0.035,9.683,0.834,11.023,0.387c1.688-0.563,4.313-4,5.563-4.5
				c0.746-0.298,1.625-0.463,2.213-0.548c0.38-0.055,0.662-0.377,0.662-0.761v-1.22c0-0.451-0.385-0.806-0.834-0.766
				c-1.936,0.171-6.704,0.512-8.479-0.079c-1.266-0.422-1.78-1.595-1.987-2.541c-0.157-0.714-0.9-1.136-1.607-0.952l-7.236,1.879
				l0.44,1.951c0,0,1.953-0.765,2.828-0.003c0.875,0.762,1.813,1.729,0.75,3.229s-3.188,0.688-4.75,1.313s-9.125,5.479-9.771,5.938
				C405.657,141.299,405.833,142.563,405.833,142.563z"/>
		</g>
		<g>
			<path class="st3" d="M438.982,171.934l-9.929-23.101l1.648-0.857c0.008-0.004,1.387-0.74,4.102-2.766
			c4.438-3.312,5.013-8.982,3.613-13.133c-1.771-5.256-6.309-6.468-9.959-5.854c-3.603,0.608-12.615,2.94-12.706,2.964
			l-1.004-3.872c0.377-0.098,9.271-2.399,13.044-3.036c6.642-1.119,12.295,2.226,14.416,8.521
			c2.234,6.631,0.221,13.711-5.012,17.616c-1.278,0.954-2.295,1.651-3.048,2.141l8.51,19.799L438.982,171.934z"/>
		</g>
		<g>
			<path class="st2" d="M417.351,131.53l-1.968-8.732c-0.121-0.54-0.658-0.875-1.195-0.756c-0.539,0.122-0.877,0.657-0.756,1.195
				l0.011,0.048l-26.907,7.552l-0.041-0.201c-0.098-0.481-0.566-0.79-1.046-0.694c-0.481,0.097-0.792,0.566-0.694,1.047l1.215,6.007
				c0.085,0.421,0.455,0.712,0.869,0.712c0.059,0,0.117-0.006,0.177-0.018c0.481-0.097,0.792-0.566,0.694-1.047l-0.04-0.197
				l27.724-4.502l0.006,0.026c0.104,0.465,0.518,0.78,0.975,0.78c0.073,0,0.146-0.008,0.221-0.024
				C417.134,132.604,417.472,132.069,417.351,131.53z"/>
		</g>
	</g>
	<g id="krilya">
		<g>
			<path class="st4" d="M323.54,301.67l-6.21-0.44C314.62,257.57,278.35,223,234,223c-40.654,0-74.511,29.039-81.971,67.508
				c-0.536,2.765-2.148,5.204-4.537,6.697l-0.2,0.125c-1.089,0.68-2.478-0.209-2.327-1.483
				c5.259-44.497,43.118-79.016,89.035-79.016C281.9,216.83,321.03,254.39,323.54,301.67z"/>
		</g>
		<g>
			<path class="st4" d="M522.133,223.791c-17.449-1.06-35.376,3.33-51.078,13.72c-33.904,22.434-46.116,65.334-31.109,101.532
				c1.079,2.602,1.081,5.525-0.088,8.088l-0.098,0.215c-0.533,1.168-2.182,1.194-2.76,0.047
				c-20.168-40.011-7.644-89.69,30.65-115.028c18.863-12.482,40.718-16.899,61.5-14.08C533.5,219,525.928,224,522.133,223.791z"/>
		</g>
	</g>
	<g id="tormoz">
		<g>
			<path class="st5" d="M285.745,248.074l-6.156-5.109c-0.846-0.702-0.964-1.97-0.262-2.816l0,0
			c0.703-0.846,1.97-0.964,2.816-0.262l6.156,5.109c0.846,0.702,0.964,1.97,0.262,2.816l0,0
			C287.859,248.658,286.592,248.776,285.745,248.074z"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -89.0755 287.0871)" class="st3" cx="287.012" cy="246.415" rx="1" ry="1"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -87.3724 281.0121)" class="st3" cx="280.848" cy="241.41" rx="1" ry="1"/>
		</g>
		<path class="st2" d="M305.545,234.594c0,0-0.419-0.671-1.043-1.321c-0.609-0.659-1.394-1.314-2.29-1.839
			c-0.324-0.177-0.659-0.342-1.002-0.491c0.99-1.812,3.258-3.399,5.015-3.399c0.001,0,0.001,0,0.001,0c0.552,0,1-0.447,1-1
			s-0.447-1-1-1c-0.001,0-0.001,0-0.002,0c-2.838,0-5.81,2.428-6.952,4.77c-0.932-0.246-2.032-0.454-3.094-0.316
			c-0.545,0.047-1.058,0.2-1.551,0.358c-0.479,0.18-0.92,0.386-1.321,0.6c-0.382,0.23-0.753,0.41-1.079,0.646
			c-0.308,0.219-0.654,0.468-0.821,0.554c-0.391,0.232-0.648,0.342-0.648,0.342l-0.009,0.003c-1.069,0.459-1.817,1.523-1.816,2.76
			c0.002,1.656,1.347,2.997,3.003,2.994s2.997-1.347,2.994-3.003c0,0,0-0.28,0.058-0.732c0.041-0.267,0.028-0.39,0.069-0.621
			c0.01-0.226,0.124-0.477,0.233-0.744c0.067-0.116,0.134-0.249,0.217-0.379c0.089-0.111,0.181-0.234,0.287-0.353
			c0.222-0.205,0.483-0.416,0.802-0.536c0.316-0.132,0.677-0.199,1.063-0.187c0.387,0.017,0.781,0.09,1.213,0.23l0.314,0.098
			l0.329,0.12c0.195,0.09,0.343,0.153,0.518,0.258c0.345,0.199,0.641,0.451,0.894,0.715c0.492,0.549,0.767,1.178,0.849,1.739
			c0.056,0.273,0.035,0.545,0.024,0.768c-0.008,0.223-0.07,0.424-0.114,0.579c-0.097,0.313-0.211,0.478-0.211,0.478
			c-0.344,0.59-0.913,0.466-0.504,1.631L305.545,234.594z"/>
		</g>
		<g>
		<path class="st3" d="M283.51,242.235c0,0,0.636-0.265,1.423-0.816c0.803-0.536,1.757-1.358,2.606-2.276
			c0.851-0.916,1.596-1.93,2.053-2.782c0.478-0.834,0.677-1.5,0.677-1.5c0.264-0.882,1.193-1.383,2.075-1.119
			c0.882,0.264,1.383,1.193,1.119,2.075c-0.151,0.505-0.528,0.888-0.982,1.071c0,0-0.646,0.256-1.435,0.805
			c-0.81,0.53-1.755,1.359-2.594,2.287c-0.841,0.925-1.577,1.947-2.041,2.794c-0.48,0.832-0.689,1.488-0.689,1.488
			c-0.277,0.87-1.206,1.351-2.077,1.075c-0.87-0.277-1.351-1.206-1.075-2.077C282.723,242.78,283.08,242.416,283.51,242.235z"/>
	</g>
	<g id="tormoz_front">
		<g>
			<path class="st5" d="M476.648,240.727l7.159-3.572c0.984-0.491,1.388-1.698,0.897-2.683l0,0
				c-0.491-0.984-1.698-1.388-2.683-0.897l-7.159,3.572c-0.984,0.491-1.388,1.698-0.897,2.683l0,0
				C474.457,240.815,475.664,241.219,476.648,240.727z"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -56.6651 237.4861)" class="st3" cx="475.644" cy="238.994" rx="1" ry="1"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -54.2761 240.3562)" class="st3" cx="482.929" cy="235.359" rx="1" ry="1"/>
		</g>
			<path class="st0" d="M472.077,226.041c0,0,0.041-0.252,0.077-0.685c0.003-0.142,0.056-0.315,0.034-0.542
				c-0.013-0.232-0.032-0.494-0.105-0.766c-0.084-0.26-0.166-0.563-0.34-0.833c-0.163-0.277-0.375-0.554-0.639-0.813
				c-0.539-0.509-1.306-0.905-2.152-1.154c-0.202-0.055-0.45-0.135-0.621-0.158l-0.701-0.125c-0.403-0.029-0.8-0.048-1.203-0.009
				c-0.393,0.04-0.76,0.119-1.085,0.241c-0.325,0.117-0.608,0.258-0.84,0.425c-0.466,0.326-0.611,0.703-0.71,0.962l-1.244-3.19
				c0.369-0.156,0.74-0.219,0.99-0.275c0.444-0.078,0.908-0.159,1.394-0.188c0.487-0.02,0.987-0.017,1.492,0.019
				c0.497,0.035,1.023,0.11,1.557,0.2l0.697,0.147c0.299,0.062,0.511,0.117,0.772,0.184c0.997,0.265,2.013,0.646,2.923,1.207
				c0.448,0.287,0.881,0.598,1.241,0.959c0.361,0.357,0.689,0.719,0.956,1.086c0.248,0.372,0.49,0.714,0.66,1.038
				c0.178,0.322,0.332,0.65,0.456,0.91c0.193,0.391,0.323,0.61,0.323,0.61c0.603,1.009,0.274,2.317-0.735,2.92
				c-1.009,0.603-2.317,0.274-2.92-0.735C472.083,227.03,472,226.519,472.077,226.041z"/>
		<g>
			<path class="st3" d="M480.252,235.605c0,0-0.533-0.436-1.129-1.19c-0.616-0.744-1.294-1.804-1.844-2.927
				c-0.553-1.122-0.975-2.306-1.169-3.254c-0.218-0.936-0.219-1.631-0.219-1.631c0-0.921-0.746-1.667-1.667-1.667
				c-0.92,0-1.667,0.746-1.667,1.667c0,0.527,0.251,1.002,0.634,1.308c0,0,0.545,0.431,1.144,1.182
				c0.624,0.74,1.292,1.806,1.829,2.935c0.54,1.128,0.952,2.317,1.154,3.262c0.222,0.935,0.234,1.624,0.234,1.624
				c0.016,0.913,0.768,1.641,1.681,1.625c0.913-0.016,1.641-0.768,1.625-1.681C480.85,236.353,480.612,235.902,480.252,235.605z"/>
		</g>
	</g>
	<g id="sedlo">
		<rect x="302.547" y="205.617" transform="matrix(0.9322 -0.362 0.362 0.9322 -57.1172 124.9964)" class="st3" width="5" height="18.645"/>
		<path class="st6" d="M285.492,205.5h-8.367c-0.552,0-1-0.448-1-1s0.448-1,1-1h8.367c5.497,0,9.62-6.465,9.661-6.531
				c0.294-0.467,0.91-0.608,1.378-0.316c0.467,0.293,0.61,0.909,0.317,1.377C296.657,198.335,292.103,205.5,285.492,205.5z"/>
		<path class="st5" d="M274.5,204.417c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.03,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,204.416,274.517,204.417,274.5,204.417z"/>
		<path class="st5" d="M274.5,203.204c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,203.203,274.517,203.204,274.5,203.204z"/>
		<path class="st5" d="M274.5,201.991c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,201.99,274.517,201.991,274.5,201.991z"/>
		<path class="st5" d="M274.5,200.778c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.023,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,200.777,274.517,200.778,274.5,200.778z"/>
		<path class="st5" d="M274.5,199.565c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,199.564,274.517,199.565,274.5,199.565z"/>
		<path class="st5" d="M274.5,198.352c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,198.351,274.517,198.352,274.5,198.352z"/>
		<path class="st5" d="M274.5,197.139c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,197.138,274.517,197.139,274.5,197.139z"/>
		<path class="st5" d="M274.5,195.926c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,195.925,274.517,195.926,274.5,195.926z"/>
		<path class="st5" d="M274.5,194.713c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,194.712,274.517,194.713,274.5,194.713z"/>
		<path class="st5" d="M274.5,193.5c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,193.499,274.517,193.5,274.5,193.5z"/>
		<path class="st6" d="M287.59,194.377c0,0,0.292,0.024,0.804,0.067c0.257,0.023,0.569,0.05,0.927,0.082
				c0.376,0.055,0.8,0.117,1.263,0.185c0.469,0.065,0.949,0.189,1.477,0.295c0.525,0.106,1.068,0.289,1.641,0.444
				c0.559,0.202,1.154,0.387,1.734,0.654c0.292,0.132,0.587,0.266,0.883,0.4l0.867,0.474c0.572,0.332,1.141,0.696,1.667,1.103
				c0.539,0.395,1.027,0.838,1.499,1.278c0.915,0.902,1.666,1.852,2.246,2.702c0.564,0.855,0.976,1.598,1.244,2.121
				c0.259,0.526,0.407,0.827,0.407,0.827c0.737,1.497,0.121,3.309-1.376,4.046c-1.497,0.737-3.309,0.121-4.046-1.376
				c-0.102-0.207-0.178-0.419-0.229-0.635l-0.011-0.052c0,0-0.057-0.245-0.157-0.674c-0.106-0.426-0.276-1.021-0.528-1.713
				c-0.265-0.682-0.624-1.452-1.109-2.231c-0.256-0.377-0.523-0.774-0.843-1.143c-0.306-0.382-0.659-0.741-1.03-1.091l-0.573-0.514
				l-0.616-0.469c-0.407-0.319-0.857-0.576-1.278-0.853c-0.447-0.235-0.866-0.498-1.298-0.692c-0.429-0.191-0.836-0.405-1.217-0.548
				c-0.384-0.151-0.736-0.289-1.048-0.411c-0.338-0.11-0.634-0.205-0.877-0.284c-0.489-0.156-0.769-0.244-0.769-0.244
				c-0.471-0.15-0.732-0.653-0.582-1.125C286.79,194.593,287.183,194.343,287.59,194.377z"/>
		<path class="st5" d="M306.093,209.853l-5.311,2.123c-0.461,0.184-0.989-0.042-1.174-0.503l-1.711-4.281
				c-0.184-0.461,0.042-0.989,0.503-1.174l5.311-2.123c0.461-0.184,0.989,0.042,1.174,0.503l1.711,4.281
				C306.781,209.141,306.555,209.669,306.093,209.853z"/>
		<path class="st7" d="M271.014,194.342c-1.465,0.238-2.868-0.682-3.208-2.126c-0.967-4.103-1.359-8.154,0.694-9.591
				c2.5-1.75,4.55-2,7.275-2s10.725,2.75,19.35,2.125S315,179.5,319,179.5s9.928,0.422,12.625,4.5c1.708,2.583,2.5,4.875,1.125,6
				c-1.61,1.317-9.625,0.625-18.875,4.875c-6.089,2.798-10.932,5.649-13.531,7.272c-0.956,0.597-2.201,0.256-2.743-0.733
				c-1-1.824-3.537-4.442-9.975-6.164C280.418,193.323,274.278,193.811,271.014,194.342z"/>
		<path class="st5" d="M304.919,223.297c-1.799,0.725-2.66,2.764-1.939,4.554c0.725,1.799,2.755,2.663,4.554,1.939l6.493-2.616
				l-2.616-6.493L304.919,223.297z M306.881,228.166c-0.9,0.362-1.915-0.07-2.277-0.969c-0.359-0.89,0.07-1.915,0.969-2.277
				c0.89-0.359,1.918,0.079,2.277,0.969C308.212,226.789,307.771,227.808,306.881,228.166z"/>
		<circle class="st3" cx="306.227" cy="226.545" r="1.75"/>
	</g>
	<g id="rama">
		<path class="st4" d="M230.922,295.308L230.922,295.308l80.55-65.536l3.155,3.879l-76.672,62.38
						C235.814,297.774,232.665,297.45,230.922,295.308z"/>
		<rect x="322.381" y="225.473" transform="matrix(0.9254 -0.379 0.379 0.9254 -76.5191 143.3384)" class="st4" width="7" height="81.175"/>
		<path class="st4" d="M443.035,169.136c0,0,3.577,9.265,8.943,23.162c2.706,6.939,5.864,15.035,9.247,23.709
					c1.691,4.337,3.439,8.818,5.215,13.372c1.771,4.556,3.582,9.179,5.495,13.762l1.425,3.44c0.441,1.045,0.973,2.199,1.482,3.29
					c0.997,2.224,2.06,4.409,3.119,6.566c2.129,4.294,4.388,8.485,7.004,12.022c2.746,3.577,5.737,6.945,8.504,10.182
					c2.805,3.209,5.456,6.242,7.904,9.043c9.839,11.176,16.398,18.627,16.398,18.627l-2.042,1.884c0,0-1.719-1.794-4.727-4.934
					c-1.5-1.573-3.322-3.483-5.412-5.674c-2.096-2.186-4.413-4.696-6.959-7.418c-2.532-2.738-5.275-5.705-8.176-8.843
					c-1.438-1.586-2.916-3.216-4.426-4.881c-0.754-0.851-1.515-1.71-2.284-2.578c-0.748-0.882-1.511-1.712-2.275-2.716
					c-3.031-3.877-5.459-8.139-7.796-12.529c-1.16-2.198-2.224-4.458-3.269-6.739c-0.509-1.163-0.993-2.27-1.489-3.521l-1.34-3.473
					c-1.775-4.638-3.652-9.235-5.512-13.755c-1.854-4.522-3.679-8.973-5.446-13.28c-3.532-8.614-6.829-16.654-9.655-23.546
					c-5.698-13.764-9.497-22.94-9.497-22.94L443.035,169.136z"/>
		<rect x="357.208" y="257.429" transform="matrix(0.6315 -0.7754 0.7754 0.6315 -48.2292 420.3728)" class="st4" width="121.918" height="7"/>
		<path class="st4" d="M359.333,294c-15.566,0-29.331-11.209-29.909-11.686l3.816-4.63c0.125,0.103,12.714,10.316,26.093,10.316
					c12.561,0,25.665-13.077,31.076-25.719l0.067-0.158c5.724-13.375,23.142-54.076,34.025-67.512
					c8.907-10.995,19.791-13.899,20.25-14.017l1.496,5.811c-0.084,0.022-9.479,2.597-17.084,11.983
					c-6.873,8.484-18.034,30.722-33.171,66.096l-0.068,0.158C389.833,278.874,374.939,294,359.333,294z"/>
	</g>
	<g id="tros">
		<path class="st2" d="M384.511,310.318l-0.771-0.637c0.63-0.764,63.196-76.643,80.892-100.728
					c16.055-21.851,19.178-55.031,15.26-70.582c-3.871-15.36-14.15-21.748-20.235-21.373c-3.911,0.24-8.325,6.017-11.548,10.235
					c-1.682,2.202-3.01,3.94-4.032,4.672c-2.843,2.037-5.122,1.359-8.276,0.422c-0.379-0.113-0.773-0.23-1.187-0.348l0.275-0.962
					c0.416,0.119,0.813,0.237,1.195,0.351c3.098,0.921,4.965,1.477,7.41-0.276c0.9-0.646,2.253-2.416,3.819-4.467
					c3.526-4.615,7.914-10.358,12.282-10.626c6.421-0.395,17.256,6.213,21.265,22.127c3.967,15.743,0.814,49.32-15.422,71.418
					C447.725,233.653,385.141,309.554,384.511,310.318z"/>
		<path class="st2" d="M444.065,170.664l-0.563-0.827c0.007-0.004,0.659-0.449,1.681-1.285c3.207-2.621,9.06-8.214,12.227-16.235
					c3.637-9.215,2.241-14.905,0.874-18.384c-1.095-2.787-3.132-7.974-14.62-10.822c-10.841-2.688-29.352,2.075-29.538,2.124
					l-0.252-0.968c0.769-0.2,18.942-4.875,30.03-2.126c10.537,2.613,13.586,7.036,15.312,11.428
					c1.428,3.636,2.892,9.573-0.876,19.116c-3.25,8.232-9.241,13.96-12.523,16.643C444.757,170.192,444.093,170.645,444.065,170.664
					z"/>
		<path class="st2" d="M470.737,221.422c-6.604-11.103-23.22-51.689-23.387-52.098l0.926-0.378
					c0.167,0.408,16.753,40.925,23.32,51.964L470.737,221.422z"/>
		<path class="st4" d="M373.011,299.594l0.005-0.024l-0.386-0.025c-1.081-0.135-2.179-0.213-3.296-0.213h0l-132.456-8.546
			c-0.617-0.073-1.24-0.121-1.877-0.121c-8.745,0-15.833,7.089-15.833,15.833c0,7.916,5.816,14.456,13.404,15.628l-0.002,0.02
			l130.464,29.093l0.001-0.004c2.019,0.496,4.127,0.764,6.299,0.764c14.544,0,26.333-11.79,26.333-26.333
			C395.667,312.372,385.813,301.384,373.011,299.594z M336.505,314.902c-0.079,0.771-0.725,1.339-1.478,1.333
			c-0.051,0-0.103-0.004-0.154-0.009l-91.684-10.329c0.023,0.257,0.039,0.516,0.039,0.779c0,0.76-0.109,1.493-0.296,2.192
			l91.473,12.624c0.815,0.112,1.391,0.869,1.286,1.69c-0.098,0.768-0.758,1.32-1.51,1.295c-0.051-0.002-0.103-0.006-0.154-0.013
			l-92.469-12.761c-1.526,2.044-3.954,3.361-6.697,3.337c-4.621-0.041-8.367-3.851-8.367-8.511s3.746-8.404,8.367-8.364
			c3.229,0.029,6.025,1.901,7.42,4.614l92.896,10.465C335.995,313.336,336.589,314.078,336.505,314.902z"/>
		<path class="st5" d="M229.557,306.651c-0.143,0-0.289-0.021-0.433-0.064l-81.333-24.5c-0.793-0.239-1.243-1.076-1.003-1.869
					c0.239-0.793,1.075-1.244,1.869-1.003l81.333,24.5c0.793,0.239,1.243,1.076,1.003,1.869
					C230.797,306.232,230.202,306.651,229.557,306.651z"/>
		<circle class="st5" cx="517.471" cy="307.166" r="3.5"/>
		<circle class="st5" cx="234.667" cy="306.5" r="4"/>
		<polygon class="st4" points="467.535,230.287 461.867,232.754 459.535,226.866 465.202,224.4 				"/>
		<path class="st0" d="M459.07,226.998c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C459.333,226.973,459.201,226.998,459.07,226.998z"/>
		<path class="st0" d="M462.034,234.55c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C462.297,234.525,462.165,234.55,462.034,234.55z"/>
		<polygon class="st4" points="446.285,177.032 440.617,179.498 438.285,173.611 443.952,171.144 				"/>
		<path class="st0" d="M437.57,173.274c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l10-3.988
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-10,3.988
					C437.833,173.249,437.701,173.274,437.57,173.274z"/>
		<path class="st0" d="M440.784,181.294c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C441.047,181.27,440.915,181.294,440.784,181.294z"/>
	<g id="pedali_1_">
	<g id="pedali">
		<g>
			<circle class="st3" cx="368.5" cy="325" r="14.5"/>
			<path class="st5" d="M368.5,340c-8.271,0-15-6.729-15-15s6.729-15,15-15c8.271,0,15,6.729,15,15S376.771,340,368.5,340z
				 M368.5,311c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S376.22,311,368.5,311z"/>
		</g>
		<g>
			<circle class="st0" cx="368.5" cy="325" r="10.625"/>
		</g>
		<g>
			<circle class="st5" cx="368.5" cy="325" r="6.75"/>
		</g>
	</g>
	<g>
<path class="st11" id="motionPath" d="M414.07,325c0,12.584-5.101,23.976-13.347,32.223c-8.247,8.247-19.639,13.347-32.223,13.347
	s-23.976-5.101-32.223-13.347c-8.247-8.247-13.347-19.639-13.347-32.223s5.101-23.976,13.347-32.223
	c8.247-8.247,19.639-13.347,32.223-13.347s23.976,5.101,32.223,13.347C408.969,301.024,414.07,312.416,414.07,325z"/>
		<path class="st3" id="pedal_a" d="M407.688,348.412l-41.117-19.84c-1.981-0.956-2.82-3.359-1.864-5.341l0,0c0.956-1.981,3.359-2.82,5.341-1.864
			l41.117,19.84c1.981,0.956,2.82,3.359,1.864,5.341v0C412.073,348.529,409.67,349.368,407.688,348.412z"/>
		<circle class="st5" cx="368.5" cy="325" r="2.938"/>
	</g>
	<g id="pedal" transform="translate(-409.518, -344.854)">
		<path class="st0" d="M419.783,344.066l-15.02,9.92c-2.295,1.516-5.412,0.878-6.928-1.417l0,0
			c-1.516-2.295-0.878-5.412,1.417-6.928l15.02-9.92c2.295-1.516,5.412-0.878,6.928,1.417l0,0
			C422.715,339.433,422.078,342.55,419.783,344.066z"/>
		<circle class="st3" cx="409.518" cy="344.854" r="2.938"/>
	</g>
</g>
 <defs>
  <pattern id="pattern" x="0" y="0" width="750" height="500" patternUnits="userSpaceOnUse" >
    <path class="st8" d="M741.936,284.582v1.411h-3.629v-3.83h-3.628v-4.839h-13.509v3.025h-2.419v2.621h-2.419v-12.904h-5.645v2.017
	h-8.872v2.823h-2.823v-4.234h-13.709v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.662v-2.218h-2.419v3.226h-2.823v12.702
	h-3.226v-13.71h-2.419v-2.419h-3.226v2.822h-1.613v7.662h-1.412v9.879h-2.017v-5.444h-2.419v-38.106h-2.015v-4.234h-17.743v4.435
	h-1.411v-15.323h-7.057v-2.419h-4.84v3.024h-2.218v30.646h-4.011V235.8v-0.588v-1.47h-5.071v1.47h-7.79v-1.47h-1.47v1.47h-2.94
	v-1.102h-8.451v1.102h-3.748v-10.877h-3.087v-1.176h-3.013v1.176h-1.029v-0.588h-2.646v0.588h-7.643v5.108h-12.861v0.919h-1.102
	v-1.837h-1.911v1.837h-3.601v-0.735h-2.499v0.735h-7.202v4.85h-0.955v5.732h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911
	h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911h0.955v8.367h-5.009v3.226h-0.587c-1.808-12.568-3.408-27.552-4.71-43.757
	c0.901-0.131,2.148-2.217,2.148-3.477c0-1.3-0.174-1.222-1.342-1.221c-0.387,0-0.791,0.201-1.133,0.522
	c-0.091-1.193-0.18-2.392-0.268-3.596c0.455-0.506,0.863-1.371,0.863-1.966c0-0.886-0.118-0.833-0.915-0.832
	c-0.048,0-0.097,0.012-0.146,0.021c-0.936-13.342-1.669-27.294-2.151-41.247h0.054v-1.419h-0.101
	c-0.014-0.433-0.029-0.867-0.043-1.3h1.641v-1.025h-1.674c-0.123-3.937-0.226-7.87-0.308-11.784h1.076v-0.67h-1.497v-1.511h1.497
	v-0.67h-1.497v-1.511h1.536v-0.67h-1.536v-1.511h1.536v-0.67h-1.536h-0.927l0.001-4.056h0.927v-10.329h0.551v-0.63h-0.551v-2.446
	h-1.065v-8.983h-0.591v8.983h-1.025v2.446h-0.67v0.63h0.67v10.329h0.808l-0.001,4.056h-0.808h-1.536v0.67h1.536v1.511h-1.536v0.67
	h1.536v1.511h-1.576v0.67h1.576v1.511h-1.576v0.67h1.016c-0.082,3.914-0.184,7.846-0.307,11.784h-1.615v1.025h1.582
	c-0.554,17.23-1.495,34.521-2.735,50.72c-0.198-0.074-0.399-0.117-0.596-0.117c-1.462-0.001-1.679-0.1-1.679,1.527
	c0,1.209,0.919,3.03,1.856,3.886c-0.709,8.661-1.503,16.961-2.368,24.713H493.54v5.041h-9.678v17.541h-6.25v-2.117h-2.557v-36.838
	v-4.859h-0.572v-1.262h-7.458v-13.341v-6.941h-0.817v-1.803h-75.396v-0.374h1.565v-2.45l-5.308-2.041h-2.382l-1.361,2.041v2.45
	h1.633v0.374h-24.633v1.803h-2.722v-7.281h5.852l5.512-0.68v-0.68h-9.635l-0.367-1.021h-4.287l-0.367,1.021h-1.878v1.361h4.015
	v7.281h-0.885v6.941h0.272l-0.06,1.803h-0.195c-0.365,0-0.663,0.299-0.663,0.664c0,0.365,0.298,0.663,0.663,0.663h0.151
	l-0.313,9.362c-0.287,0.073-0.501,0.332-0.501,0.641c0,0.293,0.194,0.541,0.459,0.628l-1.323,39.607l-1.619-0.023v7.088h-4.03
	l-2.85,0.112v-10.143h0.975c0.288,0,0.367-0.397,0.1-0.506l-1.076-0.442v-0.004h-0.01l-6.17-2.536v-0.945h-0.165v-1.685h0.165
	v-0.586h-0.266v-0.909h0.001l-0.597-0.634v-0.382c0.079-0.032,0.134-0.11,0.134-0.2c0-0.091-0.056-0.168-0.134-0.2v-0.111
	c0-0.045-0.037-0.082-0.082-0.082c-0.046,0-0.083,0.037-0.083,0.082v0.111c-0.079,0.032-0.134,0.11-0.134,0.2
	c0,0.091,0.055,0.168,0.134,0.2v0.382l-0.596,0.634h0.003v0.909h-0.267v0.586h0.165v1.685h-0.165v0.879h-9.089v-9.489l0.339-0.142
	v-0.234l0.412-0.165l0.179-1.333l-1.195-0.385c0,0,0.027-0.508-0.083-0.893c-0.11-0.385-1.951-2.473-2.102-3.023
	c-0.151-0.55-0.137-2.322-0.247-2.652c-0.11-0.33-0.687-0.962-1.237-1.759c-0.55-0.797-0.783-1.223-0.948-1.772
	c-0.12-0.401-0.307-2.15-0.398-3.065v-0.651c0.077-0.024,0.133-0.094,0.133-0.179c0-0.084-0.056-0.155-0.133-0.179v-0.525
	c0.059-0.022,0.102-0.079,0.102-0.146c0-0.067-0.042-0.124-0.102-0.146v-0.528c0.045-0.021,0.076-0.065,0.076-0.118
	c0-0.052-0.031-0.097-0.076-0.118v-0.267c0-0.03-0.025-0.055-0.055-0.055s-0.055,0.025-0.055,0.055v0.267
	c-0.045,0.021-0.076,0.066-0.076,0.118c0,0.052,0.031,0.097,0.076,0.118v0.528c-0.059,0.022-0.102,0.079-0.102,0.146
	c0,0.067,0.042,0.124,0.102,0.146v0.525c-0.077,0.024-0.133,0.094-0.133,0.179c0,0.085,0.056,0.155,0.133,0.179v0.651
	c-0.092,0.915-0.278,2.664-0.398,3.065c-0.165,0.55-0.398,0.976-0.948,1.772c-0.549,0.797-1.127,1.429-1.237,1.759
	s-0.096,2.102-0.247,2.652c-0.151,0.549-1.992,2.638-2.102,3.023c-0.11,0.385-0.082,0.893-0.082,0.893l-1.195,0.385l0.179,1.333
	l0.412,0.165v0.234l0.339,0.142v15.608l-8.287,4.706c-0.325,0.185-0.194,0.68,0.18,0.68h-0.503c-0.635,0-1.154,0.519-1.154,1.154
	v0.147c0,0.635,0.519,1.154,1.154,1.154h0.728v2.448h-2.419v2.621h-2.419v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234h-13.709
	v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.075c-0.005-0.233-0.009-0.465-0.014-0.698
	c-0.025-1.179-0.061-2.358-0.073-3.537c-0.004-0.422,0.064-0.845,0.062-1.268c-0.001-0.16-0.112-0.318-0.168-0.478
	c-0.031-0.088-0.069-0.178-0.074-0.269c-0.007-0.137,0.023-0.275,0.021-0.412c-0.021-1.167-0.042-2.333-0.074-3.5
	c-0.003-0.098-0.083-0.196-0.139-0.287c-0.013-0.021-0.104-0.024-0.107-0.017c-0.083,0.239-0.268,0.108-0.397,0.092
	c-0.234-0.028-0.221-0.26-0.249-0.421c-0.013-0.078,0.074-0.203,0.151-0.259c0.195-0.143,0.399-0.285,0.62-0.378
	c0.274-0.115,0.355-0.327,0.353-0.579c-0.002-0.298-0.026-0.599-0.07-0.894c-0.12-0.801-0.272-1.597-0.38-2.4
	c-0.14-1.033-0.223-2.074-0.384-3.104c-0.082-0.523-0.284-1.027-0.428-1.541c-0.218-0.777-0.408-1.565-0.937-2.211
	c-0.049-0.061-0.08-0.143-0.101-0.22c-0.112-0.404-0.226-0.808-0.325-1.216c-0.152-0.628-0.224-1.261-0.049-1.899
	c0.06-0.219,0.117-0.438,0.178-0.657c0.107-0.382,0.196-0.771,0.331-1.143c0.22-0.608,0.794-0.908,1.224-1.332
	c0.405-0.4,0.836-0.774,1.238-1.177c0.295-0.295,0.549-0.63,0.845-0.923c0.291-0.288,0.587-0.586,0.929-0.804
	c0.425-0.27,0.682-0.663,0.904-1.076c0.274-0.512,0.355-0.598,0.929-0.532c0.097,0.011,0.244,0.092,0.264,0.168
	c0.039,0.147,0.021,0.323-0.133,0.36c0.034,0.105,0.095,0.203,0.094,0.3c-0.009,1.085-0.032,2.171-0.043,3.256
	c-0.013,1.305-0.019,2.611-0.028,3.917c-0.001,0.089-0.012,0.186,0.018,0.265c0.031,0.081,0.096,0.182,0.169,0.205
	c0.054,0.017,0.176-0.057,0.21-0.122c0.071-0.133,0.122-0.284,0.15-0.433c0.256-1.336,0.531-2.669,0.75-4.01
	c0.244-1.494,0.457-2.994,0.643-4.497c0.118-0.955,0.166-1.919,0.238-2.88c0.016-0.218,0.039-0.446-0.006-0.655
	c-0.107-0.5-0.38-0.739-0.785-0.495c-0.384,0.232-0.767,0.502-0.798,1.027c-0.003,0.055-0.018,0.124-0.054,0.159
	c-0.295,0.286-0.331,0.65-0.333,1.03c-0.001,0.15-0.085,0.26-0.242,0.244c-0.529-0.056-0.806,0.286-1.086,0.646
	c-0.096,0.123-0.235,0.212-0.361,0.31c-0.074,0.058-0.162,0.097-0.238,0.153c-0.509,0.37-1.014,0.746-1.525,1.114
	c-0.469,0.337-1.019,0.575-1.297,1.138c-0.052,0.106-0.204,0.197-0.328,0.229c-0.28,0.073-0.487,0.229-0.692,0.424
	c-0.289,0.275-0.567,0.594-1.005,0.635c-0.319,0.03-0.593,0.126-0.826,0.36c-0.149,0.15-0.339,0.087-0.384-0.123
	c-0.033-0.155-0.037-0.323-0.015-0.48c0.047-0.328,0.13-0.651,0.179-0.979c0.112-0.766-0.085-1.163-0.74-1.561
	c-0.113-0.068-0.213-0.165-0.301-0.264c-0.189-0.214-0.409-0.182-0.521,0.076c-0.037,0.085-0.108,0.155-0.164,0.232
	c-0.226,0.312-0.529,0.594-0.549,1.003c-0.025,0.522,0.003,1.047,0,1.571c-0.001,0.124-0.036,0.247-0.063,0.419
	c-0.081-0.072-0.121-0.09-0.124-0.113c-0.049-0.377-0.205-0.71-0.406-1.027c-0.017-0.026-0.022-0.061-0.026-0.093
	c-0.078-0.576-0.201-1.151-0.221-1.73c-0.021-0.587-0.117-1.157-0.205-1.733c-0.135-0.879-0.218-1.766-0.348-2.646
	c-0.076-0.512-0.266-0.97-0.797-1.191c-0.054-0.022-0.092-0.082-0.16-0.147c0.077-0.028,0.106-0.046,0.135-0.048
	c0.139-0.012,0.313,0.045,0.365-0.152c0.05-0.186-0.102-0.263-0.212-0.372c-0.076-0.076-0.141-0.203-0.144-0.308
	c-0.035-1.28-0.063-2.56-0.083-3.84c-0.013-0.819-0.008-1.638-0.014-2.457c-0.008-0.963-0.016-1.927-0.031-2.89
	c-0.002-0.151-0.007-0.319-0.073-0.447c-0.124-0.243-0.282-0.473-0.448-0.691c-0.167-0.22-0.453-0.224-0.624-0.005
	c-0.221,0.283-0.401,0.596-0.391,0.972c0.017,0.68,0.052,1.359,0.068,2.039c0.031,1.256,0.053,2.512,0.08,3.768
	c0.024,1.142,0.043,2.284,0.083,3.426c0.009,0.252,0.021,0.447-0.251,0.582c-0.19,0.094-0.168,0.295,0.034,0.362
	c0.198,0.066,0.219,0.193,0.207,0.354c-0.008,0.104-0.026,0.209-0.053,0.31c-0.173,0.629,0.208,1.056,0.541,1.501
	c0.022,0.029,0.069,0.041,0.106,0.057c0.4,0.185,0.476,0.308,0.326,0.719c-0.194,0.53-0.233,1.082-0.224,1.628
	c0.017,1.024,0.096,2.048,0.15,3.072c0.003,0.048,0.014,0.096,0.023,0.144c0.085,0.47,0.197,0.937,0.247,1.411
	c0.078,0.726,0.262,1.42,0.572,2.075c0.473,0.999,0.751,2.052,0.918,3.138c0.022,0.141-0.033,0.3-0.075,0.444
	c-0.154,0.528-0.324,1.05-0.472,1.58c-0.045,0.162-0.02,0.342-0.063,0.505c-0.257,0.969-0.575,1.926-0.531,2.95
	c0.001,0.024-0.007,0.048-0.009,0.072c-0.089,0.784,0.031,1.525,0.372,2.247c0.135,0.287,0.177,0.643,0.17,0.966
	c-0.011,0.468-0.1,0.934-0.164,1.399c-0.114,0.824-0.034,1.635,0.171,2.433c0.159,0.618,0.167,1.199-0.267,1.719
	c-0.04,0.048-0.075,0.112-0.085,0.173c-0.053,0.318-0.129,0.636-0.14,0.956c-0.022,0.663-0.007,1.328-0.01,1.992
	c-0.001,0.195,0.017,0.395-0.022,0.582c-0.053,0.256-0.157,0.501-0.232,0.753c-0.149,0.502-0.308,1.002-0.432,1.51
	c-0.045,0.185-0.008,0.393,0.004,0.59c0.017,0.279,0.045,0.559,0.068,0.838c-0.022,0.004-0.045,0.009-0.067,0.014
	c-0.041-0.07-0.081-0.14-0.152-0.262c-0.042,0.231-0.098,0.416-0.107,0.604c-0.029,0.563-0.041,1.128-0.057,1.692
	c-0.013,0.459-0.026,0.919-0.037,1.378h-7.208v6.311c-0.561,0.024-1.121,0.058-1.682,0.087c-0.625,0.033-1.25,0.069-1.875,0.096
	c-0.499,0.022-0.998,0.033-1.497,0.051c-0.055,0.002-0.109,0.027-0.163,0.028c-0.209,0.004-0.422,0.029-0.63,0.028v-32.61h-2.015
	v-4.234H212.06v4.435h-1.412v-15.323h-2.733v-2.419h-9.163v3.024h-2.218v30.646h-4.233v-12.097h-1.613v-8.468l-1.008-1.008v-15.323
	h-2.419v-7.258h-8.066v6.25h-2.017v2.823h-1.814v16.532h-2.62v-7.46h-19.76v9.678h-5.04v-1.815h-3.428v2.823h-6.653V237h-5.444
	v-3.428h-9.595v2.621h-5.527v31.049h-5.848v3.226h-3.023v2.924h-7.864v6.956h-1.814v-27.421H82.217v5.041h-9.678v17.541h-6.25
	v-2.117h-4.436v-3.125H49.756v3.125h-6.25v2.52h-2.421V250.71H19.714v27.421h-5.242v-10.887H5.6v13.307H0v15.525v205.203h750
	V296.075v-11.493H741.936z M248.149,269.168c-0.001-0.077,0.313-0.153,0.784-0.23L248.149,269.168z M253.999,267.453
	c0-0.003,0-0.006,0-0.009h0.031L253.999,267.453z M357.06,270.503l1.682-21.568l1.564,21.613L357.06,270.503z M397.815,277.324
	l1.441-18.479l1.268,18.479H397.815z M464.167,270.267h-3.088v3.125h-6.25v2.52h-2.421V250.71h-21.371v27.421h-5.242v-10.887h-8.872
	v13.307h-5.6v5.444h-3.039v-3.83h-3.628v-4.839h-2.577l-0.66-31.142c0.177-0.065,0.305-0.235,0.305-0.434
	c0-0.206-0.137-0.38-0.324-0.44l-0.144-6.562h0.003c0.255,0,0.465-0.209,0.465-0.464c0-0.255-0.209-0.464-0.465-0.464h-0.023
	l-0.028-1.262h12.924v4.049h2.62v-1.286h3.716v-2.763h43.7V270.267z M464.167,230.434h-42.461v-0.262h1.096v-1.715l-3.715-1.429
	h-1.667l-0.953,1.429v1.715h1.143v0.262h-17.243v1.262h-1.905V226.6h4.096l3.858-0.476v-0.476h-6.745l-0.257-0.715h-3.001
	l-0.257,0.715h-1.315v0.953h2.81v5.097h-0.619v4.859h0.191l-0.042,1.262h-0.136c-0.255,0-0.464,0.209-0.464,0.464
	c0,0.255,0.209,0.464,0.464,0.464h0.105l-0.219,6.553c-0.201,0.051-0.351,0.233-0.351,0.449c0,0.205,0.136,0.378,0.321,0.44
	l-1.04,31.136h-4.713v3.025h-2.419v2.621h-2.42v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234l-6.267-0.088l-0.87-39.736
	c0.253-0.094,0.435-0.336,0.435-0.62c0-0.294-0.196-0.543-0.463-0.629l-0.205-9.374h0.004c0.365,0,0.664-0.299,0.664-0.663
	c0-0.365-0.299-0.664-0.664-0.664h-0.033l-0.04-1.803h18.463v5.784h3.743v-1.837h5.308v-3.947h75.124V230.434z M473.054,270.267
	h-6.029v-33.713h6.029V270.267z M508.883,215.096h1.123v6.68h-1.604C508.568,219.569,508.728,217.34,508.883,215.096z
	 M508.365,222.249h1.64v6.207h-1.063c0.358-0.332,0.26-1.088,0.251-2.709c-0.005-0.89-0.392-1.686-0.927-2.226
	C508.3,223.097,508.333,222.675,508.365,222.249z M508.005,252.928h-2.208V250.5c0.048-0.445,0.095-0.896,0.143-1.343h2.066V252.928
	z M508.005,248.684h-2.016c0.228-2.157,0.45-4.351,0.666-6.579h1.349V248.684z M509.779,252.928h-1.302v-3.771h1.302V252.928z
	 M509.779,248.684h-1.302v-6.579h1.302V248.684z M511.79,273.393h-1.065v-4.323h1.066L511.79,273.393z M511.791,268.597h-1.066
	v-6.312h1.067L511.791,268.597z M511.792,261.812h-1.067v-6.581h1.068L511.792,261.812z M511.793,254.758h-1.068v-5.601h1.069
	L511.793,254.758z M511.794,248.684h-1.069v-6.579h1.07L511.794,248.684z M511.795,241.632h-5.094
	c0.399-4.128,0.779-8.367,1.136-12.702h3.96L511.795,241.632z M511.797,228.457h-1.318v-6.207h1.319L511.797,228.457z
	 M511.798,221.777h-1.319v-6.68h1.321L511.798,221.777z M511.799,214.623h-2.883c0.212-3.084,0.412-6.201,0.602-9.34h2.283
	L511.799,214.623z M511.801,204.81h-2.255c0.122-2.041,0.241-4.089,0.354-6.148h1.902L511.801,204.81z M511.802,198.189h-1.877
	c0.052-0.964,0.104-1.93,0.154-2.897h1.724L511.802,198.189z M511.802,194.819h-1.699c0.053-1.023,0.103-2.048,0.153-3.074h1.547
	L511.802,194.819z M511.803,191.272h-1.523c0.042-0.864,0.082-1.73,0.122-2.596h1.402L511.803,191.272z M511.803,188.203h-1.38
	c0.202-4.416,0.382-8.851,0.535-13.286h0.848L511.803,188.203z M511.806,173.498h-0.802c0.014-0.433,0.029-0.867,0.043-1.3h0.759
	V173.498z M511.806,171.173h-0.726c0.123-3.937,0.226-7.87,0.307-11.784h0.42L511.806,171.173z M519.222,254.747
	c0,0.004,0.001,0.007,0.001,0.011h-0.001V254.747z M519.222,255.231h0.056c0.258,2.244,0.522,4.439,0.792,6.581h-0.847V255.231z
	 M519.222,262.284h0.906c0.274,2.16,0.553,4.267,0.838,6.312h-1.744V262.284z M518.557,248.684h-2.016v-6.579h1.349
	C518.107,244.333,518.329,246.527,518.557,248.684z M516.345,224.39c-0.008,1.232-0.08,1.836,0.167,2.115
	c0.052,0.652,0.105,1.303,0.158,1.952h-2.15v-6.207h1.66C516.234,222.966,516.29,223.678,516.345,224.39z M515.784,216.829
	c-0.164,0.261-0.271,0.576-0.273,0.919c-0.007,1.198-0.103,1.53,0.454,1.592c0.059,0.813,0.118,1.628,0.179,2.436h-1.624v-6.68
	h1.143C515.702,215.675,515.743,216.252,515.784,216.829z M512.754,159.389h0.404c0.082,3.914,0.184,7.846,0.307,11.784h-0.713
	L512.754,159.389z M512.752,172.198h0.747c0.014,0.433,0.028,0.867,0.043,1.3h-0.789L512.752,172.198z M512.751,174.917h0.836
	c0.153,4.435,0.333,8.87,0.535,13.286h-1.373L512.751,174.917z M512.749,188.676h1.395c0.04,0.866,0.08,1.732,0.122,2.596h-1.517
	L512.749,188.676z M512.749,191.745h1.541c0.05,1.026,0.1,2.051,0.153,3.074h-1.694L512.749,191.745z M512.748,195.292h1.719
	c0.05,0.967,0.101,1.933,0.153,2.897h-1.873L512.748,195.292z M512.748,198.662h1.898c0.113,2.059,0.231,4.107,0.354,6.148h-2.253
	L512.748,198.662z M512.747,205.283h2.281c0.19,3.139,0.39,6.256,0.602,9.34h-2.884L512.747,205.283z M512.745,215.096h1.302v6.68
	h-1.303L512.745,215.096z M512.744,222.249h1.303v6.207h-1.304L512.744,222.249z M512.743,228.93h3.965
	c0.358,4.336,0.737,8.574,1.136,12.702h-5.104L512.743,228.93z M513.821,273.393h-1.085l0.001-4.323h1.084V273.393z
	 M513.821,268.597h-1.084l0.001-6.312h1.083V268.597z M513.821,261.812h-1.083l0.001-6.581h1.082V261.812z M513.821,254.758h-1.082
	l0.001-5.601h1.081V254.758z M513.821,248.684h-1.081l0.001-6.579h1.08V248.684z M516.068,273.393h-1.301v-4.323h1.301V273.393z
	 M516.068,268.597h-1.301v-6.312h1.301V268.597z M516.068,261.812h-1.301v-6.581h1.301V261.812z M516.068,254.758h-1.301v-5.601
	h1.301V254.758z M516.068,248.684h-1.301v-6.579h1.301V248.684z M518.749,273.393h-2.208v-4.323h2.208V273.393z M518.749,268.597
	h-2.208v-6.312h2.208V268.597z M518.749,261.812h-2.208v-6.581h2.208V261.812z M518.749,254.758h-2.208v-5.601h2.065
	c0.047,0.448,0.095,0.899,0.143,1.344V254.758z M519.751,270.469v2.924h-0.529v-4.323h1.809c0.067,0.473,0.134,0.932,0.201,1.399
	H519.751z"/>
<rect y="391.463" class="st9" width="750" height="109.815"/>
  </pattern>
 </defs>
 <animate 
           xlink:href="#pattern"
           attributeName="x" 
           from="750"
           to="0" 
           dur="25s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze" />
<animateTransform
           xlink:href="#anima_wheel_1"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 234 306.649"
           to="360 234 306.649"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#anima_wheel_front"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 517.471 307.166"
           to="360 517.471 307.166"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#pedal_a"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 368.5 325"
           to="360 368.5 325"
           dur="20s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateMotion 
           xlink:href="#pedal"
           dur="20s"
           begin="-1.4s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>
</div>

查看文章跳到评论

广西南宁市 2017-12-27 11:02

#0

阅读 24.5万

JS酷炫红色LED数字时钟

Canvas火箭飞行动画特效

<style>
html { overflow: hidden; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #333;
	background: #01374b;
}
</style>



<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/e1a69117e6aecb75c3395c448e18f25b"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/c2a59b97857e9d09aa1a7b115ae3c004"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/06a8f1198a7210b3a891b79a4af9242e"></script>

<div id="container"></div>

<script type="text/javascript">
var OutlineShader = {

	uniforms: {
		offset: { type: 'f', value: 0.3 },
		color: { type: 'v3', value: new THREE.Color('#000000') },
		alpha: { type: 'f', value: 1.0 }
	},

	vertexShader: [

		"uniform float offset;",

		"void main() {",
		"  vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );",
		"  gl_Position = projectionMatrix * pos;",
		"}"

	].join('\n'),

	fragmentShader: [

		"uniform vec3 color;",
		"uniform float alpha;",

		"void main() {",
		"  gl_FragColor = vec4( color, alpha );",
		"}"

	].join('\n')

};

var container = document.getElementById( 'container' );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.domElement.style.cursor = 'pointer';

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 100000 );
camera.position.set( 0, -6, 3 );

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.y = 1;
controls.enableDamping = true;
controls.enabled = false;

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x01374b );
scene.fog = new THREE.Fog( scene.background, 10, 20 );

// lights
var aLight = new THREE.AmbientLight( 0x555555 );
scene.add( aLight );

var dLight1 = new THREE.DirectionalLight( 0xffffff, 0.4 );
dLight1.position.set( 0.7, 1, 1 );
scene.add( dLight1 );

// var dlh1 = new THREE.DirectionalLightHelper( dLight1, 0.5 );
// scene.add( dlh1 );

// var gh = new THREE.GridHelper( 2, 10, 0x000000, 0x808080 );
// scene.add( gh );

// -------------------------------------------

var rocketGroup = new THREE.Group();
scene.add( rocketGroup );

var rocket = new THREE.Group();
rocket.position.y = -1.5; // vertically center
rocketGroup.add( rocket );

// -------------------------------------------

// body

var points = [];

points.push( new THREE.Vector2( 0, 0 ) ); // bottom

for ( var i = 0; i < 11; i ++ ) {
	var point = new THREE.Vector2(
		Math.cos( i * 0.227 - 0.75 ) * 8,
		i * 4.0
	);

	points.push( point );
}

points.push( new THREE.Vector2( 0, 40 ) ); // tip

var rocketGeo = new THREE.LatheGeometry( points, 32 );

var rocketMat = new THREE.MeshToonMaterial({
	color: 0xcccccc,
	shininess: 1
});

var rocketOutlineMat = new THREE.ShaderMaterial({
	uniforms: THREE.UniformsUtils.clone( OutlineShader.uniforms ),
	vertexShader: OutlineShader.vertexShader,
	fragmentShader: OutlineShader.fragmentShader,
	side: THREE.BackSide,
});

var rocketObj = THREE.SceneUtils.createMultiMaterialObject(
	rocketGeo, [ rocketMat, rocketOutlineMat ]
);
rocketObj.scale.setScalar( 0.1 );
rocket.add( rocketObj );

// var wireframe = new THREE.WireframeGeometry( rocketGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// rocketObj.add( line );

// -------------------------------------------

// window

var portalGeo = new THREE.CylinderBufferGeometry( 0.26, 0.26, 1.6, 32 );
var portalMat = new THREE.MeshToonMaterial({ color: 0x90dcff });
var portalOutlineMat = rocketOutlineMat.clone();
portalOutlineMat.uniforms.offset.value = 0.03;
var portal = THREE.SceneUtils.createMultiMaterialObject(
	portalGeo, [ portalMat, portalOutlineMat ]
);
portal.position.y = 2;
portal.rotation.x = Math.PI / 2;
rocket.add( portal );

// ------------

var circle = new THREE.Shape();
circle.absarc( 0, 0, 3.5, 0, Math.PI * 2 );

var hole = new THREE.Path();
hole.absarc( 0, 0, 3, 0, Math.PI * 2 );
circle.holes.push( hole );

var tubeExtrudeSettings = {
	amount: 17,
	steps: 1,
	bevelEnabled: false
};
var tubeGeo = new THREE.ExtrudeGeometry( circle, tubeExtrudeSettings );
tubeGeo.computeVertexNormals();
tubeGeo.center();
var tubeMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1
});
var tubeOutlineMat = rocketOutlineMat.clone();
tubeOutlineMat.uniforms.offset.value = 0.2;
var tube = THREE.SceneUtils.createMultiMaterialObject(
	tubeGeo, [ tubeMat, tubeOutlineMat ]
);
tube.position.y = 2;
tube.scale.setScalar( 0.1 );
rocket.add( tube );

// var wireframe = new THREE.WireframeGeometry( tubeGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// tube.add( line );

// -------------------------------------------

// wing

var shape = new THREE.Shape();

shape.moveTo( 3, 0 );
shape.quadraticCurveTo( 25, -8, 15, -37 );
shape.quadraticCurveTo( 13, -21, 0, -20 );
shape.lineTo( 3, 0 );

var extrudeSettings = {
	steps: 1,
	amount: 4,
	bevelEnabled: true,
	bevelThickness: 2,
	bevelSize: 2,
	bevelSegments: 5
};

var wingGroup = new THREE.Group();
rocket.add( wingGroup );

var wingGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );
wingGeo.computeVertexNormals();
var wingMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1,
});
var wingOutlineMat = rocketOutlineMat.clone();
wingOutlineMat.uniforms.offset.value = 1;
var wing = THREE.SceneUtils.createMultiMaterialObject(
	wingGeo, [ wingMat, wingOutlineMat ]
);
wing.scale.setScalar( 0.03 );
wing.position.set( .6, 0.9, 0 );
wingGroup.add( wing );

// var wireframe = new THREE.WireframeGeometry( wingGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// wing.add( line );

var wing2 = wingGroup.clone();
wing2.rotation.y = Math.PI;
rocket.add( wing2 );

var wing3 = wingGroup.clone();
wing3.rotation.y = Math.PI / 2;
rocket.add( wing3 );

var wing4 = wingGroup.clone();
wing4.rotation.y = - Math.PI / 2;
rocket.add( wing4 );

// -------------------------------------------

// fire and stars particles

// https://aerotwist.com/tutorials/creating-particles-with-three-js/
// https://aerotwist.com/static/tutorials/creating-particles-with-three-js/demo/
// downloads/paul-lewis-aerotwist/particles-r88

var Particles = function( options ) {

	var color = this.color = options.color || 0x333333;
	var size = this.size = options.size || 0.4;

	var pointCount = this.pointCount = options.pointCount || 40; // 1800
	var rangeV = this.rangeV = options.rangeV || 2; // 600
	var rangeH = this.rangeH = options.rangeH || 1;

	var speed = this.speed = this.speedTarget = options.speed || 0.0005;

	THREE.Group.call( this );

	// circle texture

	var canvas = document.createElement('canvas');
	canvas.width = canvas.height = 128;
	var ctx = canvas.getContext( '2d' );

	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.width / 3;

	ctx.beginPath();
	ctx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
	ctx.fillStyle = '#fff';
	ctx.fill();

	var texture = new THREE.Texture( canvas );
	texture.premultiplyAlpha = true;
	texture.needsUpdate = true;

	//

	var pointsGeo = new THREE.Geometry();
	var pointsMat = new THREE.PointsMaterial({
		color: color,
		size: size,
		map: texture,
		transparent: true,
		depthWrite: false
	});

	for (var p = 0; p < pointCount; p++) {

		var point = new THREE.Vector3(
			THREE.Math.randFloatSpread( rangeH ),
			THREE.Math.randFloatSpread( rangeV ),
			THREE.Math.randFloatSpread( rangeH )
		);

		point.velocity = new THREE.Vector3( 0, -Math.random() * speed * 100, 0);

		pointsGeo.vertices.push( point );
	}

	var points = this.points = new THREE.Points( pointsGeo, pointsMat );
	points.position.y = - rangeV / 2;
	points.sortParticles = true;

	this.add( points );

}

Particles.prototype = Object.create( THREE.Group.prototype );
Particles.prototype.constructor = Particles;

Particles.prototype.update = function(){
	// this.points.rotation.y -= 0.01; // 0.01

	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
			point.velocity.y = 0;
		}

		// update the velocity
		point.velocity.y -= Math.random() * this.speed; // .1

		// and the position
		point.add( point.velocity );
	}

	this.points.geometry.verticesNeedUpdate = true;
}

Particles.prototype.updateConstant = function(){
	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
		}

		point.y -= this.speed;
	}

	this.points.geometry.verticesNeedUpdate = true;
}

// orange
var fire = new Particles({
	color: 0xff5a00,
	size: 0.4,
	rangeH: 0.8,
	rangeV: 2.5,
	pointCount: 50 
});
rocket.add( fire );

// yellow
var fire2 = new Particles({
	color: 0xffc000,
	size: 0.6,
	rangeH: 0.5
});
rocket.add( fire2 );

// var box = new THREE.BoxHelper( fire.points );
// fire.add( box );

// -------------------------------------------

// stars

var stars = new Particles({
	color: 0xffffff,
	size: 0.6,
	rangeH: 20,
	rangeV: 20,
	pointCount: 400,
	size: 0.2,
	speed: 0.1
});

stars.points.position.y = 0;
scene.add( stars );

// -------------------------------------------

// input

//

var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
// var helper = new THREE.PlaneHelper( plane, 5, 0xffff00 );
// scene.add( helper );

var rocketTarget = new THREE.Vector3();

var cameraTarget = new THREE.Vector3();
cameraTarget.copy( camera.position );

var raycaster = new THREE.Raycaster();

//

var mouse = new THREE.Vector2();

// var targetSphere = new THREE.Mesh(
// 	new THREE.SphereBufferGeometry( 0.2 ),
// 	new THREE.MeshPhongMaterial({ color: 0x00ff00 })
// );

// scene.add( targetSphere );

function mousemove(e){
	mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

	cameraTarget.x = - mouse.x * 1;
	cameraTarget.z = 3 + mouse.y * 1;

	raycaster.setFromCamera( mouse, camera );
	raycaster.ray.intersectPlane( plane, rocketTarget );
	// targetSphere.position.copy( rocketTarget );
}

function mousedown(e){

	TWEEN.removeAll();

	// rotation
	var dir = mouse.x < 0 ? -1 : 1;
	var tween = new TWEEN.Tween( rocket.rotation )
		.to( { y: dir * Math.PI }, 1000 )
		.easing( TWEEN.Easing.Quadratic.InOut )
		.start();

	// scale
	var tween = new TWEEN.Tween( rocketGroup.scale )
		.to( { y: 0.7 }, 300 )
		.easing( TWEEN.Easing.Cubic.Out )
		.onComplete(function(){
			
			var tween = new TWEEN.Tween( rocketGroup.scale )
				.to( { y: 1.3 }, 300 )
				.easing( TWEEN.Easing.Cubic.In )
				.onComplete(function(){

					var tween = new TWEEN.Tween( rocketGroup.scale )
						.to( { y: 1 }, 200 )
						.easing( TWEEN.Easing.Cubic.Out )
						.start();

				})
				.start();

		})
		.start();

	stars.speedTarget = 0.3;

	renderer.domElement.style.cursor = 'none';
}

function mouseup(e){
	stars.speedTarget = 0.1;
	renderer.domElement.style.cursor = 'pointer';
}

renderer.domElement.addEventListener('mousemove', mousemove, false);
renderer.domElement.addEventListener('mousedown', mousedown, false);
renderer.domElement.addEventListener('mouseup', mouseup, false);

// -------------------------------------------

window.addEventListener( 'resize', resize, false );

function resize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

var clock = new THREE.Clock();
var time = 0;
var angle = THREE.Math.degToRad( 3 );

loop();

function loop() {
	requestAnimationFrame( loop );
	TWEEN.update();
	controls.update();

	time += clock.getDelta();

	rocketGroup.rotation.y = Math.cos( time * 8 ) * angle;

	fire.update();
	fire2.update();

	stars.updateConstant();

	lerp(rocketGroup.position, 'y', rocketTarget.y);
	lerp(rocketGroup.position, 'x', rocketTarget.x);

	lerp(camera.position, 'x', cameraTarget.x);
	lerp(camera.position, 'z', cameraTarget.z);

	lerp(stars, 'speed', stars.speedTarget);

	renderer.render( scene, camera );
}

function lerp( object, prop, destination ) {
	if (object && object[prop] !== destination) {
		object[prop] += (destination - object[prop]) * 0.1;

		if (Math.abs(destination - object[prop]) < 0.01) {
			object[prop] = destination;
		}
	}
}
</script>

查看文章跳到评论

lizhenqiu blog

最新评论聚合

CSS3实现垂直居中

免费ssl证书：网站域名使用 https (nginx) 访问配置参考

微信小程序开发笔记

程序员编程常用网页工具集[游戏]

微信小程序自定义选项卡tabBar模板底部顶部导航

微信小程序自定义选项卡tabBar模板底部顶部导航

微信小程序自定义选项卡tabBar模板底部顶部导航

在新旧年交替的时候给自己励志

301重定向PHP代码 PHP的301自动跳转代码

@意见反馈/技术支持/伊网/安企网

Yourphp，thinkphp修改分页代码

微信小程序开发笔记

免费ssl证书：网站域名使用 https (nginx) 访问配置参考

BAT巨头"阵亡全家桶"

BAT巨头"阵亡全家桶"

理解box-sizing布局

jQuery手机端省市区联动代码

JS酷炫红色LED数字时钟

JS酷炫红色LED数字时钟

JS酷炫红色LED数字时钟