文章詳情頁
css - @keyframes 能接受參數嗎？
瀏覽：256日期：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. PHP搜索功能的實現 哪里錯了2. 新建index文件夾，然后把controller 以及文件index.php放入index文件夾。修改htaccess文件為擴展訪問。但是訪問的時候提示頁面錯誤！請稍后再試。PHP版本正常，請老師解答3. mysql - 千萬級數據表如何有效的變更字段？4. angular.js使用$resource服務把數據存入mongodb的問題。5. 下載32位vc9和11、14運行庫時解壓錯誤6. 請問一下，圖片上傳成功，但是后臺對應文件夾里面卻沒有圖片，這是什么原因？（已部署到服務器）7. php - SQL 一條語句查詢出文章和對應的文章標簽8. mysql優化 - mysql like語句會導致全表掃描？9. 電腦上裝了wamp后，再裝了mysql，wamp上的mysql就不能用了10. java - mysql緩存問題
排行榜
網公網安備