CSS3特效宇航员动画
这是一款纯css3实现的太空中宇航员掉落动画效果
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #102037;
overflow: hidden;
}
@-webkit-keyframes snow {
0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); }
20%{ opacity: 1;}
100% { opacity: 1; -webkit-transform: translateY(650px); transform: translateY(650px); }
}
@keyframes snow {
0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); }
20%{ opacity: 1;}
100% { opacity: 1; -webkit-transform: translateY(650px); transform: translateY(650px); }
}
@-webkit-keyframes astronaut{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4{
width: 100%;
position: absolute;
z-index: 10;
left: 0;
-webkit-transform: translateY(650px);
transform: translateY(650px);
}
.box-of-star1{
-webkit-animation: snow 5s linear infinite;
}
.box-of-star2{
-webkit-animation: snow 5s -1.64s linear infinite;
}
.box-of-star3{
-webkit-animation: snow 5s -2.30s linear infinite;
}
.box-of-star4{
-webkit-animation: snow 5s -3.30s linear infinite;
}
.star{
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #FFF;
position: absolute;
z-index: 10;
opacity: .7;
}
.star:before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FFF;
position: absolute;
z-index: 10;
top: 40px;
left: 70px;
opacity: .7;
}
本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn
相关文章
09 Sep 2023
CSS3的新特性一览:如何应用CSS3动画效果引言:随着互联网的发展,CSS3逐渐取代了CSS2成为前端开发中最常用的样式语言。CSS3提供了许多新的特性,其中最受欢迎的是动画效果。通过使用CSS3动画,可以为网页添加令人惊艳的交互效果,提高用户体验。本文将介绍一些CSS3常用的动画特性,并提供相关的代码示例。一、过渡动画(TransitionAnimat
27 Oct 2018
在网速不好的情况下打开网站或者观看视频,页面加载会很慢,这时一般会提示用户“页面正在加载中,请稍后”,而且会有一个圆圈一直在转动。正在学习html和CSS的小伙伴,你会用CSS3实现圆圈加载动画效果吗?这篇文文章就给大家分享一个纯CSS3实现的圆圈(loading)加载动画特效,感兴趣的小伙伴可以参考借鉴一下。
10 Sep 2023
CSS3属性如何实现网页中的导航栏动画效果?在现代网页设计中,导航栏是网站中常用的一个元素,不仅起到了导航功能,还能提升网站的用户体验。为了使导航栏更具吸引力和互动性,使用CSS3属性可以实现各种动画效果,使网页更加生动活泼。本文将介绍几种常见的CSS3属性来实现导航栏动画效果。一、transition属性transition属性是CSS3中用于设置元素过渡
16 May 2016
这篇文章主要介绍了原生javascript+css3编写的3D魔方动画旋扭特效的相关资料,需要的朋友可以参考下
21 Sep 2023
如何使用Vue实现导航栏动画特效导航栏是一个网站或应用程序重要的组成部分,它能够帮助用户快速浏览网站的不同页面或功能。一个具有吸引力和交互性的导航栏能够提升用户体验,并提升网站或应用程序的整体质量。Vue是一款功能强大、简单易用的JavaScript框架,它可以帮助我们快速构建交互式的前端页面。下面将介绍如何使用Vue来实现导航栏动画特效,同时附带详细的代码
09 Sep 2023
如何熟练运用CSS3特效提升网页的用户体验随着互联网的发展,网页设计和用户体验成为了网站开发中的重要环节。而CSS3特效的应用,可以为网页增添动感和视觉效果,提升用户体验。本文将介绍几种常见的CSS3特效及其代码示例,帮助开发者更加熟练地运用CSS3特效,提升网页的用户体验。过渡效果(Transition)过渡效果是CSS3中最基本的特效之一,通过改变某个属
18 Jan 2017
这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件,并通过CSS3 transform和animation来制作动画特效。
Hot Tools
CSS文字组合成心形动画特效
CSS文字组合成心形动画特效
CSS3 SVG表白鲜花动画特效
SS3 SVG表白鲜花动画特效是一款情人节动画特效。
CSS的商城网站常用左侧分类下拉导航菜单代码
CSS的商城网站常用左侧分类下拉导航菜单代码
jQuery+CSS3情人节爱心特效
jQuery+CSS3情人节爱心特效是一款情人节悬挂摆动爱心动画特效。
css3汤勺捞起汤圆动画特效
一碗可爱的汤圆表情,汤勺捞起一个汤圆动画特效