立体动画按钮、切换开关

立体动画按钮、切换开关

实例名称:立体动画按钮、切换开关
在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp

HTML代码:

<div id="app"></div>

CSS代码:

body {
  background-color:#FFFCF9;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
 
}
#app{
  width:100%;
  height:100%;
 
}

.hit{
 cursor:pointer;
 -webkit-tap-highlight-color:transparent;
}

JS代码:

class BaubleToggle extends React.Component {
 constructor(props) {
  super(props);
  this.state = { on: true };

 }

 toggle = e => {
  this.setState({ on: !this.state.on });
 };

 componentDidMount() {
  this.toggle();
 }

 componentDidUpdate = e => {
  let tl = new TimelineMax();

  tl
   .to([this.dotLBg, this.dotGroup], 1, {
    x: this.state.on ? 84 : 0,
    transformOrigin: "50% 50%",
    ease: Power3.easeInOut
   })
   .to(
    this.toggleBg,
    1,
    {
     fill: this.state.on ? "#43B86C" : "#BC4B51",
     ease: Sine.easeInOut
    },
    "-=1"
   )
   .to(
    this.patternColor,
    1,
    {
     fill: this.state.on ? "#43B86C" : "#BC4B51",
     ease: Power3.easeInOut
    },
    "-=1"
   )
   .to(
    this.starPattern,
    1,
    {
     attr: {
      x: this.state.on ? 210 : 0
     },
     transformOrigin: "50% 50%",
     ease: Power3.easeInOut
    },
    "-=1"
   )
   .to(
    ".baubleGradStopColor",
    1,
    {
     stopColor: this.state.on ? "#184A13" : "#491615"
    },
    "-=1"
   );
  
  tl.timeScale(1.32)

 };

