亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

動畫出現一半的問題

看到樓下有個哥們說動畫有問題，按照他這種方式去修改動畫是回復了，我就很奇怪，看了下初始化圖片的位置css，position后，left了50%，然后左移了50%，造成了動畫一半的效果，將left改為0，并且左移的動畫刪掉，動畫就正常了，希望能夠幫到耐心看評論的朋友。。。

正在回答

3 回答

問題及答案。

0 回復 有任何疑惑可以回復我~
#1

臭大大3560892 提問者

非常感謝！
2018-07-20 回復 有任何疑惑可以回復我~

給您參考下我修改后的代碼，經測試動畫比較流暢：

<!DOCTYPE?html>
<html?lang="en">
<link?rel="stylesheet"?href="demo.css">
<head>
????<meta?charset="UTF-8">
????<title>box-sizing</title>
????<style>
?@importurl("http://www.w3cplus.com/demo/css3/base.css");
????????@importurl("http://fonts.googleapis.com/css?family=Yesteryear");
????????html,
????????body?{
????????????height:?100%;
?}
????????/*設置背景圖片全屏顯示，并且居中*/
?img.bg?{
????????????min-height:?100%;
?min-width:?1024px;
?width:?100%;
?height:?100%;
?position:?fixed;
?top:?0;
?left:?0;
?z-index:1;
?}
????????/*設置背景圖片從左向右移入顯示的動畫效果*/
????????/*?Slide?Left?*/

?@-webkit-keyframes?slideLeft?{
????????????0%?{?left:?-10%;?}
????????????100%?{?left:?0;?}
????????}
????????@-moz-keyframes?slideLeft?{
????????????0%?{?left:?-500px;?}
????????????100%?{?left:?0;?}
????????}
????????@-o-keyframes?slideLeft?{
????????????0%?{?left:?-500px;?}
????????????100%?{?left:?0;?}
????????}
????????@-ms-keyframes?slideLeft?{
????????????0%?{?left:?-500px;?}
????????????100%?{?left:1000px;}
????????}
????????@keyframes?slideLeft?{
????????????0%?{?left:?-100%;?}
????????????100%?{?left:?0;?}
????????}
????????/*設置背景圖像從底部向頂部移入的動畫效果*/
????????/*?Slide?Bottom?*/

?@-webkit-keyframes?slideBottom?{
????????????0%?{?top:?350px;?}
????????????100%?{?top:?0;?}
????????}
????????@-moz-keyframes?slideBottom?{
????????????0%?{?top:?350px;?}
????????????100%?{?top:?0;?}
????????}
????????@-ms-keyframes?slideBottom?{
????????????0%?{?top:?350px;?}
????????????100%?{?top:?0;?}
????????}
????????@-o-keyframes?slideBottom?{
????????????0%?{?top:?350px;?}
????????????100%?{?top:?0;?}
????????}
????????@keyframes?slideBottom?{
????????????0%?{?top:?350px;?}
????????????100%?{?top:?0;?}
????????}
????????/*設置背景圖片由小到大放大動畫效果*/
????????/*?Zoom?In?*/

?@-webkit-keyframes?zoomIn?{
????????????0%?{?-webkit-transform:?scale(0.1);?}
????????????100%?{?-webkit-transform:?none;?}
????????}
????????@-moz-keyframes?zoomIn?{
????????????0%?{?-moz-transform:?scale(0.1);?}
????????????100%?{?-moz-transform:?none;?}
????????}
????????@-ms-keyframes?zoomIn?{
????????????0%?{?-ms-transform:?scale(0.1);?}
????????????100%?{?-ms-transform:?none;?}
????????}
????????@-o-keyframes?zoomIn?{
????????????0%?{?-o-transform:?scale(0.1);?}
????????????100%?{?-o-transform:?none;?}
????????}
????????@keyframes?zoomIn?{
????????????0%?{?transform:?scale(0.1);?}
????????????100%?{?transform:?none;?}
????????}
????????/*設置背景圖像由大到小縮小動畫效果*/
????????/*?Zoom?Out?*/

