当前位置 CSS模版园 >> 酷炫特效 >> 纯CSS3制作飞舞的火箭动画

纯CSS3制作飞舞的火箭动画

纯CSS3制作飞舞的火箭动画

纯CSS3制作飞舞的火箭动画

使用了transform、html5伪元素:after和:before来实现动画和画图

真是无法想想,css3和html5结合起来真是非常的强大,你还在用flash吗? out了吧~

部分CSS:

.spaceship .body {
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	border-radius: 300px;
	position: absolute;
	box-shadow: -33px -33px 0 rgba(228, 230, 234, .6) inset;
	background-color: rgba(235, 236, 240, 1);
	-webkit-transform: scale(0.46, 1);
	-moz-transform: scale(0.46, 1);
	-ms-transform: scale(0.46, 1);
	-o-transform: scale(0.46, 1);
	transform: scale(0.46, 1);
	overflow: hidden
}
.spaceship .body:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 285px;
	background-color: rgba(255, 153, 145, 1);
	border-radius: 300px;
	-webkit-transform: scale(0.9, .46);
	-moz-transform: scale(0.9, .46);
	-ms-transform: scale(0.9, .46);
	-o-transform: scale(0.9, .46);
	transform: scale(0.9, .46);
	margin-top: -180px
}

 

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-37.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)