css html动画效果代码大全

当今网页设计已经成为了一门艺术，HTML和CSS的进步和演变开辟了新的可能性，使得设计和交互变得更富有创意和趣味。本篇文章将为大家带来一些CSS和HTML动画效果的代码示例，希望对你有所帮助。

若想学习更多优秀的CSS和HTML动画效果，可以查看Codrops网站。它是一个优秀的资源，在这里你可以学到更多高级动画效果的实现方法，并了解到当前流行的设计趋势。

/* Blink */@keyframes blink {
50% {
     opacity: 0;
 }
}
.blink {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    animation: blink 1s infinite;
}

这是一个简单的Blink动画效果，鼠标放到圆形图案上时，圆形图案开始闪烁。动画定义了一个keyframe，使得半小时内对象变得透明。此处使用类名.blink 执行该动画。

/* Slide */.slide {
    position: relative;
}
.slide::before,.slide::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(0deg, transparent, #fff);
    z-index: 1;
}
.slide::before {
    top: 0;
}
.slide::after {
    bottom: 0;
    transform: rotate(180deg);
}

这是一个简单的Slide动画效果，它是一个响应式的排版方法，展示在所有屏幕大小下都非常精致。它使用一个伪元素在顶部和底部创建一个白色渐变浅色样式，并使之呈现出顺畅的过渡效果。要使用此动画效果，可以在所需元素上应用一个.slide的类。

/* Hamburger Button */.hamburger {
    display: block;
    position: relative;
    height: 24px;
    width: 30px;
    margin: 10px auto;
    padding-bottom: 5px;
    cursor: pointer;
}
.hamburger .bar {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 9px;
    opacity: 1;
    transition: opacity 1s cubic-bezier(0, 0.5, 0, 1);
}
.hamburger .bar:nth-child(1) {
    top: 0px;
}
.hamburger .bar:nth-child(2), .hamburger .bar:nth-child(3) {
    top: 10px;
}
.hamburger .bar:nth-child(3)::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 9px;
    transform: rotate(0deg);
}
.hamburger .bar:nth-child(3)::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 9px;
    transform: rotate(0deg);
}
.active .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.active .bar:nth-child(2) {
    opacity: 0;
}
.active .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
.active .bar:nth-child(3):before {
    transform: rotate(45deg);
    top: 0;
}
.active .bar:nth-child(3):after {
    transform: rotate(-45deg);
    bottom: 0;
}
    

这是一个流行的Hamburger Button动画效果。它使用一个三条线框架来创造一个微妙的动态，它可以在鼠标点击时变得更有趣。这段代码还展示了关键帧逐步动画的用法，在每个关键帧上更新对应的CSS类。

以上是一些CSS和HTML动画效果的示例代码，你可以将它们直接应用到你的项目中，或者按照自己的需要进行定制。希望这些示例对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！