CSS3实现5个实用动画特效
2021-12-10 本文已影响0人
硅谷干货
翻转硬币效果
image.png
<head>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transform-style: preserve-3d;
transition: all 1s;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: aqua;
}
.back {
background-color: blueviolet;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">我是正面</div>
<div class="back">我是反面</div>
</div>
</body>
</html>
广告跑马灯特效
image.png
<head>
<style>
div {
/* overflow: hidden; */
font-size: 20px;
width: 0;
height: 30px;
color: white;
background-color: red;
white-space: nowrap;
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>
我是广告跑马灯特效哟
</div>
</body>
</html>
3D导航栏
image.png
<head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin-right: 10px;
width: 120px;
height: 40px;
list-style: none;
perspective: 500px;
}
/* body {
perspective: 500px;
} */
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
text-align: center;
line-height: 40px;
}
.front {
background-color: aqua;
z-index: 1;
transform: translateZ(20px);
}
.bottom {
background-color: blue;
transform: translateY(20px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">我是正面</div>
<div class="bottom">我是底面</div>
</div>
</li>
<li>
<div class="box">
<div class="front">我是正面</div>
<div class="bottom">我是底面</div>
</div>
</li>
</ul>
</body>
</html>
旋转木马效果
image.png
<head>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 200px;
height: 150px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
background: url(./images/lanhu01.jpg) no-repeat;
}
section:hover {
/* 鼠标移入，停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg);
}
}
section div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(./images/lanhu02.jpg) no-repeat;
}
section div:nth-child(1){
transform: rotateY(0) translateZ(200px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(200px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(200px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(200px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(200px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(200px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
呼吸灯效果
image.png
<head>
<style>
@keyframes glow {
from {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393;
}
to {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;
}
}
.box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: yellow;
animation: glow 800ms ease-out infinite alternate;
}
.box:hover {
animation-play-state: paused;
}
.form {
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上案例直接拷贝可用，期待您的收藏
点赞加关注，永远不迷路
