html上升下降样式,html 、css 实现上升的气球

1 :root{

2 --w:140px;

3 --half:calc(var(--w) / 2);

4 }

5

6 body{

7 margin:0;

8 background:#dfd3c3 url(../images/timg.jpg);

9 background-size:cover;

10 }

11

12 #wrap{

13 height:100vh;

14 display:flex;

15 justify-content:center;

16 padding-top:20px;

17 box-sizing:border-box;

18 overflow:hidden;

19 }

20

21 .balloon{

22 width:var(--w);

23 height:var(--w);

24 background:green;

25 border-radius:var(--half) var(--half) 0 var(--half);

26 /*transform是从后往前执行*/

27 transform:rotate(45deg) translate(100vh, 100vh);

28 /*transform: translate(10vh,10vh) rotate(45deg);*/

29 position:relative;

30 display:flex;

31 justify-content:center;

32 align-items:center;

33 }

34

35 .balloon h2{

36 color:#fff;

37 font-size:50px;

38 transform:rotate(-45deg);

39 }

40

41 .balloon:before{

42 content:‘‘;

43 width:0;

44 height:0;

45 position:absolute;

46 bottom:-10px;

47 right:-10px;

48 transform:rotate(45deg);

49

50 border:20px solid;

51 border-color:transparent #000 transparent transparent;

52 }

53 .balloon:nth-child(1){

54 background:rgba(182, 15, 97, 0.5);

55 box-shadow:inset 10px 10px 10px rgba(135,11,72,0.5);

56

57 /*animation-fill-mode: forwards;*/

58 animation:rise 2s forwards,fly1 6s 2s ease-in-out infinite;

59 }

60 .balloon:nth-child(1):before{

61 border-color:transparent rgba(182, 15, 97, 0.7) transparent transparent;

62 }

63 .balloon:nth-child(2){

64 background:rgba(45,181,167,0.7);

65 box-shadow:inset 10px 10px 10px rgba(35,140,129,0.7);

66

67 animation:rise 3s forwards,fly4 6s 3s ease-in-out infinite;

68 }

69 .balloon:nth-child(2):before{

70 border-color:transparent rgba(45,181,167,0.7) transparent transparent;

71 }

72 .balloon:nth-child(3){

73 background:rgba(190,61,244,0.7);

74 box-shadow:inset 10px 10px 10px rgba(173,14,240,0.7);

75

76 animation:rise 1s forwards,fly1 5s 1s ease-in-out infinite;

77 }

78 .balloon:nth-child(3):before{

79 border-color:transparent rgba(190,61,244,0.7) transparent transparent;

80 }

81 .balloon:nth-child(4){

82 background:rgba(180,224,67,0.7);

83 box-shadow:inset 10px 10px 10px rgba(158,206,34,0.7);

84

85 animation:rise 2s forwards,fly3 5s 2s ease-in-out infinite;

86 }

87 .balloon:nth-child(4):before{

88 border-color:transparent rgba(180,224,67,0.7) transparent transparent;

89 }

90 .balloon:nth-child(5){

91 background:rgba(242,194,58,0.7);

92 box-shadow:inset 10px 10px 10px rgba(234,177,15,0.7);

93

94 animation:rise 4s forwards,fly2 4s 4s ease-in-out infinite;

95 }

96 .balloon:nth-child(5):before{

97 border-color:transparent rgba(242,194,58,0.7) transparent transparent;

98 }

99 .balloon:nth-child(6){

100 background:rgba(242,112,45,0.7);

101 box-shadow:inset 10px 10px 10px rgba(222,85,14,0.7);

102

103 animation:rise 3s forwards,fly2 6s 5s ease-in-out infinite;

104 }

105 .balloon:nth-child(6):before{

106 border-color:transparent rgba(242,112,45,0.7) transparent transparent;

107 }

108

109 /*气球上升*/

110 @keyframes rise{

111 100%{112 transform:rotate(45deg) translate(0,0);

113 }

114 }115

116 /*气球运动轨迹，4种*/

117 @keyframes fly1{

118 0%,100%{119 transform:rotate(45deg) translateY(0);

120 }

121 50%{

122 transform:rotate(53deg) translateY(-20px);

123 }

124 }125

126 @keyframes fly2{

127 0%,100%{128 transform:rotate(45deg) translateY(0);

129 }

130 50%{

131 transform:rotate(37deg) translateY(-30px);

132 }

133 }134

135 @keyframes fly3{

136 0%,100%{137 transform:rotate(45deg) translateY(0);

138 }

139 50%{

140 transform:rotate(37deg) translate(-20px,-30px);

141 }

142 }143

144 @keyframes fly4{

145 0%,100%{146 transform:rotate(45deg) translateY(0);

147 }

148 50%{

149 transform:rotate(55deg) translate(-15px,-10px);

150 }

151 }