web前端：原生css球体弹跳效果，animation动画

.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        position: absolute;
        width: 600px;
        height: 600px;
        background: url(../img/my-logo-2.png) repeat;
        background-size: 50px;
        border: 1px solid #000000;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px;
        
        &:hover #wrap-inner{
            //animation-play-state:动画执行的运行/暂停，默认值running，pause暂停
            animation-play-state: paused;
        }
        
        #wrap-inner {
            position: absolute;
            width: 300px;
            height: 300px;
            background: tomato;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 2px 2px 5px tomato;
            font: 30px/300px "微软雅黑";
            text-align: center;
            color: white;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            animation-name: rotated;
            animation-duration: 1.5s;
            //animation-timing-function: linear;
            animation-timing-function: cubic-bezier(.12,1.36,.65,-0.28);
            //direction:normal（from→to）reverse反转（to→from）、alternate（from→to→from...循环）/alternate-reverse
            animation-direction: alternate;
            animation-iteration-count: 6;
            //延迟为外部动画
            animation-delay: 1s;
            /*元素在动画外的状态: from之前to之后
              1. backwards与from一致=动画开始的动作，结束回归原位
              2. forwards与to一致=动画结束的动作，结束不回归原位
              3. both=动画开始/结束的动作，开始/结束不回归原位
            */
            //animation-fill-mode: backwards;
            //animation-fill-mode: forwards;
            animation-fill-mode: both;
        }
    }
    @keyframes rotated {
        from {
            //Y轴：x+100px
            transform: translateY(100px);
        }
        to {
            //Y轴：x-100px
            transform: translateY(-100px);
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 1px solid #000000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -300px;
}
* #wrap:hover #wrap-inner {
  animation-play-state: paused;
}
* #wrap #wrap-inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: tomato;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 2px 2px 5px tomato;
  font: 30px/300px "微软雅黑";
  text-align: center;
  color: white;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  animation-name: rotated;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.12, 1.36, 0.65, -0.28);
  animation-direction: alternate;
  animation-iteration-count: 6;
  animation-delay: 1s;
  /*元素在动画外的状态: from之前to之后
              1. backwards与from一致=动画开始的动作，结束回归原位
              2. forwards与to一致=动画结束的动作，结束不回归原位
              3. both=动画开始/结束的动作，开始/结束不回归原位
            */
  animation-fill-mode: both;
}
@keyframes rotated {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(-100px);
  }
}

3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画模式@keyframes{}</title>
	</head>
	<body>
		<div id="wrap">
			<div id="wrap-inner">cevent</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/less034.css" />
</html>

1234567891011121314

4.效果图

网页设计工作中，我们可以给很多元素添加发光的动画效果，举几个例子，“输入框”、“文字”、“进度条”等。给这些元素加上的发光特效会让整个网页变得更加炫酷。今天陕西优就业小编就为大家搜集整理了8款炫酷的HTML发光动画，这些都可以用作Web前端开发工作中，可以为你节省很多开发时间。

1.HTML5 Canvas五彩缤纷的3D发光水晶球动画

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画，就像是酒吧里的那种水晶球射灯一样，不停地随机变换射出光线的颜色，给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成，利用CSS3的相关特性使其能够出现五彩缤纷的发光动画，而且可以通过鼠标滚轮来放大缩小这个水晶球，不得不说HTML5真的是非常强大。

2.jQuery/CSS3实现漂亮字体发光特效

今天我们要来分享一款很酷的jQuery/CSS3文字发光特效，首先是加载了谷歌的公共字体库，因此字体非常特别和漂亮，另外利用了jQuery和CSS3的相关特性，当鼠标滑过文字时，文字将会出现发光的动画特效，非常漂亮。

3.超绚丽CSS3多色彩发光立方体旋转动画

之前我们分享过几个不错的CSS3立方体动画，比如这款HTML5 3D立方体旋转动画和HTML5 3D立方体图片切换动画。今天要分享的也是一款基于CSS3的3D立方体旋转动画，不同的是，这款立方体的每一个面都有不同的色彩，并且会带有绚丽的发光特效。

4.纯CSS3实现发光开关切换按钮

前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮，效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，可以左右切换。另外开关上的文字还有发光的特效，整体看上去很有立体感。

5.纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

6.HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

7.CSS3发光Loading加载动画

今天我们要分享一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果：HTML5 Canvas实现超酷Loading动画、很有个性的CSS3弹跳Loading动画。

8.纯CSS3实现发光动画按钮特效

这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。

陕西优就业：http://www.ujiuye.com/shaanxi/

IT学习交流：468910291

是一个纯CSS实现的Loading特效，由5个圆圈跳跃组成。这个特效使用了CSS的animation属性，通过动态变化来实现圆圈的跳跃效果。同时，这个特效的实现没有用到任何JavaScript，可以有效地提升网站的性能。

这个特效的设计非常巧妙，5个圆圈跳跃的交错节奏感很强，能够为用户提供一个愉悦的等待体验。整个特效的视觉效果非常出色，能够为网站增添一些活力和趣味性。如果您正在寻找一个简单而美观的加载动画，那么这个纯CSS实现的排队跳跃的Loading特效一定会是一个不错的选择。

希望这个特效能够为您的网站增添一些活力和趣味性！

在线咨询

上一篇：HTML常考知识点
下一篇：HTML网络编程之时间格式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。