【HTML+JavaScript+CSS】动画，特效

最新推荐文章于 2021-06-10 16:58:23 发布

idealistic

最新推荐文章于 2021-06-10 16:58:23 发布

阅读量766

点赞数

分类专栏： HTML小程序

本文链接：https://blog.csdn.net/idealistic/article/details/78386182

版权

本文探讨如何利用HTML、JavaScript和CSS技术创建动态的轮播图效果。通过数组管理和样式变换，实现图片的平滑过渡和交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5+CSS3实现的响应式垂直时间轴</title>
<style>
.demo,.img,.mask,.border{
	width:300px;
	height:300px;
	border-radius:50%;
	}
.img{
	background-image:url(%E7%AC%94%E8%AE%B0/%E4%BC%81%E4%B8%9A%E7%BD%91%E7%AB%99/images/000138.jpg);
	background-size:cover;
	background-position:50% 50%;}
.demo{
	position:relative;
	display:block;
	}
.mask,.border{
	position:absolute;
	left:0;
	top:0;
	}
.mask{
	text-align:center;
	color:rgba(255,255,255,0);
	transition:all 1s ease-in;
	}
.info{
	margin-top:50%;
	transform:translateY(-50%);
	}
.border{
	border:10px solid #CCC;
	border-left-color:#60F;
	border-top-color:#60F;
	box-sizing:border-box;
	transition:all 0.8s ease-in;
	}
.demo:hover .mask{
	background-color:rgba(0,0,0,.5);
	color:rgba(255,255,255,1);

最低0.47元/天解锁文章

idealistic

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML+JavaScript+CSS】动画，特效

HTML5+CSS3实现的响应式垂直时间轴.demo,.img,.mask,.border{ width:300px; height:300px; border-radius:50%; }.img{ background-image:url(%E7%AC%94%E8%AE%B0/%E4%BC%81%E4%B8%9A%E7%BD%91%E7%AB%99/images/000138.j
复制链接

扫一扫

专栏目录