HTML5动态效果
简介
计算机相关专业的实训，主要是前端方向，并且具备一定HTML+CSS+JS的基础，如果不具备基础或者基础比较薄弱，就需要补充关于html+CSS+JS的内容，补充内容在做效果的过程中延伸。
效果一：滑块轮播
应用场景：在官网和一些后端管理系统当中经常使用。
效果图
效果描述
-
鼠标移动在右边的箭头并且点击，会将下一个模块显示在主页面当中
-
鼠标移动在左边的箭头并且点击，会将上一个模块显示在主页面当中
-
鼠标移动在每一个模块上面，当前模块上方会呈现红色亮点，底部文字有一个灰度背景，鼠标未移动在模块上方会呈现蓝色亮点，底部文字没有灰度背景
实现步骤
- 构建界面
<div class="product-section product-features">
<div class="product-title">新特性</div>
<div class="product-wrapper">
<div class="product-body swiper-container">
<ul class="features-slide swiper-wrapper">
<li class="features-item swiper-slide">
<h3>2017-01-30</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s"> 支持通过VPC与弹性云服务器进行混合组网 </p>
</a> </li>
<li class="features-item swiper-slide">
<h3>2017-03-30</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s"> 支持云硬盘在线挂载、卸载，弹性扩容 </p>
</a> </li>
<li class="features-item swiper-slide">
<h3>2017-07-30</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s"> 支持裸金属服务器自动化发放 </p>
</a> </li>
<li class="features-item swiper-slide">
<h3>2017-11-30</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s"> 支持私有镜像，支撑企业业务部署 </p>
</a> </li>
<li class="features-item swiper-slide">
<h3>2018-08-30</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s">支持VMware和XenServer等第三方虚拟化</p>
</a> </li>
<li class="features-item swiper-slide dark">
<h3>即将上线</h3>
<i></i> <a class="features-info">
<p class="features-info-i"></p>
<p class="features-info-s"> 本地硬盘自定义RAID等功能 </p>
</a> </li>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next swiper-button-disabled"></div>
</div>
</div>
- 效果图
- 引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />
- 效果图（其他内容会隐藏，当前模块会显示，并且出现箭头符号）
- 加入自己的css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
- style.css文件内容
@charset "utf-8";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "微软雅黑";
font-size: 14px;
font-weight: normal;
font-style: normal
}
*:focus {
outline: none
}
body{background-color: #222}
a {
text-decoration: none
}
ul {
list-style: none
}
.product-section {
padding-bottom: 50px;
position: relative;
background: url(../images/productBase-features-bag.jpg) no-repeat;
background-size: cover
}
.product-title {
padding: 50px 10px 30px;
font-weight: normal;
font-size: 36px;
line-height: 46px;
color: #252b3a;
text-align: center;
color: #ffffff
}
.product-wrapper {
max-width: 1200px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
position: relative
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1
}
.product-features .product-body {
margin: 0px 25px
}
.product-features .product-body:after {
content: "";
width: 100%;
height: 3px;
background: url(../images/productBase-features-model.png) no-repeat;
background-size: 100% auto;
background-position: center;
position: absolute;
top: 50px;
left: 0;
z-index: 0
}
/*li*/
.features-item {
position: relative;
float: left
}
.features-slide .features-item>* {
text-align: center
}
.features-item h3 {
font-size: 16px;
line-height: 28px;
margin-bottom: 50px;
color: #ffffff;
opacity: 0.7;
transition: all 0.1s
}
.features-item i {
position: absolute;
width: 75%;
height: 33px;
background: url(../images/productBase-features-timeline.png) no-repeat;
background-size: contain;
background-position: right center;
left: -25%;
margin-left: 10px;
top: 35px;
z-index: 3
}
.features-item .features-info {
display: block;
margin: 0 auto;
padding: 20px 53px;
transition: all 0.3s;
border-radius: 2px
}
.features-item .features-info .features-info-i {
font-size: 14px;
color: #A0A2A8;
line-height: 22px;
margin-bottom: 10px
}
.features-item .features-info .features-info-s {
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
overflow: hidden
}
.features-item.dark i {
background: url(../images/productBase-features-timeline-dark.png) no-repeat;
background-size: contain;
background-position: right center
}
/*鼠标悬浮效果*/
.features-item:hover h3 {
font-size: 22px;
line-height: 28px;
opacity: 0.9
}
.features-item:hover i {
width: 75%;
margin-left: 13px;
background: url(../images/productBase-features-timeline-hover.png) no-repeat;
background-size: contain;
background-position: right center
}
.features-item:hover a {
background: url(../images/productBase-features-info.png) no-repeat;
background-size: 100% 100%
}
/*左右按钮*/
.product-features .swiper-button-prev {
width: 30px;
height: 40%;
left: -15px;
top: 60%;
background: none
}
.product-features .swiper-button-prev:after {
content: "";
display: inline-block;
position: absolute;
width: 15px;
height: 30px;
background: url(../images/productBase-features-left.png) no-repeat;
background-size: 100% 100%;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -7px
}
.product-features .swiper-button-next {
width: 30px;
height: 40%;
right: -15px;
top: 60%;
background: none
}
.product-features .swiper-button-next:after {
content: "";
display: inline-block;
position: absolute;
width: 15px;
height: 30px;
background: url(../images/productBase-features-right.png) no-repeat;
background-size: 100% 100%;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -7px
}
- 效果图
- 引入js文件
<script src="statics/js/jquery.min.js"></script>
<script src="statics/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
- 引用文件书写js代码
$(function() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: 3, //默认是显示4个
initialSlide: 999, //默认从第几个显示，999是为了让右边没有
spaceBetween: 100, //间距
speed: 500,//速度
prevButton: ".swiper-button-prev", //左右按钮
nextButton: ".swiper-button-next"
})
})
- 效果图
效果二：图片轮播
效果图
效果描述
- 全屏显示图片，并且图片的大小能够将所有的内容全部
- 左右存在箭头，鼠标点击箭头会将图片想屏幕内部进行凹陷，然后向左或者向右的方向滑动进行切换图片
实现步骤
- 构建页面
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-130%">
<h3>Adidas NMD</h3>
</div>
<div class="img-box"><img src="images/img1.jpg" style="transform:translateX(0);"></div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-130%">
<h3>Marconatto</h3>
</div>
<div class="img-box"><img src="images/img2.jpg"></div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-130%">
<h3>CHANEL</h3>
</div>
<div class="img-box"><img src="images/img3.jpg"></div>
</div>
</div>
<div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
<g id="arrow-svg-home">
<g id="circ" class="cls-1">
<circle cx="42" cy="42" r="40" class="cls-4"></circle>
</g>
<g id="arrow">
<path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
</g>
<path id="line" d="M120,0H0" class="cls-3" ></path>
</g>
</svg></div>
<!--左箭头-->
<div class="button-next button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
<g id="arrow-svg-home">
<g id="circ" class="cls-1">
<circle cx="42" cy="42" r="40" class="cls-4"></circle>
</g>
<g id="arrow">
<path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z" class="cls-2"></path>
</g>
<path id="line" d="M120,0H0" class="cls-3" ></path>
</g>
</svg></div>
<!--右箭头-->
</div>
- 效果图
- 引入css文件
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<link rel="stylesheet" href="css/index.css">
- 效果图
- 引入js文件
<script src="js/swiper.min.js"></script>
<script src="js/animate.js"></script>
- 效果图（能够点击右边和左边的箭头切换图片）
效果三：翻转效果CSS3D
效果图
效果描述
- 鼠标移动在上面，会出现翻转效果，文字呈现，图片消失
实现步骤
- 构建页面
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-img">
<img src="images/1.png" alt="">
</div>
<div class="box-content">
<h4 class="title">Duende</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
<ul class="social-links">
<li><a href="#" class="fa fa-qq"></a></li>
<li><a href="#" class="fa fa-weibo"></a></li>
<li><a href="#" class="fa fa-weixin"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-img">
<img src="images/2.png" alt="">
</div>
<div class="box-content">
<h4 class="title">Schadenfreude</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
<ul class="social-links">
<li><a href="#" class="fa fa-qq"></a></li>
<li><a href="#" class="fa fa-weibo"></a></li>
<li><a href="#" class="fa fa-weixin"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-img">
<img src="images/3.png" alt="">
</div>
<div class="box-content">
<h4 class="title">Cafune</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
<ul class="social-links">
<li><a href="#" class="fa fa-qq"></a></li>
<li><a href="#" class="fa fa-weibo"></a></li>
<li><a href="#" class="fa fa-weixin"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
- 效果图
- 引入bootstrap-grid.min.css文件
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
- 效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OGNyrt0y-1670722009313)(动态效果.assets/image-20221206173401025.png)]
- 引入css文件
<link rel="stylesheet" type="text/css" href="css/style.css">
- 效果图
效果四：九宫格翻转
效果图
效果描述
- 鼠标移动在上面的模块时，能够进行3D翻转
实现步骤
- 构建页面
<div class="wrapper">
<ul>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic1.png'></image>
</div>
<div class='hide'>
<h3>
Picture1
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic2.png'></image>
</div>
<div class='hide'>
<h3>
Picture2
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic3.png'></image>
</div>
<div class='hide'>
<h3>
Picture3
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic4.png'></image>
</div>
<div class='hide'>
<h3>
Picture4
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic2-1.png'></image>
</div>
<div class='hide'>
<h3>
Picture5
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic2-2.png'></image>
</div>
<div class='hide'>
<h3>
Picture6
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic2-3.png'></image>
</div>
<div class='hide'>
<h3>
Picture7
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic2-4.png'></image>
</div>
<div class='hide'>
<h3>
Picture8
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic3-1.png'></image>
</div>
<div class='hide'>
<h3>
Picture9
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic3-2.png'></image>
</div>
<div class='hide'>
<h3>
Picture10
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic3-3.png'></image>
</div>
<div class='hide'>
<h3>
Picture11
</h3>
</div>
</div>
</li>
<li>
<div class='picBox'>
<div class='show'>
<image height='180px' width='180px' src='./img/pic3-4.png'></image>
</div>
<div class='hide'>
<h3>
Picture12
</h3>
</div>
</div>
</li>
</ul>
</div>
- 效果图
- 引入css文件
<link rel="stylesheet" href="demo.css">
- 效果图
- 引入js文件
<script src="jquery.min.js"></script>
<script src="demo.js"></script>
- 效果图
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
