Code hoa đào rơi bằng css cho wordpress

trước hay dùng js nhưng nó nặng gây ta khó chịu khi load chưa kể đến điểm seo sẽ bị trừ khi load quá nhiều Java , nay giới thiệu anh em đoạn code load hoa đào bằng css đẹp và nhẹn nhé

Code hoa đào rơi bằng css cho wordpress – trang trí tết nào mọi người

Thống kê bài viết

Demo nhé anh em https://chowebs.com/

Code hoa đào rơi bằng css cho wordpress - trang trí tết nào mọi người — Code hoa đào rơi bằng css cho wordpress – trang trí tết nào mọi người

Thêm code này vô chỗ HTML

<div class="f1-effect">
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
	<div class="f1-effect-flower">
	</div>
	
</div>

<style>
.f1-effect {
  position: relative;
  z-index: 99999999; }
  .f1-effect .f1-effect-flower {
    opacity: 1;
    border-radius: 100%;
    background: url(https://file.hstatic.net/200000259653/file/pages_17a8568517e94dcd9c8aec5587_570924d1fa4b4da1aa011044c9d7cc1c.png);
    position: fixed;
    top: -10%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running; }
    @media (max-width: 767px) {
      .f1-effect .f1-effect-flower:nth-of-type(2n) {
        display: none; } }
    .f1-effect .f1-effect-flower:nth-of-type(0) {
      left: 5%;
      -webkit-animation-delay: 1s, 1s;
      animation-delay: 1s, 1s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(1) {
      left: 10%;
      -webkit-animation-delay: 6s, 0.5s;
      animation-delay: 6s, 0.5s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }
    .f1-effect .f1-effect-flower:nth-of-type(2) {
      left: 20%;
      -webkit-animation-delay: 4s, 2s;
      animation-delay: 4s, 2s;
      width: 15px;
      height: 15px;
      background-position: -49px -35px; }
    .f1-effect .f1-effect-flower:nth-of-type(3) {
      left: 30%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(4) {
      left: 40%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(5) {
      left: 50%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }
    .f1-effect .f1-effect-flower:nth-of-type(6) {
      left: 60%;
      -webkit-animation-delay: 2.5s, 1s;
      animation-delay: 2.5s, 1s;
      width: 15px;
      height: 15px;
      background-position: -49px -35px; }
    .f1-effect .f1-effect-flower:nth-of-type(7) {
      left: 70%;
      -webkit-animation-delay: 1s, 0s;
      animation-delay: 1s, 0s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(8) {
      left: 80%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(9) {
      left: 90%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(10) {
      left: 95%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }

@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%; }
  100% {
    top: 100%; } }

@-webkit-keyframes snowflakes-shake {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes snowflakes-fall {
  0% {
    top: -10%; }
  100% {
    top: 100%; } }

@keyframes snowflakes-shake {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(80px); }
  100% {
    transform: translateX(0px); } }

</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

.f1-effect {

position: relative;

z-index: 99999999; }

.f1-effect .f1-effect-flower {

opacity: 1;

border-radius: 100%;

background: url(https://file.hstatic.net/200000259653/file/pages_17a8568517e94dcd9c8aec5587_570924d1fa4b4da1aa011044c9d7cc1c.png);

position: fixed;

top: -10%;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: default;

-webkit-animation-name: snowflakes-fall, snowflakes-shake;

-webkit-animation-duration: 10s, 3s;

-webkit-animation-timing-function: linear, ease-in-out;

-webkit-animation-iteration-count: infinite, infinite;

-webkit-animation-play-state: running, running;

animation-name: snowflakes-fall, snowflakes-shake;

animation-duration: 10s, 3s;

animation-timing-function: linear, ease-in-out;

animation-iteration-count: infinite, infinite;

animation-play-state: running, running; }

@media (max-width: 767px) {

.f1-effect .f1-effect-flower:nth-of-type(2n) {

display: none; } }

.f1-effect .f1-effect-flower:nth-of-type(0) {

left: 5%;

-webkit-animation-delay: 1s, 1s;

animation-delay: 1s, 1s;

width: 16px;

height: 16px;

background-position: 0 -23px; }

.f1-effect .f1-effect-flower:nth-of-type(1) {

left: 10%;

-webkit-animation-delay: 6s, 0.5s;

animation-delay: 6s, 0.5s;

width: 13px;

height: 13px;

background-position: 0 -50px; }

.f1-effect .f1-effect-flower:nth-of-type(2) {

left: 20%;

-webkit-animation-delay: 4s, 2s;

animation-delay: 4s, 2s;

width: 15px;

height: 15px;

background-position: -49px -35px; }

.f1-effect .f1-effect-flower:nth-of-type(3) {

left: 30%;

-webkit-animation-delay: 2s, 2s;

animation-delay: 2s, 2s;

width: 14px;

height: 14px;

background-position: -31px 0; }

.f1-effect .f1-effect-flower:nth-of-type(4) {

left: 40%;

-webkit-animation-delay: 8s, 3s;

animation-delay: 8s, 3s;

width: 16px;

height: 16px;

background-position: 0 -23px; }

.f1-effect .f1-effect-flower:nth-of-type(5) {

left: 50%;

-webkit-animation-delay: 6s, 2s;

animation-delay: 6s, 2s;

width: 13px;

height: 13px;

background-position: 0 -50px; }

.f1-effect .f1-effect-flower:nth-of-type(6) {

left: 60%;

-webkit-animation-delay: 2.5s, 1s;

animation-delay: 2.5s, 1s;

width: 15px;

height: 15px;

background-position: -49px -35px; }

.f1-effect .f1-effect-flower:nth-of-type(7) {

left: 70%;

-webkit-animation-delay: 1s, 0s;

animation-delay: 1s, 0s;

width: 14px;

height: 14px;

background-position: -31px 0; }

.f1-effect .f1-effect-flower:nth-of-type(8) {

left: 80%;

-webkit-animation-delay: 2s, 2s;

animation-delay: 2s, 2s;

width: 14px;

height: 14px;

background-position: -31px 0; }

.f1-effect .f1-effect-flower:nth-of-type(9) {

left: 90%;

-webkit-animation-delay: 8s, 3s;

animation-delay: 8s, 3s;

width: 16px;

height: 16px;

background-position: 0 -23px; }

.f1-effect .f1-effect-flower:nth-of-type(10) {

left: 95%;

-webkit-animation-delay: 6s, 2s;

animation-delay: 6s, 2s;

width: 13px;

height: 13px;

background-position: 0 -50px; }

@-webkit-keyframes snowflakes-fall {

0% {

top: -10%; }

100% {

top: 100%; } }

@-webkit-keyframes snowflakes-shake {

0% {

-webkit-transform: translateX(0px);

transform: translateX(0px); }

50% {

-webkit-transform: translateX(80px);

transform: translateX(80px); }

100% {

-webkit-transform: translateX(0px);

transform: translateX(0px); } }

@keyframes snowflakes-fall {

0% {

top: -10%; }

100% {

top: 100%; } }

@keyframes snowflakes-shake {

0% {

transform: translateX(0px); }

50% {

transform: translateX(80px); }

100% {

transform: translateX(0px); } }

</style>

CÓ THỂ BẠN QUAN TÂM

Chú ý khi add code

Nhớ bỏ <style> </style> khi dùng trong css custom nhé

Và download hình về nhé

Chức bạn thành công

theo : http://chothemeweb.com/

Điểm 5/5 - ( Có 2 bình chọn)

Code hoa đào rơi bằng css cho wordpress – trang trí tết nào mọi người 11/2023

Code hoa đào rơi bằng css cho wordpress – trang trí tết nào mọi người

Demo nhé anh em https://chowebs.com/

CÓ THỂ BẠN QUAN TÂM

Chú ý khi add code

Các tin khác

2 thoughts on “Code hoa đào rơi bằng css cho wordpress – trang trí tết nào mọi người 11/2023”

Black friday Hostvn giảm 90% chỉ 100 đơn đăng ký sớm nhất 11/2023

TinoHost Black Friday 2023 Hoàn tiền 100%, 92% sale nhìn là mê 11/2023

Black Friday AZDIGI giảm giá tới 80% Hosting, VPS 70% – Black Friday 2023 11/2023

Interdata Khuyến mãi tháng 07-2023 giảm 81% cho host quá đỉnh anh em 11/2023

Top 5 công cụ kiểm tra lịch sử tên miền hiệu quả 11/2023

Host đề xuất