经验分享程序开发文档资料数据资源其它资源

Canvas鼠标经过碎片高亮变化特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Canvas鼠标经过碎片高亮变化特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

Canvas鼠标经过碎片高亮变化特效代码

部分效果截图2:

Canvas鼠标经过碎片高亮变化特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Canvas鼠标经过碎片高亮变化特效</title>
<script src="js/jrj6out.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>

<style>
  body {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.intro-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  margin: 0 auto;
  right: 0;
  left: 0;
}

h1 {
  font-family: 'brandon-grotesque', sans-serif;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 20px;
}
@media screen and (min-width: 860px) {
  h1 {
    font-size: 40px;
    line-height: 52px;
  }
}

.fancy-text {
  font-family: "adobe-garamond-pro",sans-serif;
  font-style: italic;
  letter-spacing: 1px;
  margin-bottom: 17px;
}

.button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-family: 'brandon-grotesque', sans-serif;
  text-transform: uppercase;
  min-width: 200px;
  margin-top: 30px;
}
.button:hover .border {
  box-shadow: 0px 0px 10px 0px white;
}
.button:hover .border .left-plane, .button:hover .border .right-plane {
  transform: translateX(0%);
}
.button:hover .text {
  color: #121212;
}
.button .border {
  border: 1px solid white;
  transform: skewX(-20deg);
  height: 32px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: .10s ease-out;
}
.button .border .left-plane, .button .border .right-plane {
  position: absolute;
  background: white;
  height: 32px;
  width: 100px;
  transition: .15s ease-out;
}
.button .border .left-plane {
  left: 0;
  transform: translateX(-100%);
}
.button .border .right-plane {
  right: 0;
  transform: translateX(100%);
}
.button .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: .15s ease-out;
}

