css 漸變跟隨鼠標光標按鈕動畫

何使用css實現漸變跟隨鼠標光標的懸停效果。如下圖：

實現思路：

聲明 --x 和- -y 兩個 CSS 變量，用于跟蹤鼠標在按鈕上的位置。
聲明一個 --size 的 CSS 變量，用于修改背景漸變的尺寸大小。
使用 background: radial-gradient(circle closest-side, pink, transparent) 創建按鈕的徑向漸變背景效果。
使用document.querySelector()和EventTarget.addEventListener()給按鈕綁定'mousemove'事件。
使用element.getBoundingClientRect()和CSSStyleDeclaration.setProperty() 更新 --x 和--y 變量的值。

html：

<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

css：

/*按鈕基本樣式*/
.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
  position: relative;
}
/*按鈕漸變背景，這里使用偽類實現，并且使用transform動畫*/
.mouse-cursor-gradient-tracking:before {
  --size: 0; /*漸變背景尺寸*/
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  /*背景漸變*/
  background: radial-gradient(circle closest-side, pink, transparent);
  /*動畫效果*/
  transform: translate(-50%, -50%); 
  transition: width 0.2s ease, height 0.2s ease;
}
/*鼠標經過按鈕時*/
.mouse-cursor-gradient-tracking:hover:before {
  --size: 200px;
}

javascript：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 300px;
				height: 300px;
				border: 2px solid black;
				background-color: yellow;
			}
		</style>
		<script>

			var w;
			var h;
			// currentStyle IE
			var i=1;
			var j=1;
			var c=0;
			function cool(name,value){
				var odiv=document.getElementById('box');
				var obj_w=getComputedStyle(odiv,false).width;
				var obj_h=getComputedStyle(odiv,false).height;
				var obj_c=getComputedStyle(odiv,false).backgroundColor;
				if(name=='width'){
					 w=parseInt(obj_w)+parseInt(value)*i+'px';
					 i+=1;
					odiv.style[name]=w;
				}
				else if(name=='height'){
					h=parseInt(obj_h)+parseInt(value)*j+'px';
					j+=1;
					odiv.style[name]=h;
				}else if(name=='backgroundColor')
				{
					if(c==value.length)
						c=0;
					odiv.style[name]=value[c]
					c+=1;  
				}

			}
		</script>
	</head>
	<body>
		<input  type="button" value="變寬" onclick="cool('width','100');"/>
		<input  type="button" value="變高" onclick="cool('height','100');"/>
		<input  type="button" value="變紅" onclick="cool('backgroundColor',['red','yellow','pink','purple']);"/>
		<br>
		<div id="box"></div>
	</body>
</html>

為了方便用戶更好使用web組態，最近提供了用戶自定義組件的功能。在實施項目中就可以使用自己的組件了！

首先我們登陸系統就會看到新增的組件管理選項如下圖：

點擊添加組件選擇2D組件我們就可以建立一個自己的組件了

《組件設計器》由基礎設置（包括名稱 code 類型狀態 icon 次序號）HTML編輯區域 CSS編輯區域 JS編輯區域和預覽區域組成。

首先我們給組件起一個‘名字’ 和 ‘code’，在url輸入框中可以給組件設置一個icon。點擊保存系統會為我們建立一個組件模板。

由于web組態是由vue開發的所以開發組件也需要vue的的基礎知識。建議去看下vue的教程及生命周期，以方便開發組件。以下我附上vue生命周期圖及組件代碼。

我們就開始設計一個炫酷的按鈕作為例子

HTML代碼如下：

<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>

這里:

style="imrstyle"：樣式在web組態設計器中呈現的樣式

v-show="controlProp.commProp.visible"：可見性在web組態設計器中可實現顯示或閃爍

{{controlProp.textProp.text}}：文本對應組件的文本屬性

更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

CSS代碼如下：

.btn123 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      z-index: 1;
    }
    
    .btn123:hover {
      animation: animate 8s linear infinite;
    }
    
    @keyframes animate {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }
    
    .btn123::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -9999;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 40px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .btn123:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite;
    }

JS代碼如下：

export default {
  props: {
    controlProp: Object //作為web組態設計器的繼承屬性
  },
  data() {
    return {
    }
  },
  computed: {
    imrstyle: function () {  //imrstyle 作為web組態設計器的控制樣式
      let maxWidth=this.controlProp.commProp.width
      let maxHeight=this.controlProp.commProp.height
      if (this.controlProp.textProp && this.controlProp.textProp.padding) {
        maxWidth=maxWidth - this.controlProp.textProp.padding * 2
        maxHeight=maxHeight - this.controlProp.textProp.padding * 2
      }
      return {
        // 'max-width': maxWidth+ 'px',
        // 'max-height': maxHeight+ 'px',
        width: '100%',
        height: '100%',
        'box-sizing': 'content-box',
        background: 'transparent',
        'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',
        'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',
        'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',
        'line-height': maxHeight + 'px',
        'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',
        'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',
        'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',
        'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initImports() {
      return {

      }
    },
    initProp() {   //初始化狀態 （基礎屬性 特殊屬性 文本屬性）
      return {
        commProp: { // 基礎屬性  
          width: 80,
          height: 30,
          borderwidth: 0,
          backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',
          borderradius:5
        },
        spProp:{ // 特殊屬性
          },
        textProp: { // 文本屬性
          text: 'Button',
          fontsize: 12,
          fontcolor: 'black',
          horizonalign: 'center',
          verticalalign: 'middle',
          padding: 0,
          margin: 0
        },
        spPropSetting: [ // 特殊屬性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup
        ]
      }
    }
  }
}

這里需要注意：

initProp()：方法中實現對組件的基礎屬性文本屬性特殊屬性的初始化配置

更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

點擊保存這樣我們設計的組件就顯示出來了！是不是很簡單。

這樣在我們的web組態中就可以使用我們自定義的組件了！[大笑][大笑][大笑]

在線咨詢

上一篇：Sublime Text常用快捷鍵和插件
下一篇：計育韜：照片過多，公眾號如何優雅排版設計？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css 漸變跟隨鼠標光標按鈕動畫

您的項目需求