如何将CSS效果转换为Javascript / jQuery
[英]How to convert CSS effect to Javascript / jQuery
问题描述
I want to convert a CSS effect to a javascript code. 
我想将CSS效果转换为javascript代码。
I want to automatically leave a section when the page is loaded. 页面加载后，我想自动离开一个区域。 That is, once the board is loaded with the same effect round one div. 也就是说，一旦板上加载了相同效果的大约一格。 You can go to Hover Me to see the CSS effect. 您可以转到“悬停我”查看CSS效果。
If you can not use the library, I want to see what happens in the code 如果您不能使用该库，我想看看代码中发生了什么
Can I help you add my JavaScript / jQuery code now? 我现在可以帮助您添加我的JavaScript / jQuery代码吗？
Thanks 谢谢
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
Here is one solution for this, 这是一个解决方案，
1) Change all your :hover to .hover 1）将所有:hover更改为.hover
2) Then add this class using JavaScript 2）然后使用JavaScript添加此类
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.draw')[0].classList.add('hover');
});
Found a similar answer How to execute CSS3 animation onLoad instead of hover? 找到了类似的答案如何执行CSS3动画onLoad而不是将鼠标悬停？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.