.x-mark {
  right: 10px;
  top: 10px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
}
.x-mark:hover .right {
  transform: rotate(-45deg) scaleY(1.2);
}
.x-mark:hover .left {
  transform: rotate(45deg) scaleY(1.2);
}
.x-mark .container {
  position: relative;
  width: 20px;
  height: 20px;
}
.x-mark .left, .x-mark .right {
  width: 2px;
  height: 20px;
  background: white;
  position: absolute;
  border-radius: 3px;
  transition: .15s ease-out;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.x-mark .right {
  transform: rotate(-45deg);
}
.x-mark .left {
  transform: rotate(45deg);
}

.sky-container {
  position: absolute;
  color: white;
  text-transform: uppercase;
  margin: 0 auto;
  right: 0;
  left: 0;
  top: 2%;
  text-align: center;
  opacity: 0;
}
@media screen and (min-width: 860px) {
  .sky-container {
    top: 18%;
    right: 12%;
    left: auto;
  }
}
.sky-container__left, .sky-container__right {
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
.sky-container__left h2, .sky-container__right h2 {
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 26px;
  line-height: 26px;
  margin: 0;
}
@media screen and (min-width: 860px) {
  .sky-container__left h2, .sky-container__right h2 {
    font-size: 72px;
    line-height: 68px;
  }
}
.sky-container__left {
  margin-right: 5px;
}
.sky-container .thirty-one {
  letter-spacing: 4px;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.twitter:hover a {
  transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
  color: #21c2ff;
}
.twitter a {
  bottom: -40px;
  right: -75px;
  transform: rotate(-45deg);
}
.twitter i {
  bottom: 7px;
  right: 7px;
  color: #00ACED;
}

.social-icon a {
  position: absolute;
  background: white;
  color: white;
  box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
  display: inline-block;
  width: 150px;
  height: 80px;
  transform-origin: 50% 50%;
  transition: .15s ease-out;
}
.social-icon i {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transition: .15s ease-out;
}

.youtube:hover a {
  transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
  color: #ec4c44;
}
.youtube a {
  bottom: -40px;
  left: -75px;
  transform: rotate(45deg);
}
.youtube i {
  bottom: 7px;
  left: 7px;
  color: #E62117;
}

</style>

<script src="js/prefixfree.min.js"></script>

</head>

<body>
<div class="x-mark">
	<div class="container">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>
<div class="intro-container">
	
	<h1>ONE WITH AN EVERLASTING DESIRE <br> FOR THE UNKNOWN & UNTOLD</h1>

	<div class="button shift-camera-button">
		<div class="border">
			<div class="left-plane"></div>
			<div class="right-plane"></div>
		</div>	
		<div class="text">To The Stars</div>
	</div>
</div>
<div class="sky-container">
	<div class="text-right sky-container__left">
		<h2 class="portfolio">
			PORTFOLIO
		</h2>
		<h2 class="resurrection">
			resurrection	
		</h2>
	</div>
	<div class="text-left sky-container__right">
		<h2 class="08">
			08
		</h2>
		<h2 class="thirty-one">
			31
		</h2>
		<h2 class="2016">
			2016
		</h2>
	</div>
</div>
<script src='js/jquery.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/three.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

"use strict";
	/* globals THREE,$,TweenLite,Power3,TimelineMax */
var camera = undefined,scene = undefined,renderer = undefined;
	var plane = undefined;
	var raycaster = new THREE.Raycaster();
	var normalizedMouse ={
	x:0,y:-180}
;
	// let lightBlue ={
	//r:34,//g:183,//b:236//}
;
	var darkBlue ={
	r:0,g:52,b:74}
;
	var baseColorRGB = darkBlue;
	var baseColor = "rgb(" + baseColorRGB.r + "," + baseColorRGB.g + "," + baseColorRGB.b + ")";
	var nearStars = undefined,farStars = undefined,farthestStars = undefined;
	function init(){
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
	renderer = new THREE.WebGLRenderer();
	// Scene initializationcamera.position.z = 50;
	renderer.setClearColor("#121212",1.0);
	renderer.setSize(window.innerWidth,window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	document.body.appendChild(renderer.domElement);
	// Lightsvar topLight = new THREE.DirectionalLight(0xffffff,1);
	topLight.position.set(0,1,1).normalize();
	scene.add(topLight);
	var bottomLight = new THREE.DirectionalLight(0xffffff,0.4);
	bottomLight.position.set(1,-1,1).normalize();
	scene.add(bottomLight);
	var skyLightRight = new THREE.DirectionalLight(0x666666,0.2);
	skyLightRight.position.set(-1,-1,0.2).normalize();
	scene.add(skyLightRight);
	var skyLightCenter = new THREE.DirectionalLight(0x666666,0.2);
	skyLightCenter.position.set(-0,-1,0.2).normalize();
	scene.add(skyLightCenter);
	var skyLightLeft = new THREE.DirectionalLight(0x666666,0.2);
	skyLightLeft.position.set(1,-1,0.2).normalize();
	scene.add(skyLightLeft);
	// Mesh creationvar geometry = new THREE.PlaneGeometry(400,400,70,70);
	var darkBlueMaterial = new THREE.MeshPhongMaterial({
	color:0xffffff,shading:THREE.FlatShading,side:THREE.DoubleSide,vertexColors:THREE.FaceColors}
);
	geometry.vertices.forEach(function (vertice){
	vertice.x += (Math.random() - 0.5) * 4;
	vertice.y += (Math.random() - 0.5) * 4;
	vertice.z += (Math.random() - 0.5) * 4;
	vertice.dx = Math.random() - 0.5;
	vertice.dy = Math.random() - 0.5;
	vertice.randomDelay = Math.random() * 5;
}
);
	for (var i = 0;
	i < geometry.faces.length;
	i++){
	geometry.faces[i].color.setStyle(baseColor);
	geometry.faces[i].baseColor = baseColorRGB;
}
plane = new THREE.Mesh(geometry,darkBlueMaterial);
	scene.add(plane);
	// Create starsfarthestStars = createStars(1200,420,"#0952BD");
	farStars = createStars(1200,370,"#A5BFF0");
	nearStars = createStars(1200,290,"#118CD6");
	scene.add(farthestStars);
	scene.add(farStars);
	scene.add(nearStars);
	farStars.rotation.x = 0.25;
	nearStars.rotation.x = 0.25;
	// Uncomment for testing second camera position// camera.rotation.x = Math.PI / 2;
	// camera.position.y = -0;
	// camera.position.z = 20;
	// plane.scale.x = 2;
}
function createStars(amount,yDistance){
	var color = arguments.length <= 2 || arguments[2] === undefined ? "0x000000":arguments[2];
	var opacity = Math.random();
	var starGeometry = new THREE.Geometry();
	var starMaterial = new THREE.PointsMaterial({
	color:color,opacity:opacity}
);
	for (var i = 0;
	i < amount;
	i++){
	var vertex = new THREE.Vector3();
	vertex.z = (Math.random() - 0.5) * 1500;
	vertex.y = yDistance;
	vertex.x = (Math.random() - 0.5) * 1500;
	starGeometry.vertices.push(vertex);
}
return new THREE.Points(starGeometry,starMaterial);
}
var timer = 0;
	function render(){
	requestAnimationFrame(render);
	timer += 0.01;
	var vertices = plane.geometry.vertices;
	for (var i = 0;
	i < vertices.length;
	i++){
	// Ease back to original vertice position while still maintaining sine wavevertices[i].x -= Math.sin(timer + vertices[i].randomDelay) / 40 * vertices[i].dx;
	vertices[i].y += Math.sin(timer + vertices[i].randomDelay) / 40 * vertices[i].dy;
	// ((vertices[i].x - vertices[i].originalPosition.x) * 0.1) +}
// Determine where ray is being projected from camera viewraycaster.setFromCamera(normalizedMouse,camera);
	// Send objects being intersected into a variablevar intersects = raycaster.intersectObjects([plane]);
	if (intersects.length > 0){
	(function (){
	var faceBaseColor = intersects[0].face.baseColor;
	plane.geometry.faces.forEach(function (face){
	face.color.r *= 255;
	face.color.g *= 255;
	face.color.b *= 255;
	face.color.r += (faceBaseColor.r - face.color.r) * 0.01;
	face.color.g += (faceBaseColor.g - face.color.g) * 0.01;
	face.color.b += (faceBaseColor.b - face.color.b) * 0.01;
	var rInt = Math.floor(face.color.r);
	var gInt = Math.floor(face.color.g);
	var bInt = Math.floor(face.color.b);
	var newBasecol = "rgb(" + rInt + "," + gInt + "," + bInt + ")";
	face.color.setStyle(newBasecol);
}
);
	plane.geometry.colorsNeedUpdate = true;
	intersects[0].face.color.setStyle("#006ea0");
	plane.geometry.colorsNeedUpdate = true;
}
)();
}
plane.geometry.verticesNeedUpdate = true;
	plane.geometry.elementsNeedUpdate = true;
	farthestStars.rotation.y -= 0.00001;
	farStars.rotation.y -= 0.00005;
	nearStars.rotation.y -= 0.00011;
	renderer.render(scene,camera);
}
init();
	window.addEventListener("resize",function (){
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth,window.innerHeight);
}
);
	window.addEventListener("mousemove",function (event){
	// Normalize mouse coordinatesnormalizedMouse.x = event.clientX / window.innerWidth * 2 - 1;
	normalizedMouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
);
	var introContainer = $('.intro-container');
	var skyContainer = $('.sky-container');
	var xMark = $('.x-mark');
	$('.shift-camera-button').click(function (){
	var introTimeline = new TimelineMax();
	introTimeline.add([TweenLite.fromTo(introContainer,0.5,{
	opacity:1}
,{
	opacity:0,ease:Power3.easeIn}
),TweenLite.to(camera.rotation,3,{
	x:Math.PI / 2,ease:Power3.easeInOut}
),TweenLite.to(camera.position,2.5,{
	z:20,ease:Power3.easeInOut}
),TweenLite.to(camera.position,3,{
	y:120,ease:Power3.easeInOut}
),TweenLite.to(plane.scale,3,{
	x:2,ease:Power3.easeInOut}
)]);
	introTimeline.add([TweenLite.to(xMark,2,{
	opacity:1,ease:Power3.easeInOut}
),TweenLite.to(skyContainer,2,{
	opacity:1,ease:Power3.easeInOut}
)]);
}
);
	$('.x-mark').click(function (){
	var outroTimeline = new TimelineMax();
	outroTimeline.add([TweenLite.to(xMark,0.5,{
	opacity:0,ease:Power3.easeInOut}
),TweenLite.to(skyContainer,0.5,{
	opacity:0,ease:Power3.easeInOut}
),TweenLite.to(camera.rotation,3,{
	x:0,ease:Power3.easeInOut}
),TweenLite.to(camera.position,3,{
	z:50,ease:Power3.easeInOut}
),TweenLite.to(camera.position,2.5,{
	y:0,ease:Power3.easeInOut}
),TweenLite.to(plane.scale,3,{
	x:1,ease:Power3.easeInOut}
)]);
	outroTimeline.add([TweenLite.to(introContainer,0.5,{
	opacity:1,ease:Power3.easeIn}
)]);
}
);
	render();

CSS代码(style.css):

body{position:relative;margin:0;overflow:hidden;}
.intro-container{position:absolute;top:50%;transform:translateY(-50%);color:white;text-align:center;margin:0 auto;right:0;left:0;}
h1{font-family:'brandon-grotesque',sans-serif;font-weight:bold;margin-top:0px;margin-bottom:0;font-size:20px;}
@media screen and (min-width:860px){h1{font-size:40px;line-height:52px;}
}
.fancy-text{font-family:"adobe-garamond-pro",sans-serif;font-style:italic;letter-spacing:1px;margin-bottom:17px;}
.button{position:relative;cursor:pointer;display:inline-block;font-family:'brandon-grotesque',sans-serif;text-transform:uppercase;min-width:200px;margin-top:30px;}
.button:hover .border{box-shadow:0px 0px 10px 0px white;}
.button:hover .border .left-plane,.button:hover .border .right-plane{transform:translateX(0%);}
.button:hover .text{color:#121212;}
.button .border{border:1px solid white;transform:skewX(-20deg);height:32px;border-radius:3px;overflow:hidden;position:relative;transition:.10s ease-out;}
.button .border .left-plane,.button .border .right-plane{position:absolute;background:white;height:32px;width:100px;transition:.15s ease-out;}
.button .border .left-plane{left:0;transform:translateX(-100%);}
.button .border .right-plane{right:0;transform:translateX(100%);}
.button .text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);transition:.15s ease-out;}
.x-mark{right:10px;top:10px;position:absolute;cursor:pointer;opacity:0;}
.x-mark:hover .right{transform:rotate(-45deg) scaleY(1.2);}
.x-mark:hover .left{transform:rotate(45deg) scaleY(1.2);}
.x-mark .container{position:relative;width:20px;height:20px;}
.x-mark .left,.x-mark .right{width:2px;height:20px;background:white;position:absolute;border-radius:3px;transition:.15s ease-out;margin:0 auto;left:0;right:0;}
.x-mark .right{transform:rotate(-45deg);}
.x-mark .left{transform:rotate(45deg);}
.sky-container{position:absolute;color:white;text-transform:uppercase;margin:0 auto;right:0;left:0;top:2%;text-align:center;opacity:0;}
@media screen and (min-width:860px){.sky-container{top:18%;right:12%;left:auto;}
}
.sky-container__left,.sky-container__right{display:inline-block;vertical-align:top;font-weight:bold;}
.sky-container__left h2,.sky-container__right h2{font-family:'brandon-grotesque',sans-serif;font-size:26px;line-height:26px;margin:0;}
@media screen and (min-width:860px){.sky-container__left h2,.sky-container__right h2{font-size:72px;line-height:68px;}
}
.sky-container__left{margin-right:5px;}
.sky-container .thirty-one{letter-spacing:4px;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.twitter:hover a{transform:rotate(-45deg) scale(1.05);}
.twitter:hover i{color:#21c2ff;}
.twitter a{bottom:-40px;right:-75px;transform:rotate(-45deg);}
.twitter i{bottom:7px;right:7px;color:#00ACED;}
.social-icon a{position:absolute;background:white;color:white;box-shadow:-1px -1px 20px 0px rgba(0,0,0,0.3);display:inline-block;width:150px;height:80px;transform-origin:50% 50%;transition:.15s ease-out;}
.social-icon i{position:absolute;pointer-events:none;z-index:1000;transition:.15s ease-out;}
.youtube:hover a{transform:rotate(45deg) scale(1.05);}
.youtube:hover i{color:#ec4c44;}
.youtube a{bottom:-40px;left:-75px;transform:rotate(45deg);}
.youtube i{bottom:7px;left:7px;color:#E62117;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
185.54 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
185.54 KB
立即下载
陈媛
了解
打赏作者 鼓励作者
Html JS 其它特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章