1. 视频教程（Youtube）
2. 教程代码
--文字Hover效果代码/CSS
selector{
--text-position: -500px;
--heading-position: -50px;
--button-position: 70px;
}
selector, selector .single-card p, selector .single-card a, selector .single-card h2{
transition: .5s all ease-in-out;
}
selector .single-card p, selector .single-card a{
position: relative;
bottom: var(--text-position);
}
selector .single-card a{
transition: 0.5s all linear;
position: relative;
top: 500px;
}
selector .single-card:hover p, selector .single-card:hover a{
bottom: 0px;
}
selector .single-card:hover a{
top: var(--button-position);
}
selector .single-card h2{
position: relative;
bottom: var(--heading-position);
}
selector .single-card:hover h2{
bottom: 0px;
}
--背景Hover效果代码/JS代码
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
//Image One
var ImgOne = "url(https://theglass.net/wp-content/uploads/2023/05/R-scaled.jpg)";
//Image Two
var ImgTwo = "url(https://theglass.net/wp-content/uploads/2023/05/P-1580126-B1D91B3BO.jpg)";
$(document).ready(function(){
$('#card-one').hover(function(){
$('#main-parent').css("background-image", ImgOne)
}, function(){
$('#main-parent').css("background-image", "")
});
$('#card-two').hover(function(){
$('#main-parent').css("background-image", ImgTwo)
}, function(){
$('#main-parent').css("background-image", "")
})
})
</script>
4. YouTube教程视频观看科学上网工具
5.设计模板免费获取
- 填写下方表单订阅邮件（注，需要在订阅人收件箱确认订阅方可成功订阅），邮件订阅成功后将自动，免费将本教程设计模板发送到你的邮箱，！！！！可直接导入elementor使用！！！
- 获取模板后如何将模板安装到自己网站呢？ 请参照一下视频教程操作：
