css3动画：animation城市动画

最新推荐文章于 2024-04-20 10:09:28 发布
最新推荐文章于 2024-04-20 10:09:28 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： css3 文章标签： css3 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VLilyV/article/details/73275252
版权

效果图：
这里写图片描述
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市动画</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="stage">
        <div class="nightover"></div>
        <div class="cloudSmall"></div>
        <div class="cloudMedium"></div>
        <div class="cloudLarge"></div>
        <div class="rotation">
            <div class="sun"></div>
            <div class="moon"></div>
        </div>
        <div class="balloon"></div>
        <div class="beans"></div>
        <div class="skyline"></div>
        <div class="groundBack"></div>
        <div class="Glockenspiel"></div>
        <div class="Planetarium"></div>
        <div class="dowEventCenter"></div>
        <div class="groundMid"></div>
        <div class="friendshipShell"></div>
        <div class="groundFront"></div>
        <div class="groundMid"></div>
        <div class="groundFront"></div>
    </div>
</body>
</html>

重点在css代码，分析变化规律并转化成相应的代码：

*{margin: 0px;padding: 0px;}
/*布置动画场景整体分析：云朵和热气球不规则运动，天空颜色变化随着太阳和月亮的变化而变化，
第一阶段，太阳从正上方运动到正下方（同时月亮从正下方运动到正上方：正午12点到深夜12点，天空有2个变化12点到下午7点天空为天蓝色，下午7点到深夜12点是黑色）
第二阶段，太阳从最下方运动到最上方（同时月亮从最上方运动到最下方）深夜12点到正午12点，
天空颜色有3个变化深夜12点到早上5点天空为黑色，凌晨五点到8点为粉红色，早上8点到正午12点是蓝色
总结在过一天，（太阳（月亮）转动一圈，自定义110s）天空颜色变化：天蓝色-黑色-黑色-粉红色-蓝色*/
/*制作天空变色*/
.stage{
    position: relative;
    height: 600px;
    background: rgb(217,241,243);
    overflow: hidden;
    -webkit-animation: skyset 110s linear infinite normal;
    -moz-animation: skyset 110s linear infinite normal;
    -ms-animation: skyset 110s linear infinite normal;
    -o-animation: skyset 110s linear infinite normal;
}
@keyframes skyset{
    0%{background:rgb(217,241,243);}
    23%{background:rgb(217,241,243);}
    25%{background:#0f192c;}
    50%{background:#0f192c;}
    68%{background:#0f192c;}
    75%{background: #f9c7b8;}
    82%{background:rgb(217,241,243);}
    100%{background:rgb(217,241,243);}
}
@-webkit-keyframes skyset{
    0%{background:rgb(217,241,243);}
    23%{background:rgb(217,241,243);}
    25%{background:#0f192c;}
    50%{background:#0f192c;}
    68%{background:#0f192c;}
    75%{background: #f9c7b8;}
    82%{background:rgb(217,241,243);}
    100%{background:rgb(217,241,243);}
}
@-moz-keyframes skyset{
    0%{background:rgb(217,241,243);}
    23%{background:rgb(217,241,243);}
    25%{background:#0f192c;}
    50%{background:#0f192c;}
    68%{background:#0f192c;}
    75%{background: #f9c7b8;}
    82%{background:rgb(217,241,243);}
    100%{background:rgb(217,241,243);}
}

@-o-keyframes skyset{
    0%{background:rgb(217,241,243);}
    23%{background:rgb(217,241,243);}
    25%{background:#0f192c;}
    50%{background:#0f192c;}
    68%{background:#0f192c;}
    75%{background: #f9c7b8;}
    82%{background:rgb(217,241,243);}
    100%{background:rgb(217,241,243);}
}
/*制作天空变色完*/
/*制作太阳转动*/
.rotation{
    /*border: 1px solid red;*/
    width: 700px;
    height: 700px;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -350px 0 0 -350px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    animation: rotation1 110s linear infinite normal;
    -moz-animation: rotation1 110s linear infinite normal;
    -ms-animation: rotation1 110s linear infinite normal;
    -o-animation: rotation1 110s linear infinite normal;
}
@keyframes rotation1{
    0%{-webkit-transform:rotate(45deg);}
    100%{-webkit-transform:rotate(405deg);}
}
@-webkit-keyframes rotation1{
    0%{-webkit-transform:rotate(45deg);}
    100%{-webkit-transform:rotate(405deg);}
}
@-moz-keyframes rotation1{
    0%{-webkit-transform:rotate(45deg);}
    100%{-webkit-transform:rotate(405deg);}
}
@-o-keyframes rotation1{
    0%{-webkit-transform:rotate(45deg);}
    100%{-webkit-transform:rotate(405deg);}
}
.sun,.moon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.sun{
    position: absolute;
    top: 0;
    left: 0;
    background: yellow;
}
.moon{
    position: absolute;
    bottom: 0;
    right: 0;
    background: black;
}
/*制作太阳转动完*/
/*当太阳落山时，所有的物体都会变得看不清，
使用方法：加一个全局遮罩，控制透明度：亮-黑-亮*/
.nightover{
    position: absolute;
    /*top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
    width: 100%;
    height: 600px;
    z-index: 9999;
    background: rgba(15, 25, 44, 0.7);
    opacity: 0;
    -webkit-animation: set 110s infinite linear;
    -moz-animation: set 110s infinite linear;
    -o-animation: set 110s infinite linear;
    animation: set 110s infinite linear;
}
 @-webkit-keyframes set {

} 0% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
 50% {
 filter: Alpha(Opacity=100);
 opacity: 1;
}
 100% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
 @-moz-keyframes set {
 0% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
 50% {
 filter: Alpha(Opacity=100);
 opacity: 1;
}
 100% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
}
 @-o-keyframes set {
 0% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
 50% {
 filter: Alpha(Opacity=100);
 opacity: 1;
}
 100% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
}
 @keyframes set {
 0% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
 50% {
 filter: Alpha(Opacity=100);
 opacity: 1;
}
 100% {
 filter: Alpha(Opacity=0);
 opacity: 0;
}
}
.cloudSmall{
    position: absolute;
    top: 20px;
    width: 90px;
    height: 50px;
    z-index:2;
    background: url(../img/cloudSmall.png) no-repeat;
    -webkit-animation: cloudl 300s linear infinite normal;
    -moz-animation: cloudl 300s linear infinite normal;
    -ms-animation: cloudl 300s linear infinite normal;
    -o-animation: cloudl 300s linear infinite normal;
}
.cloudMedium{
    position: absolute;
    top: 80px;
    width: 159px;
    height: 92px;
    z-index: 2;
    background: url(../img/cloudMedium.png) no-repeat center;
    -webkit-animation: cloudl 180s linear infinite normal;
    -moz-animation: cloudl 180s linear infinite normal;
    -ms-animation: cloudl 180s linear infinite normal;
    -o-animation: cloudl 180s linear infinite normal;
}
.cloudLarge{
    position: absolute;
    top: 40px;
    right: 0;
    width: 302px;
    height: 169px;
    z-index: 4;
    background: url(../img/cloudLarge.png) no-repeat center ;
    -webkit-animation: cloudr 180s linear infinite normal;
    -moz-animation: cloudr 180s linear infinite normal;
    -ms-animation: cloudr 180s linear infinite normal;
    -o-animation: cloudr 180s linear infinite normal;
}
.balloon{
    position: absolute;
    top: 40px;
    right: 0;
    width: 157px;
    height: 227px;
    z-index: 10;
    background: url(../img/balloon.png) no-repeat;
    -webkit-animation: balloon1 50s linear infinite normal;
    -moz-animation: balloon1 50s linear infinite normal;
    -ms-animation: balloon1 50s linear infinite normal;
    -o-animation: balloon1 50s linear infinite normal;
}
.beans{
    position: absolute;
    bottom: 30%;
    right: 40%;
    width: 88px;
    height: 201px;
    z-index: 3;
    background: url(../img/beans.png) no-repeat ;
}
.skyline{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 147px;
    bottom: 26%;
    background: url(../img/skyline.png) repeat-x;

}
.groundBack{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 281px;
    bottom: 0;
    background: url(../img/groundBack.png) repeat-x;
}
.Planetarium{
    position: absolute;
    bottom: 20%;
    left: 65%;
    z-index: 10;
    width: 347px;
    height: 285px;
    background: url(../img/Planetarium.png) no-repeat;
}
.dowEventCenter{
    position: absolute;
    bottom: 20%;
    left: 5%;
    z-index: 10;
    width: 520px;
    height: 229px;
    background: url(../img/dowEventCenter.png) no-repeat;
}
.Glockenspiel{
    position: absolute;
    bottom: 26%;
    left: 40%;
    width: 137px;
    height: 263px;
    z-index: 10;
    background: url(../img/Glockenspiel.png) no-repeat;
}
.groundMid{
    position: absolute;
    bottom: 0%;
    left: 0%;
    z-index: 10;
    width: 827px;
    height: 299px;
    background: url(../img/groundMid.png) repeat-x;
}
.friendshipShell{
    position: absolute;
    bottom: 20%;
    left: 22%;
    z-index: 20;
    width: 231px;
    height: 370px;
    background: url(../img/friendshipShell.png) no-repeat;
}
.groundFront{
    position: absolute;
    bottom: 0%;
    left: 50%;
    z-index: 10;
    width: 100%;
    height: 299px;
    background: url(../img/groundFront.png) no-repeat;
}
/*制作动画：*/

@keyframes cloudl{
    0%{left: -10%;}
    20%{left:25%;}
    40%{left: 45%;}
    60%{left: 65%;}
    80%{left: 85%;}
    100%{left: 120%;}
}
@-webkit-keyframes cloudl{
    0%{left: -10%;}
    20%{left:25%;}
    40%{left: 45%;}
    60%{left: 65%;}
    80%{left: 85%;}
    100%{left: 120%;}
}
@-moz-keyframes cloudl{
    0%{left: -10%;}
    20%{left:25%;}
    40%{left: 45%;}
    60%{left: 65%;}
    80%{left: 85%;}
    100%{left: 120%;}
}
@-o-keyframes cloudl{
    0%{left: -10%;}
    20%{left:25%;}
    40%{left: 45%;}
    60%{left: 65%;}
    80%{left: 85%;}
    100%{left: 120%;}
}
@keyframes cloudr{
    0%{right: -30%;}
    20%{right:10%;}
    40%{right: 35%;}
    60%{right: 60%;}
    80%{right: 85%;}
    100%{right: 120%;}
}
@-moz-keyframes cloudr{
    0%{right: -30%;}
    20%{right:10%;}
    40%{right: 35%;}
    60%{right: 60%;}
    80%{right: 85%;}
    100%{right: 120%;}
}
@-webkit-keyframes cloudr{
    0%{right: -30%;}
    20%{right:10%;}
    40%{right: 35%;}
    60%{right: 60%;}
    80%{right: 85%;}
    100%{right: 120%;}
}
@-o-keyframes cloudr{
    0%{right: -30%;}
    20%{right:10%;}
    40%{right: 35%;}
    60%{right: 60%;}
    80%{right: 85%;}
    100%{right: 120%;}
}
@keyframes balloon1{
    0%{right: -30%;-webkit-transform:rotate(0deg);}
    20%{right:10%;-webkit-transform:rotate(5deg);}
    40%{right: 35%;-webkit-transform:rotate(15deg);}
    60%{right: 60%;-webkit-transform:rotate(30deg);}
    80%{right: 85%;-webkit-transform:rotate(15deg);}
    100%{right: 120%;-webkit-transform:rotate(0deg);}
}
@-moz-keyframes balloon1{
    0%{right: -30%;-webkit-transform:rotate(0deg);}
    20%{right:10%;-webkit-transform:rotate(5deg);}
    40%{right: 35%;-webkit-transform:rotate(15deg);}
    60%{right: 60%;-webkit-transform:rotate(30deg);}
    80%{right: 85%;-webkit-transform:rotate(15deg);}
    100%{right: 120%;-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes balloon1{
    0%{right: -30%;-webkit-transform:rotate(0deg);}
    20%{right:10%;-webkit-transform:rotate(5deg);}
    40%{right: 35%;-webkit-transform:rotate(15deg);}
    60%{right: 60%;-webkit-transform:rotate(30deg);}
    80%{right: 85%;-webkit-transform:rotate(15deg);}
    100%{right: 120%;-webkit-transform:rotate(0deg);}
}

@-o-keyframes balloon1{
    0%{right: -30%;-webkit-transform:rotate(0deg);}
    20%{right:10%;-webkit-transform:rotate(5deg);}
    40%{right: 35%;-webkit-transform:rotate(15deg);}
    60%{right: 60%;-webkit-transform:rotate(30deg);}
    80%{right: 85%;-webkit-transform:rotate(15deg);}
    100%{right: 120%;-webkit-transform:rotate(0deg);}
}

图片素材：
http://download.csdn.net/detail/vlilyv/9847217

VLilyV
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3动画animation、3D动画（一）
m0_64460142的博客
04-11 889
1CSS3动画animation CSS3使用animation实现动画，主要由两个部分组成通过类似Flash动画的关键帧来声明一个动画在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。 调用动画和使用设置；animation:animation-name animation-duration animation-timing-functionanimation-delay animation-iteration-count animation-direction :anim.
css3---动画animation
m0_71102594的博客
05-26 97
75% { transform: translate(0,500px); } 100% { transform: translate(0,0); } } html: 动画序列： 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 “from
CSS3卡通城市动画场景代码.zip
05-23
CSS3卡通城市动画场景代码，城市高楼，蓝天白云动画场景。
web前端日常更新8.4
m0_72174711的博客
08-04 154
作业城市场景动画的介绍
ModernBoxes: 创新的CSS3动画库，赋予网页动感新生命
最新发布
gitblog_00087的博客
04-20 290
ModernBoxes: 创新的CSS3动画库，赋予网页动感新生命 项目地址:https://gitcode.com/hui3215/ModernBoxes ModernBoxes 是一个基于CSS3的开源动画库，专注于为网页元素提供一系列现代、优雅且高度可定制的动画效果。开发者可以利用这个库轻松地为网站增添互动性和视觉吸引力，提升用户体验。 技术解析 ModernBoxes 使用纯CSS3语法编...
城市场景动画(HTML)
CNSA183_20的博客
08-15 769
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>城市场景动画</title> <style> *{ margin: 0; padding: 0; } .
CSS——动画和弹性盒子（旋转相册，城市动画，WC3导航条，骰子（附源码））
m0_72975897的博客
09-08 313
旋转transform: rotate();1. 默认情况下是绕着中⼼点进⾏转动的；2. 默认的单位是deg，⽐如rotate（45deg） 3. 如果这个值为正值，则是元素对原点中⼼顺时针旋转；
html5场景动画效果图,HTML5+CSS3城市场景动画
weixin_29041767的博客
06-03 1151
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。一、HTML结构这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，...
基于CSS3特效之动画:animation的应用
09-25
本篇文章对CSS3中的animation的使用进行了详细的介绍，需要的朋友可以参考下
CSS3 Animation文字动画特效
06-24
在本文中，我们将深入探讨CSS3 Animation在创建文字动画特效中的应用。CSS3，作为CSS（层叠样式表）的最新版本，引入了许多强大的新特性，其中包括动画功能，使得网页设计更加生动活泼，增强了用户体验。 一、CSS3 ...
css3 animation酷炫的文字动画特效
11-04
在本文中，我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，...
HTML城市场景动画
01-12
HTML/CSS完整版城市场景代码，，，，，，，，，，，，，
html5 css3城市场景动画.zip
07-04
html5 css3城市场景动画是一款包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；页面的视觉效果采用了插画的设计风格。 html5 css3城市场景动画演示图：
HTML5+CSS3 城市选择器
06-16
使用HTML+css3写的城市选择器。实现了城市多选了单选功能。支持最多选择三个城市。 适合下载下来作为一个参考的demo。
html5+css3城市场景动画特效代码
03-20
html5+css3城市场景动画是一款包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；页面的视觉效果采用了插画的设计风格。 html5+css3城市场景动画演示图：
用css3写出气球样式的示例代码
12-30
本文介绍了用css3写出气球样式的示例代码，分享给大家，具体如下： 气球效果图： html: <div class=ballon></div> css: .balloon{ width: 160px; height: 160px; background: #faf9f9; /*css3 圆角属性*/ border-radius: 50P%P%; /*顺时针旋转45度*/ transform: rotate(45deg);
CSS3动画animation实现云彩向左滚动
01-19
CSS3动画animation实现漂浮的云</title> <style type=”text/css”> html,body { padding: 0; margin: 0; } .wrap { height: 190px; width: 600px; margin: 150px auto 0; background: url(‘bg-clouds....
纯css制作的城市场景动画
weixin_42595284的博客
09-01 1936
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /*公共样式*/ *{
CSS3的动画特效——城市
SanPhantom的博客
09-02 346
CSS3的动画特效——城市 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet"
css3动画-animation各个属性详解
06-28
回答3：</h3><br/>CSS3动画是将元素从一个状态变换到另一个状态的方式，其中使用了一些简单的CSS属性。CSS3动画属性可以通过@keyframe规则或transition属性设置。它们可以用来创造一些很棒的效果，比如向上滚动的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值