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

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

字體樣式顯示問題

.st-desc{
????width:?200px;
????height:?200px;
????background:?#FA96B5;
????position:?absolute;
????left:?50%;
????top:?0;
????margin-left:?-100px;
????transform:translateY(-50%)?rotate(45deg);
????-ms-transform:translateY(-50%)?rotate(45deg);
????-o-transform:translateY(-50%)?rotate(45deg);
????-moz-transform:translateY(-50%)?rotate(45deg);
????-webkit-transform:translateY(-50%)?rotate(45deg);
}

[data-icon]:after{
????content:?attr(data-icon);
????width:?200px;
????height:?200px;
????line-height:?200px;
????color:?#FFFFFF;
????font-size:?90px;
????text-align:?center;
????position:?absolute;
????left:?50%;
????top:?50%;
????margin:-100px?0?0?-100px;
????transform:translateY(25%)?rotate(-45deg);
????-ms-transform:translateY(25%)?rotate(-45deg);
????-o-transform:translateY(25%)?rotate(-45deg);
????-moz-transform:translateY(25%)?rotate(-45deg);
????-webkit-transform:translateY(25%)?rotate(-45deg);
}


http://img1.sycdn.imooc.com//552fc5c6000159f713660631.jpg

代碼完全一樣,但是文字偏左,能否把字體文件發布出來

正在回答

1 回答

代碼不一樣

你最后[data-icon]:after 的樣式??transform:translateY(25%)?rotate(-45deg); ?是先移Y軸再旋轉

原版代碼是rotate(-45deg)?transform:translateY(25%); 先旋轉再移動Y軸

由于順序不同,所以顯示效果不一樣

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

舉報

0/150
提交
取消
css3實現網頁平滑過渡效果
  • 參與學習       54370    人
  • 解答問題       391    個

CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗

進入課程

字體樣式顯示問題

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

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

幫助反饋 APP下載

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

公眾號

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