如何将CSS效果转换为Javascript / jQuery
[英]How to convert CSS effect to Javascript / jQuery
问题描述
我想将CSS效果转换为javascript代码。
页面加载后，我想自动离开一个区域。 也就是说，一旦板上加载了相同效果的大约一格。 您可以转到“悬停我”查看CSS效果。
如果您不能使用该库，我想看看代码中发生了什么
我现在可以帮助您添加我的JavaScript / jQuery代码吗？
谢谢
html{ background: #080808; } div { background: none; border: 0; box-sizing: border-box; margin: 1em; padding: 1em 2em; color: #fff; font-size: inherit; font-weight: 700; position: relative; vertical-align: middle; } div::before, div::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%; } .draw { transition: color 0.25s; } .draw::before, .draw::after { border: 2px solid transparent; width: 0; height: 0; } .draw::before { top: 0; left: 0; } .draw::after { bottom: 0; right: 0; } .draw:hover { color: #60daaa; } .draw:hover::before, .draw:hover::after { width: 100%; height: 100%; } .draw:hover::before { border-top-color: #60daaa; border-right-color: #60daaa; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .draw:hover::after { border-bottom-color: #60daaa; border-left-color: #60daaa; } .meet:hover { color: #fbca67; } .meet::after { top: 0; left: 0; } .meet:hover::before { border-top-color: #fbca67; border-right-color: #fbca67; } .meet:hover::after { border-bottom-color: #fbca67; border-left-color: #fbca67; transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/uikit-rtl.min.css"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="js/jquery.js"></script> </head> <body id="top"> <div onload="loading()" id="iki" class="draw meet">Hover Me</div> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2018-07-24 06:42:12
这是一个解决方案，
1）将所有:hover更改为.hover
2）然后使用JavaScript添加此类
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.draw')[0].classList.add('hover');
});
找到了类似的答案如何执行CSS3动画onLoad而不是将鼠标悬停？
如何在CSS中转换jQuery淡入淡出效果？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.