纯CSS3完成给头像加个光辉4射且转动的情况动漫实

日期:2021-03-07 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

HTML编码

HTML编码构造很简易,跟以前那篇文章内容应用的同样:

拷贝编码
编码以下:

<div id="raysDemoHolder">
<a href="/" id="raysLogo">WebHek</a>
<div id="rays"></div>
</div>

最外面的div做为父元素,它的position是relative,有固定不动的高和宽度,有两个子元素:1个用来放logo,1个用来做光辉实际效果的器皿。

CSS编码

大家这里要用纯CSS来完成,必须应用CSS3的动漫技术性,这里用到的CSS英语的语法是@keyframes。大家的基础完成基本原理是用keyframes,从rotate(0deg)转动到rotate(360deg):

拷贝编码
编码以下:

/* 用来完成动漫的keyframes; 从0度转动到360度 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 完成光源辐射源实际效果 */
#raysDemoHolder {
position: relative;
width: 490px;
height: 490px;
margin: 100px 0 0 200px;
}
#raysLogo {
width: 300px;
height: 233px;
text-indent: ⑶000px;
background: url(logo.png) 0 0 no-repeat;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#rays { /* 主要表现动漫实际效果 */
background: url(rays.png) 0 0 no-repeat;
position: absolute;
top: ⑴00px;
left: ⑴00px;
width: 490px;
height: 490px; </p> <p> /* microsoft ie */
animation-name: spin;
animation-duration: 40000ms; /* 40 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#rays:hover {
/* animation-duration: 10000ms;*/
/* 10 seconds - speed it up on hover! */
/* resets the position though! sucks */
}

根据应用animation-timing-function, animation-duration, 和 animation-iteration-count,大家就可以完成线形匀速、转动不断的动漫实际效果!你会发现应用纯CSS制做的动漫比用js制做的动漫要丝滑的多。

如今大家有了1个难题,初期的Opera访问器不适用@keyframes英语的语法。好运的是,大家能够根据其它方式完成这个动漫:

拷贝编码
编码以下:

/* boooo opera */
-o-transition: rotate(3600deg); /* 能用 */

只必须简易的1段编码。而针对IE访问器,我尝试用-ms-transform / -ms-translation在IE9里运作它,但不太好用。从IE10才刚开始适用keyframes英语的语法。

持续的改善自身以前的编码是个好习惯性。尽管这个纯CSS完成的动漫其实不能在IE9里正确的运作,但IE10+,火狐,谷歌访问器里都工作中的十分好。假如务必要适用IE9,你依然可使用CSS标准分辨英语的语法和JavaScript相互配合完成js版的实际效果。