文章目录
- 变形效果案例
-
- 过渡效果案例
- 鼠标移动显示内容
- 图片文字滑动效果
- 白光闪过效果
- 手风琴效果
- 动画案例
-
- 动画代码
变形效果案例
照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#container {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #f4f1d2;
}
img {
position: absolute;
padding: 10px;
background-color: white;
}
img:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#container img:first-child {
left: 100px;
top: 60px;
transform: rotate(30deg);
}
#container img:nth-child(2) {
left: 300px;
top: 60px;
transform: rotate(-30deg);
}
#container img:nth-child(3) {
left: 500px;
top: 60px;
transform: rotate(30deg);
}
#container img:nth-child(4) {
left: 100px;
top: 240px;
transform: rotate(-30deg);
}
#container img:nth-child(5) {
left: 300px;
top: 240px;
transform: rotate(0);
}
#container img:last-child {
left: 500px;
top: 240px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div id="container">
<img src="img/haizei1.png" alt="" />
<img src="img/haizei2.png" alt="" />
<img src="img/haizei3.png" alt="" />
<img src="img/haizei4.png" alt="" />
<img src="img/haizei5.png" alt="" />
<img src="img/haizei6.png" alt="" />
</div>
</body>
</html>
过渡效果案例
鼠标移动显示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#container {
width: 300px;
height: 20px;
padding: 20px;
border: 1px solid silver;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
transition: all 0.5s linear 0s;
}
#container:hover {
height: 150px;
background-color: azure;
white-space: normal;
}
</style>
</head>
<body>
<div id="container">
hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。 hello这是一些数据。
</div>
</body>
</html>
图片文字滑动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#info {
width: 760px;
margin: 0 auto;
}
.wrap {
width: 220px;
height: 330px;
float: left;
position: relative;
overflow: hidden;
}
.wrap img {
border: 0;
width: 220px;
height: 330px;
}
.wrap p {
display: block;
width: 220px;
height: 330px;
position: absolute;
left: 0;
top: 300px;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
color: white;
padding: 0;
margin: 0;
line-height: 16px;
transition: all 0.6s ease-in-out;
}
.wrap p b {
display: block;
font-size: 22px;
color: #fc0;
text-align: center;
margin: 0%;
padding: 0%;
line-height: 30px;
}
.wrap p span {
display: block;
padding: 10px;
line-height: 20px;
}
.wrap:hover p {
top: 0;
}
</style>
</head>
<body>
<div id="info">
<div class="wrap">
<img src="img/pic1.jpg" alt="">
<p>
<b>hello A</b>
<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
</p>
</div>
<div class="wrap">
<img src="img/pic2.jpg" alt="">
<p>
<b>hello B</b>
<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
</p>
</div>
<div class="wrap">
<img src="img/pic3.jpg" alt="">
<p>
<b>hello C</b>
<span>这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。这是一堆内容。</span>
</p>
</div>
</div>
</body>
</html>
白光闪过效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>白光闪过效果</title>
<style type="text/css">
#wrapper {
position: relative;
width: 240px;
height: 180px;
cursor: pointer;
}
#flash {
position: absolute;
top: 0;
left: -120px;
width: 100px;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
transform: skewX(-30deg);
}
#wrapper:hover #flash {
left: 300px;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="flash"></div>
<img src="../img/person.png">
</div>
</body>
</html>
手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴效果</title>
<style type="text/css">
#box {
width: 300px;
height: 100px;
overflow: hidden;
}
.item {
float: left;
width: 20%;
height: 100%;
transition: all 0.5s;
}
.item:nth-child(1) {
width: 40%;
background-color: red;
}
.item:nth-child(2) {
background-color: orange;
}
.item:nth-child(3) {
background-color: yellow;
}
.item:nth-child(4) {
background-color: green;
}
#box:hover div {
width: 20%;
}
#box div:hover {
width: 40%;
}
</style>
</head>
<body>
<div id="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
动画案例
脉冲动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脉冲动画</title>
<style type="text/css">
@keyframes pulsating {
0% {
transform: scale(1);
opacity: 0.8;
}
20% {
transform: scale(1);
opacity: 0.6;
}
40% {
transform: scale(1.2);
opacity: 0.4;
}
60% {
transform: scale(1.4);
opacity: 0.2;
}
80% {
transform: scale(1.6);
opacity: 0.1;
}
100% {
transform: scale(1.8);
opacity: 0.0;
}
}
#wrapper {
position: relative;
display: inline-block;
margin: 100px;
}
#img {
width: 50px;
height: 50px;
}
#circle {
position: absolute;
top: -12px;
left: -12px;
width: 50px;
height: 50px;
border: 12px solid #a8e957;
border-radius: 50%;
opacity: 0;
}
#wrapper:hover #circle {
animation: pulsating 1s ease-out infinite;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="circle"></div>
<img id="img" src="../img/icon.png">
</div>
</body>
</html>
loading效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loading效果</title>
<style type="text/css">
@keyframes loading {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.5);
}
100% {
transform: scaleY(1);
}
}
#box {
position: relative;
margin: 100px;
}
#box>i {
position: absolute;
top: 0;
width: 5px;
height: 40px;
background-color: hotpink;
border-radius: 6px;
}
#box>i:nth-child(1) {
left: 0;
animation: loading 1s ease-in 0.1s infinite;
}
#box>i:nth-child(2) {
left: 10px;
animation: loading 1s ease-in 0.3s infinite;
}
#box>i:nth-child(3) {
left: 20px;
animation: loading 1s ease-in 0.6s infinite;
}
#box>i:nth-child(4) {
left: 30px;
animation: loading 1s ease-in 0.3s infinite;
}
</style>
</head>
<body>
<div id="box">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
灯光闪烁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灯光闪烁</title>
<style type="text/css">
@keyframes anim {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.container {
position: relative;
width: 100px;
margin: 100px;
text-align: center;
}
.dengpao {
position: absolute;
width: 70%;
top: 16px;
left: 65px;
}
.guang {
position: absolute;
width: 100%;
animation: anim 1s ease 0s infinite alternate;
}
</style>
</head>
<body>
<div class="container">
<img class="dengpao" src="../img/dengpao.png" alt="">
<img class="guang" src="../img/guang.png" alt="">
</div>
</body>
</html>
动画代码
