您的位置：首页技术文章
文章详情页

css - @keyframes 能接受参数吗？

浏览：115日期：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
上一条：css - 遮罩层遮不住视频是什么原因下一条：css3 animation动画参数问题
相关文章：
1. angular.js使用$resource服务把数据存入mongodb的问题。2. Docker for Mac 创建的dnsmasq容器连不上/不工作的问题3. html - 对浏览器缩放然后大图也缩放的问题。4. nignx - docker内nginx 80端口被占用5. docker start -a dockername 老是卡住，什么情况？6. macos - mac下docker如何设置代理7. docker gitlab 如何git clone？8. docker镜像push报错9. mySql排序，序号10. python - uwsgi+django的搭建问题
排行榜
html - 对浏览器缩放然后大图也缩放的问题。
html - 对浏览器缩放然后大图也缩放的问题。
1. Docker for Mac 创建的dnsmasq容器连不上/不工作的问题
2. nignx - docker内nginx 80端口被占用
3. docker gitlab 如何git clone？
4. docker镜像push报错
5. angular.js使用$resource服务把数据存入mongodb的问题。
6. docker start -a dockername 老是卡住，什么情况？
7. macos - mac下docker如何设置代理
8. javascript - webpack打包后的bundlejs文件代码不知道什么意思.
9. docker - 如何修改运行中容器的配置
10. docker容器呢SSH为什么连不通呢？
热门标签