文章詳情頁
css - @keyframes 能接受參數嗎？
瀏覽：150日期：2023-06-16 17:12:16
問題描述
@keyframes around { from { margin-left: 100%; } to { margin-left: -5em; } }
那個-5em應該是參數傳進去的？可以解決嗎？
問題解答
回答1：設置自定義CSS屬性結合var函數實現，自定義屬性以--符號開頭例子
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>@keyframes around { from {margin-left: 100%; } to {margin-left: var(--margin-left); }}.main{ position: absolute; left:0p; top:0px; width: 200px; height: 200px; background-color: #7C2845; color:#ffffff; --margin-left:-5em;}.main.active{ animation-name: around; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite;} </style></head><body> <p class='main active'>TEST </p></body></html>
標簽：
CSS
相關文章：
1. Java反射問題：為什么android.os.Message的recycleUnchecked方法不能通過反射獲取到？2. javascript - 在 vue里面用import引入js文件，結果為undefined3. php如何獲取訪問者路由器的mac地址4. 前端 - node vue webpack項目文件結構5. git - 使用淘寶npm安裝hexo出現問題？6. javascript - vue-resource中如何設置全局的timeout？7. 小程序怎么加外鏈，語句怎么寫！求救新手，開文檔沒發現8. html5和Flash對抗是什么情況？9. thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙10. 多選框寫進數據庫怎么寫
排行榜
網公網安備