文章詳情頁

css3 transform transition相關(guān)問題

瀏覽：197日期：2023-07-27 16:07:10

問題描述

就這樣為什么頁面顯示出來直接放大了1.1倍 1秒的過濾怎么就沒有？

問題解答

回答1：

既然是過渡，就應(yīng)該有一個(gè)狀態(tài)的變化，題主這樣設(shè)置就是讓.a的初始狀態(tài)就為1.1倍。如果你給.a:hover設(shè)置樣式就可以看到效果了：

.a { -webkit-transition: 1s 0s all ease; -o-transition: 1s 0s all ease; -moz-transition: 1s 0s all ease; transition: 1s 0s all ease;}.a:hover { -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}

題主如果是想要一加載就開始動(dòng)畫的話，應(yīng)該使用animation來實(shí)現(xiàn)。

回答2：

我猜題主想要的可能是這種效果?不過這個(gè)應(yīng)該算動(dòng)畫不算過渡吧www

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' ''> <html xmlns=''> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312' /> <style> @keyframes myfirst{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-moz-keyframes myfirst /* Firefox */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-webkit-keyframes myfirst /* Safari 和 Chrome */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-o-keyframes myfirst /* Opera */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } .a{ width: 300px; height: 300px; background: red; -webkit-animation: myfirst 1s; -o-animation: myfirst 1s; -moz-animation: myfirst 1s; animation: myfirst 1s; } </style> </head> <body> <p class='a'></p></body> </html> 回答3：

W3C標(biāo)準(zhǔn)中對css3的transition這是樣描述的： “css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值?！彼圆⒉皇鞘裁磿r(shí)候都能看到動(dòng)畫效果的，在頁面剛加載解析css 渲染頁面的時(shí)候并沒有觸發(fā)過渡效果。如果想實(shí)現(xiàn)頁面剛加載就出發(fā) transition 的效果的話，可以考慮用一下調(diào)用一次 animation；或者用js 獲取頁面加載狀態(tài)；

僅供參考...

CSS

上一條：angular.js - AngularJS link函數(shù)里調(diào)用CSS transition transform 是瞬發(fā)的，下一條：css3 - CSS選擇器的問題

相關(guān)文章：

1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題2. dockerfile - 為什么docker容器啟動(dòng)不了？3. docker - 各位電腦上有多少個(gè)容器?。咳萜饕欢?，自己都搞混了，咋辦呢？4. 前端 - 這段代碼一直生效不了，查半天因?yàn)?top: 0px; 分號后一個(gè)隱藏的東西，也不是占位符...刪了就可以生效，這是什么情況。。5. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問題麻煩幫我看一下6. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？7. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？8. javascript - sublime快鍵鍵問題9. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””10.

排行榜



Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題

1. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問題麻煩幫我看一下

2. javascript - sublime快鍵鍵問題

3. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””

4. debian - docker依賴的aufs-tools源碼哪里可以找到??？

5. dockerfile - 為什么docker容器啟動(dòng)不了？

6. angular.js - angular內(nèi)容過長展開收起效果

7. docker - 各位電腦上有多少個(gè)容器?。咳萜饕欢啵约憾几慊炝?，咋辦呢？

8. 前端 - 這段代碼一直生效不了，查半天因?yàn)?top: 0px; 分號后一個(gè)隱藏的東西，也不是占位符...刪了就可以生效，這是什么情況。。

9. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？

10. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？

熱門標(biāo)簽

PHP

JavaScript

HTML

CSS

java

vue

數(shù)據(jù)庫

微信

百度

日本不卡不码高清免费观看,久久国产精品久久w女人spa,黄色aa久久,三上悠亚国产精品一区二区三区