?@-webkit-keyframes?zoomOut?{
????????????0%?{?-webkit-transform:?scale(2);?}
????????????100%?{?-webkit-transform:?none;?}
????????}
????????@-moz-keyframes?zoomOut?{
????????????0%?{?-moz-transform:?scale(2);?}
????????????100%?{?-moz-transform:?none;?}
????????}
????????@-ms-keyframes?zoomOut?{
????????????0%?{?-ms-transform:?scale(2);?}
????????????100%?{?-ms-transform:?none;?}
????????}
????????@-o-keyframes?zoomOut?{
????????????0%?{?-o-transform:?scale(2);?}
????????????100%?{?-o-transform:?none;?}
????????}
????????@keyframes?zoomOut?{
????????????0%?{?transform:?scale(2);?}
????????????100%?{?transform:?none;?}
????????}
????????/*背景圖像旋轉出現動畫效果*/
????????/*?Rotate?*/

?@-webkit-keyframes?rotate?{
????????????0%?{?-webkit-transform:?rotate(-360deg)?scale(0.1);?}
????????????100%?{?-webkit-transform:?none;?}
????????}
????????@-moz-keyframes?rotate?{
????????????0%?{?-moz-transform:?rotate(-360deg)?scale(0.1);?}
????????????100%?{?-moz-transform:?none;?}
????????}
????????@-ms-keyframes?rotate?{
????????????0%?{?-ms-transform:?rotate(-360deg)?scale(0.1);?}
????????????100%?{?-ms-transform:?none;?}
????????}
????????@-o-keyframes?rotate?{
????????????0%?{?-o-transform:?rotate(-360deg)?scale(0.1);?}
????????????100%?{?-o-transform:?none;?}
????????}
????????@keyframes?rotate?{
????????????0%?{?transform:?rotate(-360deg)?scale(0.1);?}
????????????100%?{?transform:?none;?}
????????}
????????/*設置背景圖像不顯示動畫效果*/
?@-webkit-keyframes?notTarget?{
????????????0%?{?z-index:?75;?}
????????????100%?{?z-index:?75;?}
????????}
????????@-moz-keyframes?notTarget?{
????????????0%?{?z-index:?75;?}
????????????100%?{?z-index:?75;?}
????????}
????????@-ms-keyframes?notTarget?{
????????????0%?{?z-index:?75;?}
????????????100%?{?z-index:?75;?}
????????}
????????@-o-keyframes?notTarget?{
????????????0%?{?z-index:?75;?}
????????????100%?{?z-index:?75;?}
????????}
????????@keyframes?notTarget?{
????????????0%?{?z-index:?75;?}
????????????100%?{?z-index:?75;?}
????????}

????????.slider?{
????????????position:?absolute;
?width:?100%;
?text-align:?center;
?z-index:?9999;
?bottom:?100px;
?}
????????.slider?li?{
????????????display:?inline-block;
?width:?170px;
?height:?130px;
?margin-right:?15px;
?}
????????.slider?a?{
????????????display:?inline-block;
?width:?170px;
?padding-top:?70px;
?padding-bottom:?20px;
?position:?relative;
?cursor:?pointer;
?border:?2px?solid?#fff;
?border-radius:?5px;
?vertical-align:?top;
?color:?#fff;
?text-decoration:?none;
?font-size:?22px;
?font-family:?'Yesteryear',?cursive;
?text-shadow:?-1px?-1px?1px?rgba(0,?0,?0,?0.8),-2px?-2px?1px?rgba(0,?0,?0,?0.3),-3px?-3px?1px?rgba(0,?0,?0,?0.3);
?}

????????/*任務一、設置不同列表的背景色*/
?.slider?li:nth-of-type(1)?a{
????????????background-color:?#02646e;
?}
????????.slider?li:nth-of-type(2)?a{
????????????background-color:?#eb0837;
?}
????????.slider?li:nth-of-type(3)?a{
????????????background-color:?#67b374;
?}
????????.slider?li:nth-of-type(4)?a{
????????????background-color:?#e6674a;
?}
????????.slider?li:nth-of-type(5)?a{
????????????background-color:?#e61061;
?}