 render() {
  return (
   <svg
    viewBox="0 0 800 600"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    preserveAspectRatio="xMidYMid slice"
   >
    <defs>
     <radialGradient
      id="baubleShineGrad"
      cx="352.79"
      cy="293.87"
      r="26"
      gradientUnits="userSpaceOnUse"
     >
      <stop offset="0.01" stopColor="#fff" stopOpacity="0.5" />
      <stop offset="0.69" stopColor="#fff" stopOpacity="0" />
     </radialGradient>
     <radialGradient
      id="baubleGrad"
      cx={358}
      cy={298}
      r={26}
      gradientUnits="userSpaceOnUse"
     >
      <stop offset="0.5" stopColor="#FABE2B" stopOpacity={0} />
      <stop
       offset="0.8"
       className="baubleGradStopColor"
       stopColor="#491615"
       stopOpacity="0.15"
      />
      <stop
       offset={1}
       className="baubleGradStopColor"
       stopColor="#491615"
       stopOpacity="0.65"
      />
     </radialGradient>
     <filter
      id="baubleShadow"
      width="350%"
      height="350%"
      colorInterpolationFilters="sRGB"
     >
      <feGaussianBlur stdDeviation="4" result="coloredBlur" />
      <feOffset dx="0" dy="23" result="offsetblur" />
      <feFlood id="dropShadowAlpha" floodColor="#000" floodOpacity="0.21" />
      <feComposite in2="offsetblur" operator="in" />
      <feMerge>
       <feMergeNode />
      </feMerge>
     </filter>
    

     <linearGradient
      id="baubleCapGrad"
      x1="351.26"
      y1="272.94"
      x2="364.74"
      y2="272.94"
      gradientUnits="userSpaceOnUse"
     >
      <stop offset="0.09" stopColor="#f5bb3b" />
      <stop offset="0.31" stopColor="#fff" />
      <stop offset="0.51" stopColor="#f5bb3b" />
      <stop offset="0.86" stopColor="#bd902d" />
      <stop offset="1" stopColor="#f5bb3b" />
     </linearGradient>

     <pattern
      id="starPattern"
      ref={starPattern => {
       this.starPattern = starPattern;
      }}
      width={92}
      height={92}
      patternTransform="translate(-10.02 -3.42) scale(0.33)"
      patternUnits="userSpaceOnUse"
      viewBox="0 0 92 92"
      x={0}
      y={0}
     >
      <rect width={184} height={184} fill="none" />
      <g
       ref={patternColor => {
        this.patternColor = patternColor;
       }}
       fill="#BC4B51"
      >
       <polygon points="84.19 73.59 95.3 83.17 109.49 79.45 103.83 92.99 111.76 105.34 97.14 104.12 87.87 115.48 84.5 101.19 70.83 95.86 83.36 88.25 84.19 73.59" />
       <polygon points="45.58 87.84 48.09 90 51.3 89.16 50.02 92.22 51.81 95.02 48.51 94.74 46.41 97.31 45.65 94.08 42.55 92.87 45.39 91.15 45.58 87.84" />
       <polygon points="-7.82 73.59 3.3 83.17 17.49 79.45 11.82 92.99 19.76 105.34 5.14 104.12 -4.13 115.48 -7.5 101.19 -21.18 95.86 -8.64 88.25 -7.82 73.59" />
       <polygon points="39.53 27.59 50.65 37.17 64.83 33.45 59.17 46.99 67.11 59.34 52.49 58.12 43.21 69.48 39.84 55.19 26.17 49.86 38.7 42.25 39.53 27.59" />
       <polygon points="84.19 -18.41 95.3 -8.82 109.49 -12.55 103.83 0.99 111.76 13.34 97.14 12.12 87.87 23.48 84.5 9.19 70.83 3.86 83.36 -3.75 84.19 -18.41" />
       <polygon points="90.23 41.84 92.75 44 95.95 43.16 94.67 46.22 96.47 49.02 93.16 48.74 91.06 51.31 90.3 48.08 87.21 46.87 90.05 45.15 90.23 41.84" />
       <polygon points="45.58 -4.16 48.09 -2 51.3 -2.84 50.02 0.22 51.81 3.02 48.51 2.74 46.41 5.31 45.65 2.08 42.55 0.87 45.39 -0.85 45.58 -4.16" />

       <polygon points="-7.82 -18.41 3.3 -8.82 17.49 -12.55 11.82 0.99 19.76 13.34 5.14 12.12 -4.13 23.48 -7.5 9.19 -21.18 3.86 -8.64 -3.75 -7.82 -18.41" />
       <polygon points="-1.77 41.84 0.75 44 3.96 43.16 2.67 46.22 4.47 49.02 1.16 48.74 -0.94 51.31 -1.7 48.08 -4.79 46.87 -1.96 45.15 -1.77 41.84" />
      </g>
     </pattern>

    <filter id="insetShadow">
     
      <feOffset
        dx='0'
        dy='14'
      />

      <feGaussianBlur
        stdDeviation='5'
        result='offset-blur'
      />

      <feComposite
        operator='out'
        in='SourceGraphic'
        in2='offset-blur'
        result='inverse'
      />


      <feFlood
        floodColor='black'
        floodOpacity='0.5'
        result='color'
      />

      <feComposite
        operator='in'
        in='color'
        in2='inverse'
        result='shadow'
      />

      <feComposite
        operator='over'
        in='shadow'
        in2='SourceGraphic'
      />
    </filter>
  
     
     <filter
      id="dropShadow"
      width="350%"
      height="350%"
      colorInterpolationFilters="sRGB"
     >
      <feGaussianBlur stdDeviation="4" result="coloredBlur" />
      <feOffset dx="0" dy="3" result="offsetblur" />
      <feFlood id="dropShadowAlpha" floodColor="#000" floodOpacity="0.4" />
      <feComposite in2="offsetblur" operator="in" />
      <feMerge>
       <feMergeNode />
       <feMergeNode in="SourceGraphic" />
      </feMerge>
     </filter>
    </defs>

    <rect filter="url(#insetShadow)"
     ref={toggleBg => {
      this.toggleBg = toggleBg;
     }}
     x="321"
     y="263"
     width="158"
     height="74"
     rx="37"
     ry="37"
     fill="#B74452"
    />

    <rect
     filter="url(#baubleShadow)"
     ref={dotGroup => {
      this.dotGroup = dotGroup;
     }}
     width="52"
     height="52"
     x="332"
     y="274"
     rx="26"
     ry="26"
     fill="#000"
     opacity="1"
    />
    <g>
     <g
      ref={dotLBg => {
       this.dotLBg = dotLBg;
      }}
     >
      <path
       d="M355.68,270.7a3,3,0,0,1-.65-1.86,3,3,0,0,1,5.94,0,3,3,0,0,1-.65,1.86"
       fill="none"
       stroke="#DCA014"
       stroke-miterlimit="10"
       strokeWidth="1.5"
      />
      <path
       d="M363.88,270.29H352.13a.87.87,0,0,0-.87.86v3.52a.87.87,0,0,0,1.73,0l10,.06h0a.87.87,0,0,0,1.73,0v-3.59A.87.87,0,0,0,363.88,270.29Z"
       fill="url(#baubleCapGrad)"
      />
      <circle cx="358" cy="300" r="26" fill="#FFFCF9" />

      <circle cx="358" cy="300" r="26" fill="url(#starPattern)" />
      <circle cx="358" cy="300" r="26.1" fill="url(#baubleGrad)" />
      <circle
       cx="358"
       cy="300"
       r="26"
       fill="url(#baubleShineGrad)"
       /*       ref={dotGrad => {
       this.dotGrad = dotGrad;
      }} */
      />
     </g>
    </g>
    <rect
     onClick={this.toggle}
     ref={hit => {
      this.hit = hit;
     }}
     className="hit"
     x="321"
     y="263"
     width="158"
     height="74"
     rx="37"
     ry="37"
     fill="transparent"
    />
   </svg>
  );
 }
}

