<!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);
【HTML+JavaScript+CSS】动画,特效
最新推荐文章于 2021-06-10 16:58:23 发布
本文探讨如何利用HTML、JavaScript和CSS技术创建动态的轮播图效果。通过数组管理和样式变换,实现图片的平滑过渡和交互功能。
摘要由CSDN通过智能技术生成