现如今,不仅JavaScript和JQuary等技术能够实现简单动画,CSS3也能代替JavaScript实现一些简单的动画了!下面就跟我一起操练起来吧!
简单阴影盒子动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影盒子动画</title>
<style>
.banner{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 30px;
transition: all .5s;
}
div:hover{
box-shadow: 0px 10px 5px #888888;
margin-top: 20px;
}
</style>
</head>
<body>
<center>
<div class="banner">FloatBox</div>
</center>
</body>
</html>
效果图如下:
bilibili置顶动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哔哩哔哩置顶动画</title>
<style>
* {
margin: 0;
padding: 0;
}
@-webkit-keyframes fly {
0% {
background-position-x: 0;
}
25% {
background-position-x: -150px;
}
50% {
background-position-x: -300px;
}
75% {
background-position-x: -450px;
}
100% {
background-position-x: -600px;
}
}
a{
display: block;
}
.rocket-con {
position: fixed;
background: url('rocket_top.png');
width: 150px;
height: 175px;
cursor: pointer;
z-index: 99;
bottom: 0;
left: 50%;
margin-left: 490px;
}
.rocket-con:hover.fly {
-webkit-animation: fly .4s steps(1) infinite;
background-image: url('rocket_frame.png');
}
</style>
</head>