...章给大家带来的内容是关于CSS3属性:text-shadow文本阴影的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有...
今天教大家的这一份代码是用CSS3做出带有光晕的流星旋转光环的效果,感兴趣的朋友可以自己动手实践一下,案列代码如下:html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
perspective: 1000px;
}
.bg0 {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(../images/bg0.png) no-repeat center center;
background-size: 150%;
}
.bg1 {
width: 100%;
height: 100%;
background: url(../images/bg1.png) no-repeat center center;
}
.hx-box {
top: 50%;
left: 50%;
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg);
}
.hx-box ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
animation:hxz 20s linear infinite;
}
@keyframes hxz{
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box ul li {
width: 500px;
height: 500px;
border: 4px solid #5ec0ff;
border-radius: 1000px;
}
.hx-box ul li span {
display: block;
width: 100%;
height: 100%;
background: url(../images/hx.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k2 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k3 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
不得不说CSS3还是很强大的,更多精彩请关注php中文网其它相关文章!
相关阅读:
css3的弹性盒怎么做出来
在HTML里web标准是什么
CSS3怎么做出响应式布局