css实现动态效果
个人头像悬停特效
效果图：
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.img {
width: 150px;
height: 150px;
margin: 100px auto;
background: lightcoral;
border-radius: 50%;
}
.img img {
width: 100%;
border-radius: 50%;
transform: scale(1);
transition: all 1s;
}
.img:hover img {
transform: scale(0.7);
box-shadow: 0 0 0 15px white;
}
</style>
</head>
<body>
<div class="img">
<img src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg" alt="" />
</div>
</body>
</html> 复制
文字遮罩动态效果
样式一：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.container{
width: 500px;
height: auto;
margin: 100px auto;
position: relative;
}
.container img{
width: 100%;
height: auto;
display: block;
transform: scale(1);
transition: transform 1.5s;
}
.container:hover img{
transform: scale(0);
}
.container .content{
width: 100%;
height: 100%;
background: gray;
padding: 20px;
position: absolute;
left: 0;
top: 0;
text-align: center;
color: white;
transform: scale(0) rotate(-180deg);
transition: transform 0.5s;
/* transition-delay: 0.5s; */
}
.container:hover .content{
transform: scale(1) rotate(0);
}
.content .title{
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.content .text{
font-style: italic;
}
.content .btn{
display: block;
padding: 0 auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="">
<div class="content">
<h2 class="title">小康博客</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum quibusdam illo nisi amet? </p>
<button class="btn">Read More</button>
</div>
</div>
</body>
</html> 复制
样式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
width: 500px;
height: auto;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.container img {
width: 100%;
height: auto;
display: block;
}
.container .content {
width: 100%;
height: 100%;
background: gray;
padding: 20px;
position: absolute;
left: 0px;
top: 0;
text-align: center;
color: white;
/* 遮罩的初始位置应该是原位置旋转90°之后 结束位置应该以右下角旋转*/
transform-origin: 100% 100%;
transform: rotate(90deg);
/* 过渡1s，也就是鼠标离开时的过渡 */
transition: transform 1s;
}
.container:hover .content {
/* 偏移位置应该是以左上角 */
transform-origin: top left;
transform: rotate(0deg);
transition: transform 1s;
}
.content .title {
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.content .text {
font-style: italic;
}
.content .btn {
display: block;
padding: 0 auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="" />
<div class="content">
<h2 class="title">小康博客</h2>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum
quibusdam illo nisi amet?
</p>
<button class="btn">Read More</button>
</div>
</div>
</body>
</html> 复制
列表目录悬停特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表目录动态效果</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #713DF2;
}
.container {
width: 300px;
height: 210px;
margin: 100px auto;
position: relative;
}
.container .menu {
margin: 0;
padding: 0;
list-style-type: none;
}
.container .menu li {
width: 100%;
height: 70px;
padding-left: 30px;
background-color: white;
line-height: 70px;
font-size: 18px;
border-top: 1px solid lightgray;
}
.menu li:first-child {
border: 0;
}
.checked {
width: 110%;
height: 70px;
position: absolute;
top: 0;
left: -5%;
background-color: #39A5F7;
box-shadow: 0 0.3rem 0.2rem rgba(0, 0, 0, 0.3);
transition: top 0.5s;
z-index: 1;
overflow: hidden;
}
.checked .menu {
width: 300px;
height: 70px;
position: absolute;
transition: top 0.8s;
left: 15px;
}
.checked .menu li {
background: transparent;
border-top: none;
color: white;
}
.hover{
width: 100%;
height: 70px;
position: absolute;
z-index: 2;
}
.hover1{
top: 0;
}
.hover1:hover~.checked{
top: 0;
}
.hover1:hover~.checked .menu{
top: 0;
}
.hover2{
top:70px;
}
.hover2:hover~.checked{
top: 70px;
}
.hover2:hover~.checked .menu{
top: -70px;
}
.hover3{
top: 140px;
}
.hover3:hover~.checked{
top: 140px;
}
.hover3:hover~.checked .menu{
top: -140px;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li>HTML5与CSS3基础语法</li>
<li>CSS3核心技术与新特性</li>
<li>JavaScript基础语法</li>
</ul>
<!-- 用来代表原本菜单中的三个选项（li元素） -->
<div class="hover hover1"></div>
<div class="hover hover2"></div>
<div class="hover hover3"></div>
<div class="checked">
<ul class="menu">
<li>HTML5与CSS3基础语法</li>
<li>CSS3核心技术与新特性</li>
<li>JavaScript基础语法</li>
</ul>
</div>
</div>
</body>
</html> 复制
卡片悬停效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 900px;
margin: 0 auto;
}
.container ul {
width: 900px;
margin: 0 auto;
list-style: none;
margin: 0;
padding: 0;
}
.container ul li {
float: left;
width: 200px;
height: 355px;
margin-left: 20px;
position: relative;
overflow: hidden;
}
.container ul li img {
width: 200px;
transition: all 1s;
}
.container ul .two img {
width: 200px;
transition: all 1s;
transform: scale(1.2);
}
.container ul .three img {
width: 200px;
transition: all 1s;
transform: scale(1.2);
}
.container ul li .mast {
width: 200px;
height: 300px;
background-color: rgba(0, 0, 0, 0);
text-align: center;
position: absolute;
top: 250px;
padding-top: 50px;
transform: scale(1);
transition: all 1s;
z-index: 100;
color: white;
}
.container ul li .mast p{
padding-bottom: 30px;
}
.container ul li .mast .title{
font-weight: bold;
}
.container ul li .mast .desc{
font-style: italic;
}
.container ul li .mast:hover {
top: 0;
background-color: rgba(0, 0, 0, .1);
}
.container ul li .mast:hover+img {
transform: scale(1.2);
}
.container ul .two .mast:hover+img {
margin-top: -10px;
}
.container ul .three .mast:hover+img {
transform: scale(1);
}
/* 按钮 */
.btn{
display: block;
width: 90px;
height: 50px;
margin: 0 auto;
line-height: 50px;
background-color: #2798eb;
border: 0;
border-radius: 10px;
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="mast">
<p class="title">这是个标题</p>
<p class="desc">好多好多好多鱼</p>
<button>这是个按钮</button>
</div>
<img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
</li>
<li class="two">
<div class="mast">
<p class="title">这是个标题</p>
<p class="desc">好多好多好多鱼</p>
<button>这是个按钮</button>
</div>
<img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
</li>
<li class="three">
<div class="mast">
<p class="title">这是个标题</p>
<p class="desc">好多好多好多鱼</p>
<button>这是个按钮</button>
</div>
<img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
</li>
<li>
<div class="mast">
<p class="title">这是个标题</p>
<p class="desc">好多好多好多鱼</p>
<a class="btn" href="https://www.change.tm">这是个按钮</a>
</div>
<img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
</li>
</ul>
</div>
</body>
</html> 复制
波浪效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS波浪动画</title>
<style>
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
z-index: 15;
opacity: 0.5;
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveTop {
background-size: 50% 100px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}</style>
</head>
<body>
<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
<div class="wave waveTop" style="background-image: url('https://ae01.alicdn.com/kf/H6e46b308e8744a98b3f01685f5d1bbe4o.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('https://ae01.alicdn.com/kf/H43dd1667ee2c49fa919897302c4e4b38O.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('https://ae01.alicdn.com/kf/H8eabe173b9b64272912d9aa021934071W.png')"></div>
</div>
</div>
</body>
</html> 复制
实现波浪背景动态无限次循环播放（连续性）
- 图片：左边的图像与右边的图像是完全重合（高度一致）
- HTML页面：使用background-image属性引入波浪图片
- 将背景图像显示成水平方向两个完全重复的效果
- 将引入图片的div元素的宽度设置为父级容器的200%
- 通过background-size属性设置为背景图像水平方向的值为50%
- 设置动画执行的关键帧时，将100%时的关键帧设置为50%.
- 将背景图像显示成水平方向两个完全重复的效果
CSS3渐变背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景渐变动画效果</title>
<style>
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
/* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59);
animation: backgroundBG 10s infinite linear;
background-size: 300%; */
}
@keyframes backgroundBG{
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
.container{
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59); */
/* background-image:linear-gradient(-45deg,#f64f59,#b21f1f,#1a2a6c); */
background-image:linear-gradient(-45deg,#0099F7,#F11712);
background-image:linear-gradient(-45deg,#FC354C,#0ABFBC);
animation: backgroundBG 10s infinite linear;
background-size: 300%;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html> 复制
星级评价效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星星评级动态效果</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
<style>
body {
background: #222;
}
.rating {
font-family: "Ionicons";
/* 水平+垂直方向居中显示 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
direction: rtl;
}
.rating input {
opacity: 0;
}
.rating input:checked~label::before {
opacity: 1;
}
.rating label {
position: relative;
margin-right: 6px;
font-size: 5em;
color: gold;
cursor: pointer;
}
.rating label::before {
position: absolute;
content: "\f384";
opacity: 0;
transition: 0.5s;
}
.rating label:hover~label::before {
transition: 0.5s;
}
.rating label:hover::before {
transform: scale(1.2);
}
.rating label:hover::before,
.rating label:hover~label::before {
opacity: 1 !important;
}
.rating:hover input:checked~label::before {
opacity: 0;
}
</style>
</head>
<body>
<div class="rating">
<input type="radio" name="rating" id="5" value="5" />
<label for="5"><i class="icon ion-md-star-outline"></i></label>
<input type="radio" name="rating" id="4" value="4" />
<label for="4"><i class="icon ion-md-star-outline"></i></label>
<input type="radio" name="rating" id="3" value="3" />
<label for="3"><i class="icon ion-md-star-outline"></i></label>
<input type="radio" name="rating" id="2" value="2" />
<label for="2"><i class="icon ion-md-star-outline"></i></label>
<input type="radio" name="rating" id="1" value="1" />
<label for="1"><i class="icon ion-md-star-outline"></i></label>
</div>
</body>
</html> 复制
代码二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
<title>Document</title>
<style>
body{
background: #222;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
direction: rtl;
}
.container input{
opacity: 0;
}
.container label{
color: gold;
font-size: 84px;
position: relative;
cursor: pointer;
}
.container label:before{
content: "\f384";
position: absolute;
top: 15%;
opacity: 0;
transition: .5s;
}
.container label:hover:before,
.container label:hover~label::before{
opacity: 1 !important;
}
.container label i::before{
transition: .5s;
}
.container label:hover i::before{
transform: scale(1.2);
}
.container input:focus~label::before{
opacity: 1 !important;
}
</style>
</head>
<body>
<div class="container">
<input type="radio" name="1" id="1" />
<label class="ion-md-star" for="1" >
<i class="icon ion-md-star-outline"></i>
</label>
<input type="radio" name="2" id="2" />
<label for="2" class="ion-md-star">
<i class="icon ion-md-star-outline"></i>
</label>
<input type="radio" name="3" id="3" />
<label for="3" class="ion-md-star">
<i class="icon ion-md-star-outline"></i>
</label>
<input type="radio" name="4" id="4" />
<label for="4" class="ion-md-star">
<i class="icon ion-md-star-outline"></i>
</label>
<input type="radio" name="5" id="5" />
<label for="5" class="ion-md-star">
<i class="icon ion-md-star-outline"></i>
</label>
</div>
</body>
</html> 复制
音频显示效果
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css3音频播放图标动画特效</title>
<style>
.playing {
background: rgba(255, 255, 255, 0.1);
width: 3rem;
height: 3rem;
border-radius: .3rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: .5rem;
box-sizing: border-box;
}
.playing__bar {
display: inline-block;
background: white;
width: .5rem;
height: 100%;
-webkit-animation: up-and-down 1.3s ease infinite alternate;
animation: up-and-down 1.3s ease infinite alternate;
}
.playing__bar1 {
height: 60%;
}
.playing__bar2 {
height: 30%;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.playing__bar3 {
height: 75%;
-webkit-animation-delay: -3.7s;
animation-delay: -3.7s;
}
@-webkit-keyframes up-and-down {
10% {
height: 30%;
}
30% {
height: 100%;
}
60% {
height: 50%;
}
80% {
height: 75%;
}
100% {
height: 20%;
}
}
@keyframes up-and-down {
10% {
height: 30%;
}
30% {
height: 100%;
}
60% {
height: 50%;
}
80% {
height: 75%;
}
100% {
height: 20%;
}
}
body {
background: #222;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
color: white;
}
</style>
</head>
<body>
<div class="playing">
<span class="playing__bar playing__bar1"></span>
<span class="playing__bar playing__bar2"></span>
<span class="playing__bar playing__bar3"></span>
</div>
</body>
</html> 复制
小米首页轮播图（自动轮播）
实现关键
设置动画关键帧包含：
- 淡入效果 0%~2%
- 停留效果 2%~20%
- 淡出效果 20%~22%
- 淡入时的层级要高于淡出时的层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米轮播图示例</title>
<style>
/*
设置动画关键帧包含：
1. 淡入效果 0%~2%
2. 停留效果 2%~20%
3. 淡出效果 20%~22%
淡入时的层级要高于淡出时的层级
*/
@keyframes fade {
0% {
opacity: 0;
z-index: 2;
}
2% {
opacity: 1;
z-index: 1;
}
20% {
opacity: 1;
z-index: 1;
}
22% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 1226px;
height: 460px;
background: lightcyan;
margin: 100px auto;
}
.container .imgList {
width: 100%;
position: relative;
}
.container .imgList img {
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
/* 执行时长最好是图片数量的倍数
每一张图片所占时长为10s
每一张图片的停留时间 - 9s
每一张图片的淡入时间 - 1s
*/
animation-duration: 50s;
animation-name: fade;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.container .imgList img:not(:first-child) {
opacity: 0;
}
.container .imgList img:nth-child(1) {
animation-delay: -1s;
}
.container .imgList img:nth-child(2) {
animation-delay: 9s;
}
.container .imgList img:nth-child(3) {
animation-delay: 19s;
}
.container .imgList img:nth-child(4) {
animation-delay: 29s;
}
.container .imgList img:nth-child(5) {
animation-delay: 39s;
}
</style>
</head>
<body>
<!-- 视觉容器 -->
<div class="container">
<!-- 图片列表 -->
<div class="imgList">
<img
src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
/>
</div>
<!-- 左右切换菜单 -->
<div class="menu"></div>
<!-- 轮播图的导航 -->
<div class="nav"></div>
</div>
</body>
</html> 复制
小米轮播图（左右按钮）
实现思路
-
需要五组input+label标签（且input标签的type为radio）
/* 第一个需带有checked，因为默认情况下选择的是第一个，也就是默认情况下第一个被选中 */ <input type="radio" name="slide" id="slide1" checked /> <input type="radio" name="slide" id="slide2" /> <input type="radio" name="slide" id="slide3" /> <input type="radio" name="slide" id="slide4" /> <input type="radio" name="slide" id="slide5" /> <label for="slide1" class="slide slide1"></label> <label for="slide2" class="slide slide2"></label> <label for="slide3" class="slide slide3"></label> <label for="slide4" class="slide slide4"></label> <label for="slide5" class="slide slide5"></label>
label
for
input
id
label
input
label
input
- 在CSS上，默认图片透明度均为0，层级（
z-index
- 利用伪类选择器（
:checked
）来判断哪张图片应该被显示
简单来说就是当第一个
input
checked
z-index
-
左右按钮的实现
首先应该明确的是第几张图片出现时左右按钮应该指向哪一张图片。例如当显示第一张图片时左按钮应去向第五章，右按钮应去向第二张。
其次就是这些按钮应该随着不同图片的出现而变换，类似于一个按钮绑定一个图片。
图片 左按钮 右按钮 第一张图片 第五张 第二张 第二章图片 第一张 第三张 第三章图片 第二张 第四张 第四章图片 第三张 第五张 第五章图片 第四张 第一张
- 最后只需要用input是否被checked就可以判断哪一个label标签应该显示。
在线显示地址：https://gethtml.cn/project/2020/03/17/index.html
由于演示图有点大，所以直接换成链接了。https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/17/20200317195705.gif
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米轮播图示例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 1226px;
height: 460px;
background: lightcyan;
margin: 100px auto;
position: relative;
}
.container .imgList {
width: 100%;
position: relative;
}
.container .imgList img {
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
z-index: 0;
opacity: 0;
}
.slide {
width: 41px;
height: 69px;
background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
background-repeat: no-repeat;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 99;
display: none;
cursor: pointer;
}
/*
使用focus伪类模拟点击事件的效果
1. html结构：必须有input 和 label 且input的id与label的for相匹配
2. css样式：input:focus
*/
#slide5:checked ~ .imgList img:nth-of-type(5),
#slide4:checked ~ .imgList img:nth-of-type(4),
#slide3:checked ~ .imgList img:nth-of-type(3),
#slide2:checked ~ .imgList img:nth-of-type(2),
#slide1:checked ~ .imgList img:nth-of-type(1) {
z-index: 1;
opacity: 1;
}
/*
第五张图片时
左按钮应该去4 右按钮去1
第四张图片时
左按钮应该去3 右按钮去5
第三张图片时
左按钮应该去2 右按钮去4
第二张图片时
左按钮应该去1 右按钮去3
第一张图片时
左按钮应该去5 右按钮去2
*/
#slide5:checked ~ label:nth-of-type(1),
#slide4:checked ~ label:nth-of-type(5),
#slide3:checked ~ label:nth-of-type(4),
#slide2:checked ~ label:nth-of-type(3),
#slide1:checked ~ label:nth-of-type(2) {
display: block;
right: 0;
background-position: -125px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked ~ label:nth-of-type(1):hover,
#slide4:checked ~ label:nth-of-type(5):hover,
#slide3:checked ~ label:nth-of-type(4):hover,
#slide2:checked ~ label:nth-of-type(3):hover,
#slide1:checked ~ label:nth-of-type(2):hover {
background-position: -41px;
}
#slide5:checked ~ label:nth-of-type(4),
#slide4:checked ~ label:nth-of-type(3),
#slide3:checked ~ label:nth-of-type(2),
#slide2:checked ~ label:nth-of-type(1),
#slide1:checked ~ label:nth-of-type(5) {
display: block;
left: 0;
background-position: -84px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked ~ label:nth-of-type(4):hover,
#slide4:checked ~ label:nth-of-type(3):hover,
#slide3:checked ~ label:nth-of-type(2):hover,
#slide2:checked ~ label:nth-of-type(1):hover,
#slide1:checked ~ label:nth-of-type(5):hover {
background-position: 0px;
}
input {
display: none;
}
</style>
</head>
<body>
<!-- 视觉容器 -->
<div class="container">
<!-- 左右切换菜单 -->
<input type="radio" name="slide" id="slide1" checked />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<input type="radio" name="slide" id="slide5" />
<label for="slide1" class="slide slide1"></label>
<label for="slide2" class="slide slide2"></label>
<label for="slide3" class="slide slide3"></label>
<label for="slide4" class="slide slide4"></label>
<label for="slide5" class="slide slide5"></label>
<!-- 图片列表 -->
<div class="imgList">
<img
src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
/>
</div>
<!-- 轮播图的导航 -->
<div class="nav"></div>
</div>
</body>
</html> 复制
轮播图的导航栏
导航栏基于上一个可以左右滑动的轮播图实现。实现方法很简单。
- 由于已经实现了可以切换图片的
label
标签，因此复制一个一模一样的即可。
<div class="nav"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> </div>
- 接下来需要做的就是继续将每一张图片与刚加入的
label
标签绑定
#slide1:checked~.nav label:nth-child(1), #slide2:checked~.nav label:nth-child(2), #slide3:checked~.nav label:nth-child(3), #slide4:checked~.nav label:nth-child(4), #slide5:checked~.nav label:nth-child(5) { border-color: rgba(0, 0, 0, .4); background: hsla(0, 0%, 100%, 1); }
- 这样基本上就可以了，至于显示位置及样式根据自己调整即可。
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米轮播图示例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 1226px;
height: 460px;
background: lightcyan;
margin: 100px auto;
position: relative;
}
.container .imgList {
width: 100%;
position: relative;
}
.container .imgList img {
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
z-index: 0;
opacity: 0;
}
.slide {
width: 41px;
height: 69px;
background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
background-repeat: no-repeat;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 99;
display: none;
cursor: pointer;
}
/*
使用focus伪类模拟点击事件的效果
1. html结构：必须有input 和 label 且input的id与label的for相匹配
2. css样式：input:focus
*/
#slide5:checked ~ .imgList img:nth-of-type(5),
#slide4:checked ~ .imgList img:nth-of-type(4),
#slide3:checked ~ .imgList img:nth-of-type(3),
#slide2:checked ~ .imgList img:nth-of-type(2),
#slide1:checked ~ .imgList img:nth-of-type(1) {
z-index: 1;
opacity: 1;
}
/*
第五张图片时
左按钮应该去4 右按钮去1
第四张图片时
左按钮应该去3 右按钮去5
第三张图片时
左按钮应该去2 右按钮去4
第二张图片时
左按钮应该去1 右按钮去3
第一张图片时
左按钮应该去5 右按钮去2
*/
#slide5:checked ~ label:nth-of-type(1),
#slide4:checked ~ label:nth-of-type(5),
#slide3:checked ~ label:nth-of-type(4),
#slide2:checked ~ label:nth-of-type(3),
#slide1:checked ~ label:nth-of-type(2) {
display: block;
right: 0;
background-position: -125px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked ~ label:nth-of-type(1):hover,
#slide4:checked ~ label:nth-of-type(5):hover,
#slide3:checked ~ label:nth-of-type(4):hover,
#slide2:checked ~ label:nth-of-type(3):hover,
#slide1:checked ~ label:nth-of-type(2):hover {
background-position: -41px;
}
#slide5:checked ~ label:nth-of-type(4),
#slide4:checked ~ label:nth-of-type(3),
#slide3:checked ~ label:nth-of-type(2),
#slide2:checked ~ label:nth-of-type(1),
#slide1:checked ~ label:nth-of-type(5) {
display: block;
left: 0;
background-position: -84px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked ~ label:nth-of-type(4):hover,
#slide4:checked ~ label:nth-of-type(3):hover,
#slide3:checked ~ label:nth-of-type(2):hover,
#slide2:checked ~ label:nth-of-type(1):hover,
#slide1:checked ~ label:nth-of-type(5):hover {
background-position: 0px;
}
input {
display: none;
}
/* 导航 */
.nav {
width: 400px;
height: 8px;
position: absolute;
left: auto;
right: 30px;
bottom: 20px;
text-align: right;
z-index: 99;
}
.nav label {
/* z-index: 99; */
width: 14px;
height: 14px;
border: 2px solid #fff;
border-color: hsla(0, 0%, 100%, 0.3);
border-radius: 50%;
overflow: hidden;
background: rgba(0, 0, 0, 0.4);
opacity: 1;
margin-left: 3px;
display: inline-block;
cursor: pointer;
}
.nav label:hover {
border-color: rgba(0, 0, 0, 0.4);
background: hsla(0, 0%, 100%, 1);
}
/* 底部导航 */
#slide1:checked ~ .nav label:nth-child(1),
#slide2:checked ~ .nav label:nth-child(2),
#slide3:checked ~ .nav label:nth-child(3),
#slide4:checked ~ .nav label:nth-child(4),
#slide5:checked ~ .nav label:nth-child(5) {
border-color: rgba(0, 0, 0, 0.4);
background: hsla(0, 0%, 100%, 1);
}
</style>
</head>
<body>
<!-- 视觉容器 -->
<div class="container">
<!-- 左右切换菜单 -->
<input type="radio" name="slide" id="slide1" checked />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<input type="radio" name="slide" id="slide5" />
<label for="slide1" class="slide slide1"></label>
<label for="slide2" class="slide slide2"></label>
<label for="slide3" class="slide slide3"></label>
<label for="slide4" class="slide slide4"></label>
<label for="slide5" class="slide slide5"></label>
<!-- 图片列表 -->
<div class="imgList">
<img
src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
/>
<img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
/>
</div>
<!-- 轮播图的导航 -->
<div class="nav">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>
</body>
</html> 复制
百叶窗效果
在实现了上述轮播图后实现百叶窗效果是需要改造的。
-
首先是HTML结构，图片列表使用的是img标签，百叶窗实际上是将图片分割成不同的小块然后逐个切换。所以需要将HTML结构改造为一个div（作为每个小块的容器）嵌套若干个（这里用四个举例）div（作为图片展示）
<div class="imgList"> <div class="img"> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> </div> <div class="img"> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> </div> <div class="img"> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> </div> <div class="img"> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> </div> <div class="img"> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> <div class="frag"></div> </div> </div> 上述结构中，
img
frag
frag
- 对于
img
frag
class
的样式需要调整为
.container .imgList .img { height: 100%; width: 100%; height: auto; position: absolute; left: 0; top: 0; } .container .imgList .img .frag { float: left; height: 460px; width: 25%; background-size: 1226px 460px; opacity: 0; z-index: 0; }
frag
background-size
- 设置每块容器(
img
frag
)显示的图片
.container .imgList .img:nth-child(1) .frag { background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png); } .container .imgList .img:nth-child(2) .frag { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg); } .container .imgList .img:nth-child(3) .frag { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg); } .container .imgList .img:nth-child(4) .frag { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg); } .container .imgList .img:nth-child(5) .frag { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg); }
-
调整四小块中每一块显示的区域。
这一步很简单，如果不修改每一块的位置，那么四张图显示的都是一样的。而我们需要的是四小块拼成一个完整的。并且每一个都是有一个延迟的，所以同样需要为每一个小块设置延迟时间(
transition-delay
)。
.container .imgList .img .frag:nth-child(2) { background-position: -306.5px 0; transition-delay: .2s; } .container .imgList .img .frag:nth-child(3) { background-position: -613px 0; transition-delay: .3s; } .container .imgList .img .frag:nth-child(4) { background-position: -919.5px 0; transition-delay: .4s; } .container .imgList .img .frag:nth-child(5) { background-position: -1226px 0; transition-delay: .5s; }
- 调整当按钮(
label
标签)点下去时改变的元素。
#slide1:checked~.imgList .img:nth-child(1) .frag, #slide2:checked~.imgList .img:nth-child(2) .frag, #slide3:checked~.imgList .img:nth-child(3) .frag, #slide4:checked~.imgList .img:nth-child(4) .frag, #slide5:checked~.imgList .img:nth-child(5) .frag { opacity: 1; z-index: 1; }
-
此时页面已经可以有基本效果了。接下来需要做的只是美化。
#slide1:checked~.imgList .img:nth-child(1) .frag, #slide2:checked~.imgList .img:nth-child(2) .frag, #slide3:checked~.imgList .img:nth-child(3) .frag, #slide4:checked~.imgList .img:nth-child(4) .frag, #slide5:checked~.imgList .img:nth-child(5) .frag { opacity: 1; z-index: 1; transform: rotateY(90deg) translateZ(180deg) scale(1.5); filter: saturate(1) blur(0px) brightness(1) contrast(1); } .container .imgList .img .frag { float: left; height: 460px; width: 25%; background-size: 1226px 460px; opacity: 0; z-index: 0; transform-origin: center right; filter: saturate(0) blur(10px) brightness(.6) contrast(4); transition: transform .6s, opacity .6s, filter .6s ease-out; }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米轮播图示例--百叶窗效果</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 1226px;
height: 460px;
background: lightcyan;
margin: 100px auto;
position: relative;
}
.container .imgList {
width: 100%;
position: relative;
}
.container .imgList .img {
height: 100%;
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
.container .imgList .img .frag {
float: left;
height: 460px;
width: 25%;
background-size: 1226px 460px;
opacity: 0;
z-index: 0;
transform-origin: center right;
filter: saturate(0) blur(10px) brightness(.6) contrast(4);
transition: transform .6s, opacity .6s, filter .6s ease-out;
}
.container .imgList .img:nth-child(1) .frag {
background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
}
.container .imgList .img:nth-child(2) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
}
.container .imgList .img:nth-child(3) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
}
.container .imgList .img:nth-child(4) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
}
.container .imgList .img:nth-child(5) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
}
.container .imgList .img .frag:nth-child(2) {
background-position: -306.5px 0;
transition-delay: .2s;
}
.container .imgList .img .frag:nth-child(3) {
background-position: -613px 0;
transition-delay: .3s;
}
.container .imgList .img .frag:nth-child(4) {
background-position: -919.5px 0;
transition-delay: .4s;
}
.container .imgList .img .frag:nth-child(5) {
background-position: -1226px 0;
transition-delay: .5s;
}
#slide1:checked~.imgList .img:nth-child(1) .frag,
#slide2:checked~.imgList .img:nth-child(2) .frag,
#slide3:checked~.imgList .img:nth-child(3) .frag,
#slide4:checked~.imgList .img:nth-child(4) .frag,
#slide5:checked~.imgList .img:nth-child(5) .frag {
opacity: 1;
z-index: 1;
transform: rotateY(90deg) translateZ(180deg) scale(1.5);
filter: saturate(1) blur(0px) brightness(1) contrast(1);
}
.slide {
width: 41px;
height: 69px;
background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
background-repeat: no-repeat;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 99;
display: none;
cursor: pointer;
}
#slide5:checked~.imgList img:nth-of-type(5),
#slide4:checked~.imgList img:nth-of-type(4),
#slide3:checked~.imgList img:nth-of-type(3),
#slide2:checked~.imgList img:nth-of-type(2),
#slide1:checked~.imgList img:nth-of-type(1) {
z-index: 1;
opacity: 1;
}
#slide5:checked~label:nth-of-type(1),
#slide4:checked~label:nth-of-type(5),
#slide3:checked~label:nth-of-type(4),
#slide2:checked~label:nth-of-type(3),
#slide1:checked~label:nth-of-type(2) {
display: block;
right: 0;
background-position: -125px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked~label:nth-of-type(1):hover,
#slide4:checked~label:nth-of-type(5):hover,
#slide3:checked~label:nth-of-type(4):hover,
#slide2:checked~label:nth-of-type(3):hover,
#slide1:checked~label:nth-of-type(2):hover {
background-position: -41px;
}
#slide5:checked~label:nth-of-type(4),
#slide4:checked~label:nth-of-type(3),
#slide3:checked~label:nth-of-type(2),
#slide2:checked~label:nth-of-type(1),
#slide1:checked~label:nth-of-type(5) {
display: block;
left: 0;
background-position: -84px;
}
/* 鼠标悬停改变雪碧图位置 */
#slide5:checked~label:nth-of-type(4):hover,
#slide4:checked~label:nth-of-type(3):hover,
#slide3:checked~label:nth-of-type(2):hover,
#slide2:checked~label:nth-of-type(1):hover,
#slide1:checked~label:nth-of-type(5):hover {
background-position: 0px;
}
input {
display: none;
}
/* 导航 */
.nav {
width: 400px;
height: 8px;
position: absolute;
left: auto;
right: 30px;
bottom: 20px;
text-align: right;
z-index: 99;
}
.nav label {
/* z-index: 99; */
width: 14px;
height: 14px;
border: 2px solid #fff;
border-color: hsla(0, 0%, 100%, 0.3);
border-radius: 50%;
overflow: hidden;
background: rgba(0, 0, 0, 0.4);
opacity: 1;
margin-left: 3px;
display: inline-block;
cursor: pointer;
}
.nav label:hover {
border-color: rgba(0, 0, 0, 0.4);
background: hsla(0, 0%, 100%, 1);
}
/* 底部导航 */
#slide1:checked~.nav label:nth-child(1),
#slide2:checked~.nav label:nth-child(2),
#slide3:checked~.nav label:nth-child(3),
#slide4:checked~.nav label:nth-child(4),
#slide5:checked~.nav label:nth-child(5) {
border-color: rgba(0, 0, 0, 0.4);
background: hsla(0, 0%, 100%, 1);
}
</style>
</head>
<body>
<!-- 视觉容器 -->
<div class="container">
<!-- 左右切换菜单 -->
<input type="radio" name="slide" id="slide1" checked />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<input type="radio" name="slide" id="slide5" />
<label for="slide1" class="slide slide1"></label>
<label for="slide2" class="slide slide2"></label>
<label for="slide3" class="slide slide3"></label>
<label for="slide4" class="slide slide4"></label>
<label for="slide5" class="slide slide5"></label>
<!-- 图片列表 -->
<div class="imgList">
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
</div>
<!-- 轮播图的导航 -->
<div class="nav">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>
</body>
</html> 复制
下载按钮动态效果
-
分析
这个效果大概分成几个部分
- 静态按钮
- 点击后按钮宽度变小，然后成圆形
- 按钮变大变小
- 小白球转圈
- 回到圆中心位置，显示“√”
- 基于分析，静态效果很容易实现。
- 对于紫色的小球变大变小也很简单。
scale
即可
如果使用了
translate
translate
属性写在scale之前。
@keyframes circle{ 0%,15%,45%,75%{ transform:translate(-50%,-50%) scale(0.8) ; } 30%,60%,90%{ transform:translate(-50%,-50%) scale(1.2) ; } 100%{ transform: translate(-50%,-50%) scale(1) ; } }
-
小白球旋转
@keyframes dot{ 8%{ transform: scale(0); } 16%{ transform: scale(1) rotate(30deg) translateX(48px); } 95%{ transform: scale(1) rotate(1000deg) translateX(48px); } 100%{ transform: scale(0.125) rotate(1050deg) translate(52px ); } }
- 点击效果可以使用伪类
focus
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes circle {
0%,
15%,
45%,
75% {
transform: translate(-50%, -50%) scale(0.8);
}
30%,
60%,
90% {
transform: translate(-50%, -50%) scale(1.2);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes dot {
8% {
transform: scale(0);
}
16% {
transform: scale(1) rotate(30deg) translateX(48px);
}
95% {
transform: scale(1) rotate(1000deg) translateX(48px);
}
100% {
transform: scale(0.125) rotate(1050deg) translate(52px);
}
}
body {
background-color: #000;
}
.button {
display: block;
width: 160px;
height: 41px;
background: transparent;
border-radius: 10px;
color: white;
border: none;
outline: none;
cursor: pointer;
margin: 100px auto;
position: relative;
}
.button::after,
.button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
}
.button::before {
width: 100%;
height: 100%;
background-color: #6d58ff;
border-radius: 10px;
transition: all 0.5s;
}
.button:focus::before {
width: 41px;
height: 41px;
border-radius: 50%;
animation: circle 3s linear forwards;
}
.button:focus span {
display: none;
}
.button::after {
content: "";
width: 16px;
height: 16px;
background: #fff;
z-index: 2;
border-radius: 50%;
transform: scale(0);
/* 设置外部白色圆圈的圆心位置 */
transform-origin: 0 0;
}
.button:focus::after {
animation: dot 3s linear forwards;
}
.button span {
position: relative;
z-index: 1;
}
.button svg {
width: 15px;
height: 13px;
display: block;
position: absolute;
left: 50%;
top: 50%;
stroke: #fff;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transform: translate(-50%, -50%);
stroke-dasharray: 17px;
stroke-dashoffset: 17px;
transition: stroke-dashoffset 0.3s ease;
transition-delay: 3s;
}
.button:focus svg {
stroke-dashoffset: 34px;
}
</style>
</head>
<body>
<button class="button">
<span>下载</span>
<svg view-Box="0 0 15 13">
<polyline points="2 6.5 6 10.5 13 2.5"></polyline>
</svg>
</button>
</body>
</html> 复制