How to use css to realize the Animation effect of Water pattern Diffusion
Editor to share with you how to use css to achieve watermark diffusion animation effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Css:
.main {
Position:relative
Height:70px
Width:310px
Margin:0auto
Background-color:#f34147
}
.circle {
Position:relative
Float:left
Height:70px
Width:70px
}
/ * Line * /
.hr {
Position:relative
Float:left
Width:50px
Height:70px
Background:url (".. / images/hr_1.png") no-repeatcentercenter
Background-size:auto18px
}
. hr-x {
Background:url (".. / images/hr_2.png") no-repeatcentercenter
Background-size:auto18px
}
. hr-r {
Background:url (".. / images/hr_3.png") no-repeatcentercenter
Background-size:auto18px
}
/ * Button large: 47 small: 39 percent /
. box-icon {
Position:absolute
Z-index:9999
Top:0
Right:0
Left:0
Bottom:0
Width:70px
Height:70px
}
/ * small is not bright * /
. icon-a {
Background:url (".. / images/icon_a_3.png") no-repeatcentercenter
Background-size:39px39px
}
. icon-b {
Background:url (".. / images/icon_b_3.png") no-repeatcentercenter
Background-size:39px39px
}
. icon-c {
Background:url (".. / images/icon_c_3.png") no-repeatcentercenter
Background-size:39px39px
}
/ * Xiao Liang * /
.icon-a muri 1 {
Background:url (".. / images/icon_a_2.png") no-repeatcentercenter
Background-size:39px39px
}
.icon-bmur1 {
Background:url (".. / images/icon_b_2.png") no-repeatcentercenter
Background-size:39px39px
}
.icon-cmur1 {
Background:url (".. / images/icon_c_2.png") no-repeatcentercenter
Background-size:39px39px
}
/ * Daliang * /
.icon-a muri 2 {
Background:url (".. / images/icon_a_1.png") no-repeatcentercenter
Background-size:47px47px
}
.icon-bmur2 {
Background:url (".. / images/icon_b_1.png") no-repeatcentercenter
Background-size:47px47px
}
.icon-cmur2 {
Background:url (".. / images/icon_c_1.png") no-repeatcentercenter
Background-size:47px47px
}
/ * dynamic effect * /
@ keyframeswarn {
0% {
Transform:scale (0.6)
Opacity:0
}
25% {
Transform:scale (0.6)
Opacity:0.8
}
/ * 50% {* /
/ * transform:scale (0.8);
/ * opacity:0.4;*/
/ *} /
/ * 75% {* /
/ * transform:scale (0.9);
/ * opacity:0.3;*/
/ *} /
100% {
Transform:scale (1)
Opacity:0.1
}
}
@-webkit-keyframeswarn {
0% {
-webkit-transform:scale (0)
Opacity:0
}
25% {
-webkit-transform:scale (0.6)
Opacity:0.8
}
/ * 50% {* /
/ *-webkit-transform:scale (0.1); * /
/ * opacity:0.3;*/
/ *} /
/ * 75% {* /
/ *-webkit-transform:scale (0.5); * /
/ * opacity:0.5;*/
/ *} /
100% {
-webkit-transform:scale (1)
Opacity:0.1
}
}
/ * 70 / 70 containers * /
.box {
Position:absolute
Width:70px
Height:70px
Border:6pxsolidrgba (225pr 225pr 225pr 0.5)
-webkit-border-radius:70px
-moz-border-radius:70px
Border-radius:70px
Z-index:1
Opacity:0
-webkit-animation:warn4sease-outinfinite
-moz-animation:warn4sease-outinfinite
Animation:warn4sease-outinfinite
}
. box-a {
Position:absolute
Width:70px
Height:70px
Border:6pxsolidrgba (225pr 225pr 225pr 0.5)
-webkit-border-radius:70px
-moz-border-radius:70px
Border-radius:70px
Z-index:1
Opacity:0
-webkit-animation:warn4sease-outinfinite
-moz-animation:warn4sease-outinfinite
Animation:warn4sease-outinfinite
Animation-delay:1s
-webkit-animation-delay:1s;/*Safari and Chrome*/
}
. box-b {
Position:absolute
Width:70px
Height:70px
Border:6pxsolidrgba (225pr 225pr 225pr 0.5)
-webkit-border-radius:70px
-moz-border-radius:70px
Border-radius:70px
Z-index:1
Opacity:0
-webkit-animation:warn4sease-outinfinite
-moz-animation:warn4sease-outinfinite
Animation:warn4sease-outinfinite
Animation-delay:2s
-webkit-animation-delay:2s;/*Safari and Chrome*/
}
. box-c {
Position:absolute
Width:70px
Height:70px
Border:6pxsolidrgba (225pr 225pr 225pr 0.5)
-webkit-border-radius:70px
-moz-border-radius:70px
Border-radius:70px
Z-index:1
Opacity:0
-webkit-animation:warn4sease-outinfinite
-moz-animation:warn4sease-outinfinite
Animation:warn4sease-outinfinite
Animation-delay:3s
-webkit-animation-delay:3s;/*Safari and Chrome*/
}
The above is all the content of this article "how to use css to achieve the animation effect of watermark diffusion". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
