html场景动画,HTML5 CSS3场景动画:热情的沙漠
CSS
语言:
CSSSCSS
确定
body {
background: black;
}
.container {
position: relative;
width: 800px;
height: 600px;
background: #190721;
padding-top: 50px;
margin: 90px auto;
}
.desert {
position: relative;
width: 300px;
height: 550px;
background: -webkit-linear-gradient(top, rgba(86, 1, 39, 1) 0%, rgba(145, 2, 2, 1) 47%, rgba(241, 116, 50, 1) 100%);
background: linear-gradient(to bottom, rgba(86, 1, 39, 1) 0%, rgba(145, 2, 2, 1) 47%, rgba(241, 116, 50, 1) 100%);
margin: 0px auto;
overflow: hidden
}
.sol {
position: absolute;
width: 60px;
height: 60px;
background: -webkit-linear-gradient(top, rgba(241, 116, 50, 1) 0%, rgba(241, 116, 50, 0.26) 64%, rgba(241, 116, 50, 0) 86%);
background: linear-gradient(to bottom, rgba(241, 116, 50, 1) 0%, rgba(241, 116, 50, 0.26) 64%, rgba(241, 116, 50, 0) 86%);
border-radius: 100%;
box-shadow: -3px -5px 35px rgb(255, 149, 73);
margin: 162px 172px
}
.nubes,
.nubes3,
.nubes7,
.nubes9,
.nubes12 {
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
}
.nubes {
margin: 142px 192px;
}
.nubes3 {
margin: 212px 132px;
}
.nubes7 {
margin: 102px 12px;
}
.nubes9 {
margin: 291px 12px;
}
.nubes12 {
margin: 360px 192px;
}
.nubes::before,
.nubes3::before,
.nubes7::before,
.nubes9::before,
.nubes12::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
margin: -7px 30px;
}
.nubes::after,
.nubes3::after,
.nubes7::after,
.nubes9::after,
.nubes12::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);
margin: 12px 50px;
}
.cerro,
.cerro7,
.cerro12 {
position: absolute;
width: 261px;
height: 261px;
border-radius: 30px 0 0 0;
background: -webkit-linear-gradient(-45deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);
background: -webkit-linear-gradient(315deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);
background: linear-gradient(135deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden
}
.cerro {
margin: 450px 21px;
}
.cerro7 {
margin: 450px -53px;
-webkit-transform: rotate(45deg) scale(.7);
transform: rotate(45deg) scale(.7);
}
.cerro3,
.cerro9,
.cerro21 {
position: absolute;
width: 231px;
height: 231px;
border-radius: 100%;
background: -webkit-linear-gradient(-45deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);
background: -webkit-linear-gradient(315deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);
background: linear-gradient(135deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);
margin: -9px -162px
}
.cerro12 {
-webkit-transform: rotate(45deg) scale(.5);
transform: rotate(45deg) scale(.5);
margin: 412px 121px
}
.s1,
.s2,
.s3,
.s4,
.s5,
.s6,
.s7 {
position: absolute;
width: 9px;
height: 9px;
border-radius: 100%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);
background: -webkit-radial-gradient(center ellipse, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);
background: radial-gradient(ellipse at center, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);
box-shadow: 0px 0px 9px rgba(255, 255, 255, .7);
}
.s1 {
margin: 21px 60px;
-webkit-animation: brilla 1.2s alternate infinite;
animation: brilla 1.2s alternate infinite;
}
.s2 {
margin: 70px 90px;
-webkit-transform: scale(.7);
transform: scale(.7);
-webkit-animation: brilla .9s alternate infinite;
animation: brilla .9s alternate infinite;
}
.s3 {
margin: 40px 142px;
-webkit-animation: brilla .7s alternate infinite;
animation: brilla .7s alternate infinite;
}
.s4 {
margin: 70px 201px;
-webkit-transform: scale(.7);
transform: scale(.7);
-webkit-animation: brilla .6s alternate infinite;
animation: brilla .6s alternate infinite;
}
.s5 {
margin: 21px 231px;
-webkit-animation: brilla .8s alternate infinite;
animation: brilla .8s alternate infinite;
}
.s6 {
margin: 50px 12px;
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-animation: brilla .6s alternate infinite;
animation: brilla .6s alternate infinite;
}
.s7 {
margin: 50px 271px;
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-animation: brilla .6s alternate infinite;
animation: brilla .6s alternate infinite;
}
@-webkit-keyframes brilla {
0% {
opacity: 0.3
}
100% {
opacity: 1
}
}
@keyframes brilla {
0% {
opacity: 0.3
}
100% {
opacity: 1
}
}
html场景动画,HTML5 CSS3场景动画:热情的沙漠相关推荐
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- 哈哈,又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览 发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
- html5遮罩层动画,HTML5+CSS3城市场景动画
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳.云朵.气球等动画效果:除此之外,页面 ...
- html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- HTML5+CSS3高级动画的应用实践
我们大概都知道css可以用来作平面旋转.扭曲.放大缩小.平移...并且用起来几乎都得心应手. 但目前来说,3D效果的"高级"动画似乎更受欢迎一些,而且我们也确实需要. 这不,前两天 ...
- css动画定义,css3的动画(animation)属性的详解(附代码)
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...
- html图像粒子转换动画,html5 canvas粒子动画生成图片特效
特效描述:html5 canvas 粒子动画生成 图片特效.html5基于canvas粒子化图片 利用easying.js公式计算粒子动态轨迹方程, x轴方向和y轴方向的公式均可以选择 可以设置粒子运 ...
最新文章
- C++递归与非递归实现全排列
- Linux备份MySQL xshell_linux shell脚本备份mysql数据库
- 【收藏】Vue中ref和$refs的介绍及使用
- php生成首页 教程,简单静态页生成 过程_PHP教程
- 几种jvm OOM问题
- 联合国启动有史以来最大规模全球对话,腾讯会议、企业微信全程支持
- linux 实现远程桌面 VNC
- 隐藏TreeView中SiteMap的根节点
- Python Revisited Day10 (进程与线程)
- win7卡在正在启动windows界面_重装win7系统到启动/开机画面就死机解决措施
- 修复40G的老IDE硬盘
- Windows之重置密码
- 路由器与交换机的基本工作原理
- ubuntu18.04+opencv3.4.10+opencv3.4.10contrib+LSD使用
- linux 内网网络波动检测,Linux内网测试环境模拟网络丢包和延时
- 计算机pe教程,u启动windows7PE工具箱
- feel free to用法
- 入选“清华书单”和“中华优秀科普图书榜”​:《追问人工智能:从剑桥到北京...
- OPPO ColorOS再夺冠!鲁大师发布Q1季度UI排行!
- android 相机智能补光,美图秀秀的HD1.3.1版新增智能补光将暗淡照片瞬间变亮彩