????????/*任務二、設置縮略圖形狀*/
?.slider?li?a:after{
????????????content:"";
?display:?block;
?height:?120px;
?width:?120px;
?border:?5px?solid?#fff;
?border-radius:?50%;
?position:?absolute;
?left:?50%;
?margin-left:?-60px;
?z-index:?9999;
?top:?-80px;
?}

????????/*任務三、設置縮略圖背景圖像*/
?.slider?li:nth-of-type(1)?a:after{
????????????background:?url(images/13163193_145819676170_2.jpg)?no-repeat?center;
?background-size:?120px?120px;
?}
????????.slider?li:nth-of-type(2)?a:after{
????????????background:?url(images/200812308231244_2.jpg)?no-repeat?center;
?background-size:?120px?120px;
?}
????????.slider?li:nth-of-type(3)?a:after{
????????????background:?url(images/2013062320262198.jpg)?no-repeat?center;
?background-size:?120px?120px;
?}
????????.slider?li:nth-of-type(4)?a:after{
????????????background:?url(images/2014021221061938.jpg)?no-repeat?center;
?background-size:?120px?120px;
?}
????????.slider?li:nth-of-type(5)?a:after{
????????????background:?url(images/f03220aa5cc066bea0d4d2d355365f18.jpg)?no-repeat?center;
?background-size:?120px?120px;
?}

????????/*任務四、給縮略圖添加蒙板效果*/
?.slider?li?a:before{
????????????content:"";
?display:?block;
?height:?120px;
?width:?120px;
?border:?5px?solid?#fff;
?border-radius:?50%;
?position:?absolute;
?left:?50%;
?margin-left:?-60px;
?z-index:?99999;
?top:?-80px;
?background:?rgba(0,0,0,0.3);
?}
????????/*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/
?.slider?li?a:hover:before{
????????????opacity:0;
?}
????????/*任務六、點擊綜略圖，切換背景圖*/
????????/*背景圖從左向右出現*/
?#bg1:target{
????????????z-index:?100;

?-webkit-animation-name:?slideLeft;
?-webkit-animation-duration:?2s;
?-webkit-animation-iteration-count:?1;
?-webkit-animation-timing-function:ease-in-out;

?-moz-animation-name:?slideLeft;
?-moz-animation-duration:?2s;
?-moz-animation-iteration-count:?1;

?-ms-animation-name:?slideLeft;
?-ms-animation-duration:?2s;
?-ms-animation-iteration-count:?1;

?-o-animation-name:?slideLeft;
?-o-animation-duration:?2s;
?-o-animation-iteration-count:?1;

?animation-name:?slideLeft;
?animation-duration:?2s;
?animation-iteration-count:?1;
?animation-timing-function:ease-in-out;
?}
????????/*背景圖從下向上出現*/
?#bg2:target{
????????????z-index:?100;

?-webkit-animation-name:?slideBottom;
?-webkit-animation-duration:?1s;
?-webkit-animation-iteration-count:?1;

?-moz-animation-name:?slideBottom;
?-moz-animation-duration:?1s;
?-moz-animation-iteration-count:?1;

?-ms-animation-name:?slideBottom;
?-ms-animation-duration:?1s;
?-ms-animation-iteration-count:?1;

?-o-animation-name:?slideBottom;
?-o-animation-duration:?1s;
?-o-animation-iteration-count:?1;

?animation-name:?slideBottom;
?animation-duration:?1s;
?animation-iteration-count:?1;
?}

