炫酷特效代码

与银河邂逅

炫酷的网页特效可以显著提升用户体验,让网站看起来更加吸引人和专业。在网页设计中,特效通常通过CSS和JavaScript来实现。以下是一些炫酷特效的代码示例,它们可以帮助你为你的网站增添一些视觉上的吸引力。

1. CSS3动画效果

CSS3提供了强大的动画功能,可以创建平滑的过渡效果和动画。

渐变背景动画

@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

body {
  background: linear-gradient(to right, #f6d365, #fda085);
  animation: gradientBG 5s ease infinite;
}

这段代码创建了一个背景颜色从左到右渐变的动画效果。

2. 鼠标悬停效果

使用CSS可以为链接或其他元素添加鼠标悬停效果。

悬停时改变颜色和背景

a:hover {
  color: #fff;
  background-color: #333;
}

3. 滚动侦测动画

当用户滚动页面时,可以触发一些动画效果。

滚动侦测动画示例

.element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.element.visible {
  opacity: 1;
  transform: translateY(0);
}
window.addEventListener('scroll', function() {
  var elements = document.querySelectorAll('.element');
  elements.forEach(function(el) {
    if (isInViewport(el)) {
      el.classList.add('visible');
    }
  });
});

function isInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 
版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码