目标
我们要实现的目标效果如下
过渡如何使用
可以清楚地看出效果图中的效果用到了css3中的过渡transition,先来了解一下transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
过渡共有四个属性,分别是:
transition-property: 规定应用过渡的 CSS 属性的名称
transition-duration: 定义过渡效果花费的时间。默认是 0
transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”
transition-delay: 规定过渡效果何时开始。默认是 0
其中,transition-property和transition-duration是必填的,否则动画无法生效
1. transition-property:
transition-property属性指定CSS属性发生变化时的过渡效果(注意,不是所有css属性都支持过渡),过渡属性取值如下:
none:没有属性会获得过渡效果。
all:所有属性都将获得过渡效果。
property:定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
例:
element {
/*单个属性*/
transition-property:width;
/*属性名称列表*/
transition-property:width, height;
/*全部支持过渡的属性*/
transition-property:all;
}
2. transition-duration:
transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)
例:
element {
transition-duration: 2s;
transition-duration: 200ms;
}
3. transition–timing-function:
transition-timing-function:属性指定切换效果的速度。此属性允许一个过渡效果,以改变其持续时间的速度,取值:
linear: 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease: 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in: 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out: 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out: 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
补充最后一个贝塞尔曲线速度曲线生成网站:https://cubic-bezier.com/
写法:
element {
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
}
4. transition-delay:
transition-delay 属性指定何时将开始切换效果。transition-delay值是指以秒为单位(S)或毫秒(ms)
例:
element {
transition-delay: 5s;
transition-delay: 20000ms;
}
5. 简写
直接使用transition属性即可实现简写,写法如下
transition: property duration timing-function delay;
实现效果
步入正题,该如何实现开头的效果呢,话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
ul {
display: flex;
}
ul li {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
list-style: none;
width: 200px;
height: 140px;
margin: 80px 20px;
background-color: #fcfcfc;
border-radius: 20px;
border: 2px solid #ccc;
}
ul li .index {
width: 40px;
height: 40px;
background-color: cornflowerblue;
text-align: center;
line-height: 40px;
transition: all 0.8s;
border-radius: 50%;
}
ul li:hover {
cursor: pointer;
border-radius: #000;
background-color: #f4f4f4;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
border: 2px solid #333;
}
ul li:hover .index {
color: #fff;
background-color: crimson;
transform: rotate(-360deg);
}
.dog {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
transition: all cubic-bezier(0, 0.7, 0.37, 1.35) 0.8s;
opacity: 0;
z-index: -1;
}
.dog img {
width: 100%;
height: 100%;
}
ul li:hover .dog {
transform: translate(90px, -92px) rotate(20deg);
opacity: 1;
}
.keyframes {
display: none;
width: 200px;
height: 200px;
animation: fadep 3s infinite linear;
}
</style>
</head>
<body>
<ul>
<li>
<div class="dog"><img src="./img/扁平头像-boy 02.png" alt="" /></div>
<div class="index">1</div>
生活不止眼前的苟且
</li>
<li>
<div class="dog"><img src="./img/扁平头像-boy 03.png" alt="" /></div>
<div class="index">2</div>
生活不止眼前的苟且
</li>
<li>
<div class="dog"><img src="./img/扁平头像-girl 06.png" alt="" /></div>
<div class="index">3</div>
生活不止眼前的苟且
</li>
</ul>
</body>
</html>
代码可以直接运行,记得改自己的图片地址