????????/*背景圖由小到大出現*/
?#bg3:target{
????????????z-index:?100;
?-webkit-animation-name:?zoomIn;
?-webkit-animation-duration:?1s;
?-webkit-animation-iteration-count:?1;
?-moz-animation-name:?zoomIn;
?-moz-animation-duration:?1s;
?-moz-animation-iteration-count:?1;
?-ms-animation-name:?zoomIn;
?-ms-animation-duration:?1s;
?-ms-animation-iteration-count:?1;
?-o-animation-name:?zoomIn;
?-o-animation-duration:?1s;
?-o-animation-iteration-count:?1;
?animation-name:?zoomIn;
?animation-duration:?1s;
?animation-iteration-count:?1;
?}

????????/*背景圖由大到小出現*/
?#bg4:target{
????????????z-index:?100;
?-webkit-animation-name:?zoomOut;
?-webkit-animation-duration:?1s;
?-webkit-animation-iteration-count:?1;
?-moz-animation-name:?zoomOut;
?-moz-animation-duration:?1s;
?-moz-animation-iteration-count:?1;
?-ms-animation-name:?zoomOut;
?-ms-animation-duration:?1s;
?-ms-animation-iteration-count:?1;
?-o-animation-name:?zoomOut;
?-o-animation-duration:?1s;
?-o-animation-iteration-count:?1;
?animation-name:?zoomOut;
?animation-duration:?1s;
?animation-iteration-count:?1;
?}

????????/*背景圖旋轉出現*/
?#bg5:target{
????????????z-index:?100;
?-webkit-animation-name:?rotate;
?-webkit-animation-duration:?1s;
?-webkit-animation-iteration-count:?1;

?-moz-animation-name:?rotate;
?-moz-animation-duration:?1s;
?-moz-animation-iteration-count:?1;

?-ms-animation-name:?rotate;
?-ms-animation-duration:?1s;
?-ms-animation-iteration-count:?1;

?-o-animation-name:?rotate;
?-o-animation-duration:?1s;
?-o-animation-iteration-count:?1;

?animation-name:?rotate;
?animation-duration:?1s;
?animation-iteration-count:?1;
?}
????????/*任務七、設置不顯示的背景圖層級*/
????????/*?Not?Target?*/

?img:not(:target){
????????????-webkit-animation-name:?notTarget;
?-webkit-animation-duration:?1s;
?-webkit-animation-iteration-count:?1;

?-moz-animation-name:?notTarget;
?-moz-animation-duration:?1s;
?-moz-animation-iteration-count:?1;

?-ms-animation-name:?notTarget;
?-ms-animation-duration:?1s;
?-ms-animation-iteration-count:?1;

?-o-animation-name:?notTarget;
?-o-animation-duration:?1s;
?-o-animation-iteration-count:?1;

?animation-name:?notTarget;
?animation-duration:?1s;
?animation-iteration-count:?1;
?}

????</style>
</head>
<body>
<div?class="slider">
????<ul?class="clearfix">
????????<li><a?href="#bg1">Hipster?Fashion?Haircut?</a></li>
????????<li><a?href="#bg2">Cloud?Computing?Services?&amp;?Consulting</a></li>
????????<li><a?href="#bg3">My?haire?is?sooo?fantastic!</a></li>
????????<li><a?href="#bg4">Eat?healthy?&amp;?excersice!</a></li>
????????<li><a?href="#bg5">Lips?so?kissable?I?could?die?...</a></li>
????</ul>
</div>
<img?src="images/13163193_145819676170_2.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/>
<img?src="images/200812308231244_2.jpg"?alt=""?class="bg?slideBottom"?id="bg2"?/>
<img?src="images/2013062320262198.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/>
<img?src="images/2014021221061938.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/>
<img?src="images/f03220aa5cc066bea0d4d2d355365f18.jpg"??alt=""?class="bg?rotate"?id="bg5"?/>
</body>
</html>


0 回復 有任何疑惑可以回復我~

應該給動畫在100%的時候設置他的right和bottom，使得動畫向左移動最后的位置是右邊距和第邊距為零，設置動畫結束時的位置比較好理解

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
十天精通CSS3
  • 參與學習       243057    人
  • 解答問題       2677    個

本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

動畫出現一半的問題

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號