动画图像,像它从右到左移动
Animate image like it's moving from right to left
我试图动画地板,应该从右到左移动像云,它的工作,但问题是它溢出的容器外。我怎样才能防止这种情况发生呢?对不起,我是新的css动画。提前谢谢。
这是我做的小提琴:点击这里.container {
width: 50%;
margin: 0 auto;
text-align: center;
}
#clouds{
padding: 100px 0;
background: #3598dc;
background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
background: -linear-gradient(top, #3598dc 0%, #fff 100%);
background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
#character{
margin-top: -120px;
background:url(http://i.imgur.com/Zjsbcni.png);
width: 84px;
height: 126px;
animation: walk 1.0s steps(6) infinite;
margin-left: 425px;
}
#flooring {
height: 39px;
background-image: url(http://i.imgur.com/usFekrp.png);
animation: movefloor 20s linear infinite;
overflow: hidden;
}
@keyframes movefloor {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@keyframes walk {
from { background-position: 0px; }
to { background-position: -500px; }
}
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: 252px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
<div class="container">
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="character"></div>
<div id="flooring"></div>
</div>
add overflow: hidden;
to id "clouds"
#clouds{
overflow: hidden;
}
https://jsfiddle.net/p7noxpx1/1/以地板为例https://jsfiddle.net/ggb62cux/4/
添加overflow:hidden
到#clouds
:
body {
font-family: 'Candal', sans-serif;
overflow: hidden;
background-color:black;
/* remove this line, this is to prove the cloud is invisible ^^^ */
}
.container {
width: 50%;
margin: 0 auto;
text-align: center;
}
#clouds{
padding: 100px 0;
background: #3598dc;
background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
background: -linear-gradient(top, #3598dc 0%, #fff 100%);
background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
overflow:hidden;
/* add this line ^^^ */
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
#character{
margin-top: -120px;
background:url(http://i.imgur.com/Zjsbcni.png);
width: 84px;
height: 126px;
animation: walk 1.0s steps(6) infinite;
margin-left: 425px;
}
#flooring {
height: 39px;
background-image: url(http://i.imgur.com/usFekrp.png);
animation: movefloor 20s linear infinite;
overflow: hidden;
}
@keyframes movefloor {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@keyframes walk {
from { background-position: 0px; }
to { background-position: -500px; }
}
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: 252px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
<div class="container">
<h1>CSS3 Animation</h1>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div id="character"></div>
<div id="flooring"></div>
</div>
更新的小提琴
修复1:云溢出容器: overflow: hidden
只会隐藏溢出页面主体的元素。因此,您需要将overflow: hidden
添加到div #clouds
。
修改#clouds
如下:
#clouds {
padding: 100px 0;
background: #3598dc;
background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
background: -linear-gradient(top, #3598dc 0%, #fff 100%);
background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
overflow: hidden;
}
修复2:地板动画隐藏地板动画是隐藏的,因为它溢出了身体。将body中的overlfow: hidden
更改为overflow-x: hidden
修改body
如下:
body {
font-family: 'Candal', sans-serif;
overflow-x: hidden;
}
解决方案
我认为你应该添加overflow: hidden;
到.container
和#clouds
,因为每个元素都包含在.container
中。云的位置是绝对的,所以它们可能在.container
内部溢出,因此overflow: hidden;
应用在#clouds
上。如果你想让#character
在容器内,也可以改变它的边距。
.container {
margin: 0 auto;
overflow: hidden;
text-align: center;
width: 50%;
}
#clouds {
background: #3598dc;
background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
background: -linear-gradient(top, #3598dc 0%, #fff 100%);
background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
overflow: hidden;
padding: 100px 0;
}
#character{
animation: walk 1.0s steps(6) infinite;
background:url(http://i.imgur.com/Zjsbcni.png);
height: 126px;
margin-left: 320px;
margin-top: -120px;
width: 84px;
}
检查这个提琴
相关文章:
- 从右到左输入掩码
- jQuery 动态从右到左的 CSS 处理
- 图表.js 2,从右到左(不是自上而下)进行动画处理
- Jquery Div 幻灯片从右到左切换无法正常工作
- iScroll在一个从右到左的网站上
- 如何以反向/从右到左的顺序显示阿拉伯语网站的Nivo滑块分页
- jQuery UI:从右到左设置动画
- CSS 选择器从右到左进行评估.querySelectorAll() 选择器也会以这种方式进行评估吗?
- 从右到左打印一个三角形
- CSS线性渐变朝左(从右到左)
- 如何使用 style.left 从右向左移动图像
- 从右到左滚动内容 Javascript
- React 中的从右到左 (RTL) 支持
- cleditor中从右到左的文本方向
- Jquery幻灯片选项卡从右到左的功能
- 使用jQuery从右到左屏蔽输入
- 如何防止在使用阿拉伯语时出现从右到左的文本
- 我如何移动一个图像从左到右和从右到左在javascript无限的时间
- 我怎样才能让图像从右到左横向移动浏览器
- 动画图像,像它从右到左移动