个人名片:
😊作者简介:一名大一在校生,web前端开发专业
🤡 个人主页:python学不会123
🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡
每周完成3个 projects练习
文章目录
✨one-day projects
这次的项目用到我们所学的html+css3+js,适合有基础的小伙伴们,大家可以跟着我一起做项目练习,巩固基础,一起学习进步😊😀
显示效果如图所示
1.step1需要创建如下
注意:不要忘记引入
<link rel="stylesheet" href="./one-day.css">
不然会没有css的效果
<script type="text/javascript" src="./one-day.js"></script>
引入js不要放在head标签中,放在body后,代码遵循从上往下执行顺序,不然js效果就不会出现
html代码如下:
<div class="container">
<div class="panel active" style="background-image:url(./image/01.jpg);">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image:url(./image/02.webp) ;">
<h3>Wild Forest</h3>
</div>
<div class="panel" style="background-image:url(./image/03.webp) ;">
<h3>Sunny Beach</h3>
</div>
<div class="panel" style="background-image:url(./image/04.webp) ;">
<h3>City on Winter</h3>
</div>
<div class="panel" style="background-image:url(./image/05.webp) ;">
<h3>Mountains - Clouds</h3>
</div>
</div>
css代码如下:
/* 设置页面最大宽度 */
@media (max-width:480px) {
.container {
width: 100vw;
}
}
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display: flex;
/* 主轴居中对齐 */
justify-content: center;
align-items: center;
height: 100vh;
/* 溢出隐藏 */
overflow: hidden;
margin: 0;
}
.container {
display: flex;
width: 1000px;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
/* 属性渐变 */
-webkit-transition:all 700ms ease-in ;
}
.panel h3{
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active{
flex:5;
}
/* 设置元素的透明度 */
.panel.active h3{
opacity: 1;
/*设置元素的过渡属性*/
transition: opacity 0.3s ease-in 0.4s;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5)
{
/* 隐藏该元素 */
display: none;
}
✨ js代码显示如下
const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
//addEventListener() 方法用于向指定元素添加事件句柄
panel.addEventListener('click', () => {
removeActiveClasses()
console.log(123)
//添加类
panel.classList.add('active')
})
})
function removeActiveClasses() {
panels.forEach(panel => {
//移除类
panel.classList.remove('active')
})
}
图片大家可以随意找其他的,效果是一样的
有哪些不明白的可以在评论区进行讨论,或是有不对的地方欢迎大家指出来,互相学习进步
希望大家可以多多支持,一键三连并分享😊😄