当前位置：首页 > 网页特效 > 动画效果

HTML5 SVG超酷表单运动模糊动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该运动模糊特效的HTML结构中，div.modal-overlay是一个遮罩层，div.modal是表单，还有一个svg元素，是用于制作运动模糊的SVG过滤器。

```html
<button class="open-modal">Open Modal</button>
<div class="modal-overlay"></div>
<div class="modal">
  <button class="close-modal">×</button>
  <div class="icon">
    <i class="fa fa-user-plus"></i> 
  </div>
  <h1>Some Title</h1>
  <input class="input-text" type="text" placeholder="some field"/>
  <input class="input-text" type="text" placeholder="some other field"/>
  <input class="input-submit" type="submit" value="Some Button"/>
</div>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
    <defs>
      <filter id="blur">
          <feGaussianBlur id="blur-filter" in="SourceGraphic" stdDeviation="0,0" ></feGaussianBlur>
      </filter>
  </defs>
</svg>     
```   
#####  CSS样式
在CSS样式中，遮罩层开始设置透明度为0，visibility: hidden;将其隐藏，后面采用jQuery代码来动态显示它。

```html
.modal-overlay {
  background: rgba(51,51,68,0.4);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
}          
```      
表单元素.modal设置了固定大小，并使用filter属性为它绑定SVG过滤器。同时还使用translate3d将其在Y轴方向上隐藏起来。

```html
.modal {
  background: #eeeaea;
  text-align: center;
  width: 230px;
  height: 320px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 3px;
  margin: auto;
  padding: 20px;
  -webkit-filter: url("#blur");
          filter: url("#blur");
  -webkit-transform: translate3d(0, -900%, 0);
          transform: translate3d(0, -900%, 0);
}  
```              
为了制作input元素占位符效果，分别使用了不同浏览器厂商前缀的-placeholder属性。

```html
::-webkit-input-placeholder {
  color: #334;
}
::-moz-placeholder {
  color: #334;
}
:-ms-input-placeholder {
  color: #334;
}
::placeholder {
  color: #334;
}   
```             
#####  JAVASCRIPT
在js代码中，通过setBlur(v)函数来设置动画模糊效果，参数v是通过计算得出的dx和dy值。

```html
var $obj=$(".modal")
  ,$overlay=$(".modal-overlay")
  ,blur=$("#blur-filter").get(0)
;
 
function setBlur(v){
  blur.setAttribute("stdDeviation", v);
}
function getPos(){
  return $obj.position();
}
 
var lastPos=getPos();
function update(){
  var pos=getPos();
  var limit=20;
  var dx=Math.min(limit,Math.abs(pos.left-lastPos.left)*0.5);
  var dy=Math.min(limit,Math.abs(pos.top-lastPos.top)*0.5);
  setBlur(dx+","+dy);
   
  lastPos=pos;
  requestAnimationFrame(update);
}
update();     
```           
表单模态窗口的打开和关闭由TweenMax.js来完成。分别使用openModal()和closeModal()函数来实现。

```html
var isOpen=false;
function openModal(){
  TweenMax.to($overlay,0.1,{autoAlpha:1});
   
  TweenMax.fromTo($obj,0.6,{y:-($(window).height()+$obj.height())},{delay:0.2,y:"0%",ease:Elastic.easeOut,easeParams:[1.1,0.7],force3D:true});
}
function closeModal(){
  TweenMax.to($overlay,0.1,{delay:0.55,autoAlpha:0});
  TweenMax.to($obj,0.55,{y:$(window).height()+$obj.height(),ease:Back.easeIn,force3D:true});
}
$(".open-modal").click(function(){
    openModal();
});
$(".close-modal,.modal-overlay,.input-submit").click(function(){
  closeModal();
});   
```

web299.com

HTML5 SVG超酷表单运动模糊动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果