ReactDOM.render(<BaubleToggle />, document.querySelector("#app"));

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3880.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年10月16日 下午9:02
下一篇 2019年10月17日 下午9:07

99%的人还看了以下文章

  • 鼠标指向图片实现放大效果-CSS3特效

    鼠标指向图片实现放大效果,多用于产品展示,可以通过Js,jquery来实现。为更好的优化网站,最好的方法还是纯css来实现。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现鼠标指向图片放大效果|…

    2018年7月14日
    3.1K0
  • CSS+JS制作纵向点击展开的二级导航菜单

    网页制作时,如产品分类目录、导航等,需要制作纵向二级导航菜单,点击展开分类显示子目录,再点击收缩起目录。 中国网页设计分享的二级导航菜单使用CSS+JS制作,调用简单方便,可移植、可修改。 网页HTML代码(放在body区域): <div id=”my_menu” class=”sdmenu”> <div> <span>教…

    2018年9月19日
    3.4K0
  • 纯css实现的三级下拉导航菜单

    非常简洁的一个三级导航菜单,纯css实现,适用于企业产品分类导航等,代码精简,兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

    2019年11月1日
    4.2K0
  • 点击按钮发送验证码,隔10秒再次发送倒计时效果-JS代码

    为了防止用户恶意获取短信验证码或邮箱验证,在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。 需要隔10秒再次发送, 实现这个功能,需要用到setInterval和clearInterval。 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearIn…

    2019年10月31日
    3.0K0
  • 点击弹出带关闭按钮的窗口特效(兼容所有浏览器)

    弹出页面被大多浏览器拦截,现在多数改为弹出窗口,即通过弹出层来实现,今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

    2018年5月9日
    3.8K0
  • 超酷的HTML5 3D图片旋转动画特效

    中国网页设计分享的一款HTML5 3D图片动画特效,使用js动画框架TweenMax 技术实现。 这款HTML5 3D动画非常酷,当在图片上面拖动鼠标时,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。 效果演示      源码下载

    2018年9月28日
    5.2K0

发表回复

登录后才能评论