Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.