1、抖动
img {
width: 200px;
border-radius: 10px;
animation: 抖动 0.3s linear infinite both;
}
@keyframes 抖动 {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
2、旋转
img {
width: 200px;
height: 200px;
border-radius: 50%;
animation: 旋转 infinite 20s linear;
}
@keyframes 旋转 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
3、偏移
img {
width: 200px;
height: 200px;
transition: all 0.3s;
}
img:hover {
transform: translateY(-6px);
}
4、放大缩小,这个太简单不搞了
5、移入显示action
<div class="item">
<img src=“logo.jpg” alt="logo" />
<div class="actions">
<span class="follow">关注</span>
<span class="love">点赞</span>
</div>
</div>
.item{
width: 200px;
height: 200px;
margin: 200px auto;
cursor: pointer;
position: relative;
}
.item img{
width: 100%;
height: 100%;
background-color: #4f4f4f;
position: relative;
z-index: 2;
}
.item:hover .actions{
z-index: 3;
}
.item .actions{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.3);
transition: all 0.6s;
}
.follow,.love{
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
transition: all 0.3s;
font-size: 14px;
opacity: 0;
background-color: #fff;
color: #999;
}
.item:hover .follow{
transform: translateY(60px);
opacity: 1;
}
.item:hover .love{
transform: translateY(-60px);
opacity: 1;
}
.follow{
position: absolute;
left: calc(50% - 40px);
top: -30px;
}
.love{
position: absolute;
bottom: -30px;
left: calc(50% - 40px);
}
6、vue的下拉动画
<button @click="showList = !showList">显示/隐藏</button>
<transition name="scaleY">
<ul class="s_area_list" v-if="showList">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</transition>
data () {
return {
showList: false,
}
},
/* 下拉动画 */
.scaleY-enter-active,
.scaleY-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top;
}
.scaleY-enter,
.scaleY-leave-active {
opacity: 0;
transform: scaleY(0);
}
7、扫描框动画(gif录制得不好,有卡顿效果,html无此问题。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
:root {
--scan-color: #409eff;
--scan-rgb-color: 64,158,255;
}
.scan__wrapper {
margin: 150px auto;
position: relative;
width: 200px;
height: 200px;
/* background: #eee; */
}
.scan__wrapper > .scan__border {
position: absolute;
display: inline-block;
width: 5px;
height: 5px;
border: 2px solid transparent;
}
.scan__border:nth-of-type(1) {
top: 1px;
left: 1px;
border-top-color: var(--scan-color);
border-left-color: var(--scan-color);
}
.scan__border:nth-of-type(2) {
top: 1px;
right: 1px;
border-top-color: var(--scan-color);
border-right-color: var(--scan-color);
}
.scan__border:nth-of-type(3) {
right: 1px;
bottom: 1px;
border-right-color: var(--scan-color);
border-bottom-color: var(--scan-color);
}
.scan__border:nth-of-type(4) {
left: 1px;
bottom: 1px;
border-left-color: var(--scan-color);
border-bottom-color: var(--scan-color);
}
.scan__line {
position: absolute;
width: 90%;
height: 5px;
margin-left: 5%;
border-radius: 2px;
background-color: var(--scan-color);
animation: scanAni 6s infinite linear;
}
@keyframes scanAni {
0% {
/* 距离顶部有一个.scan__line的高度。 */
top: 5px;
box-shadow:0px -10px 20px rgba(var(--scan-rgb-color), 0.8);
}
50% {
/* 距离底部有一个.scan__line的高度。 */
top: calc(100% - 10px);
box-shadow:0px -10px 20px rgba(var(--scan-rgb-color), 0.8);
}
51% {
top: calc(100% - 10px);
box-shadow:0px 10px 20px rgba(var(--scan-rgb-color), 0.8);
}
99% {
top: 5px;
box-shadow:0px 10px 20px rgba(var(--scan-rgb-color), 0.8);
}
100% {
top: 5px;
box-shadow:0px -10px 20px rgba(var(--scan-rgb-color), 0.8);
}
}
</style>
</head>
<body>
<div class="scan__wrapper">
<!-- 四个角 -->
<span class="scan__border"></span>
<span class="scan__border"></span>
<span class="scan__border"></span>
<span class="scan__border"></span>
<!-- 上下滑动的线 -->
<em class="scan__line"></em>
</div>
</body>
</html>
8、开门方向(gif录制得不好,有卡顿效果,html无此问题。)
<div class="wrapper">
<span class="left" :class="aniClass"></span>
<span class="right" :class="aniClass"></span>
</div>
<button style="margin-left: 50px;" @click="aniClass ? aniClass='' : aniClass='begin'">click me</button>
data() {
return {
aniClass: '',
}
},
<style lang="scss" scoped>
.wrapper {
display: flex;
border: 1px solid grey;
width: 100px;
height: 100px;
margin: 50px;
overflow: hidden; // 内
span {
display: block;
width: 50%;
background-color: grey;
transform-style: preserve-3d;
transition: all 1s;
transition-timing-function: ease-out;
&.left {
transform-origin: center left;
&.begin {
// transform: rotateX(-15deg) rotateY(-95deg) rotateZ(0deg); // 外
transform: rotateX(15deg) rotateY(-95deg) rotateZ(0deg); // 内
}
}
&.right {
transform-origin: center right;
&.begin {
// transform: rotateX(15deg) rotateY(-95deg) rotateZ(0deg); // 外
transform: rotateX(15deg) rotateY(95deg) rotateZ(0deg); // 内
}
}
}
</style>