毛毛虫爬行动画怎样实现


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来毛毛虫爬行动画怎样实现,实现毛毛虫爬行动画的注意事项有哪些,下面就是实战案例,一起来看一下。

毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,具体代码如下所示:

html代码:

1

2

3

4

5

6

7

8

<p class='container'>

  <p class='hide left'></p>

  <p class='hide right'></p>

  <p class='hide bottom'></p>

  <p class='circle-container'>

    <p class='circle'></p>

  </p>

</p>

css代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<style>

body {

  background-color: #1B6CB2;

  margin: 0;

}

.container {

  position: absolute;

  width: 600px;

  height: 400px;

  overflow: hidden;

  top: 50%;

  left: 60%;

  transform: translate(-50%, -50%);

}

.hide {

  height: 100%;

  width: 150px;

  background: #1B6CB2;

  position: absolute;

  z-index: 2;

}

.hide.left {

  left: 0;

}

.hide.right {

  right: 0;

}

.hide.bottom {

  bottom: 0;

  width: 100%;

  height: 50%;

}

.circle {

  position: absolute;

  height: 75px;

  width: 150px;

  border: 3px solid white;

  border-radius: 50%/100% 100% 0 0;

  border-bottom: none;

  top: 40%;

  left: 50%;

  transform-origin: 0% 50%;

  transform: translate(-50%, -50%);

  animation: magic 1.8s ease infinite;

}

@keyframes magic {

  0% {

    transform: rotate(-170deg) translate(-50%, -50%);

  }

  50% {

    transform: rotate(0deg) translate(-50%, -50%);

  }

  100% {

    transform: rotate(180deg) translate(-50%, -50%);

  }

}

.circle-container {

  position: absolute;

  height: 75px;

  width: 150px;

  top: 40%;

  left: 50%;

  transform-origin: 0% 50%;

  transform: translate(-50%, -50%);

  animation: power 1.8s ease-out infinite;

}

@keyframes power {

  0% {

    margin-left: 20px;

  }

  50% {

    margin-left: -55px;

  }

  99.9% {

    margin-left: -130px;

  }

  100% {

    margin-left: 20px;

  }

}

  </style>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

前端技术实现文本文字纹理叠加

CSS3混合模式使用详解

以上就是毛毛虫爬行动画怎样实现的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html网页优化压缩的实现步骤

怎么能在页面上实现一个圆形可点击区域?

html的文字图片怎样垂直居中

h5正常文本框提示语的实现方法

html5使用四种方法实现移动页面自适应手机屏幕的方法总结

在html中select标签怎样实现单选和多选

h5做出手机摇一摇功能的实现步骤

html怎样对图片实现checkbox方法

超链接的宽高怎样设置

html的表格应该怎样布局

更多相关阅读请进入《毛毛虫》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...