css3中的动画特效案例

最新推荐文章于 2023-09-19 13:53:39 发布

CSH_lucky

最新推荐文章于 2023-09-19 13:53:39 发布

阅读量1.7k

点赞数 1

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/CSH_lucky/article/details/105780026

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言
最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。
一、升空的孔明灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>孔明灯</title>
		<style>
            *{
                padding: 0;
                margin: 0;
            }
            html{
                height: 100%;
                background-color: #000;
            }
            div{
                height: 100%;
                width: 100%;
                position: relative;
            }
            @keyframes run{
                0%{
                    top: 600px;
                }
                100%{
                    top: 100px;
                    width: 10px;
                    height: 10px;;
                }
            }

            div>img{
                width: 100px;
                height: 100px;
                display: inline-block;
                position: absolute;
                top: 800px;
                animation: run 10s infinite;
            }
            div>img:nth-child(1){
                left: 10px;
            }
            div>img:nth-child(2){
                left: 120px;
            }
            div>img:nth-child(3){
                left: 230px;
            }
            div>img:nth-child(4){
                left: 340px;
            }
            div>img:nth-child(5){
                left: 450px;
            }
            div>img:nth-child(6){
                left: 560px;
            }
            div>img:nth-child(7){
                left: 670px;
            }
            div>img:nth-child(8){
                left: 780px;
            }
		</style>
	</head>
	<body>
		<div>
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">
            <img src="img/lable.jpg">

        </div>
	</body>
</html>

在这里插入图片描述
二、旋转盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
			padding: 0;
			margin: 0;
		}
		html{
			height: 100%;
			background-image: linear-gradient(#29f9f0 0% , #000 80%);
		}
        @keyframes run{
			0%{
                transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
			}
			100%{
                transform: rotateX(720deg) rotateY(360deg) rotate(360deg);
			}
		}
		.wapper{
			width: 300px;
			margin-top: 100px;
			perspective: 800px;
			margin: 50px auto;
		}
        .wapper .cube{
			width: 300px;
			height: 300px;
	        transform-style: preserve-3d;
	        position: relative;
	        transform: rotateX(-50deg) rotateY(-50deg) rotate(-50deg);
	        animation: run 10s infinite;
		}
		.wapper .cube span{
			transition: all 1s cubic-bezier(0.9,-0.2,1,1);
		}
		.cube>span{
			display: block;
			width: 90px;
			height: 90px;
			position: absolute;
			left: 50px;
			top: 50px;
			opacity: 0.8;
			background-color: rgba(0,100,120,1);

		}
	
		.cube span.num_front{
        	transform: translateZ(50px);
        	background-image: url(img/front.jpg);
        	background-size: cover;
        }
        .cube span.num_back{
        	transform: translateZ(-50px);
        	background-image: url(img/back.jpg);
        	background-size: cover;
        }
        .cube span.num_left{
        	transform: translateX(-50px) rotateY(90deg);
        	background-image: url(img/left.jpg);
        	background-size: cover;
        }
        .cube span.num_right{
        	transform: translateX(50px) rotateY(-90deg);
        	background-image: url(img/right.jpg);
        	background-size: cover;
        }
        .cube span.num_top{
        	transform: translateY(-50px) rotateX(90deg);
        	background-image: url(img/top.jpg);
        	background-size: cover;
        }
        .cube span.num_bottom{
        	transform: translateY(50px) rotateX(-90deg);
        	background-image: url(img/bottom.jpg);
        	background-size: cover;
        }
        
        .wapper .cube:hover .num_front{
        	
        	transform: translateZ(100px) scale(1.5);
        }
        .wapper .cube:hover .num_back{
        	
        	transform: translateZ(-100px) scale(1.5);
        }
        .wapper .cube:hover .num_left{
        	
        	transform: translateX(-100px) rotateY(90deg) scale(1.5);
        }
        .wapper .cube:hover .num_right{
        	
        	transform: translateX(100px) rotateY(-90deg) scale(1.5);
        }
        .wapper .cube:hover .num_top{
        	
        	transform: translateY(-100px) rotateX(90deg) scale(1.5);
        }
        .wapper .cube:hover .num_bottom{
        	
        	transform: translateY(100px) rotateX(-90deg) scale(1.5);
        }

    </style>
</head>
<body>
    <div class="wapper">
		<div class="cube">
			 <!-- 正面 -->
		     <span class="num_front">
		     	 
		     </span>
		     <!-- 反面 -->
		     <span class="num_back">
		     	
		     </span>
		     <!-- 左面 -->
		     <span class="num_left">
		       
		     </span>
		       <!-- 右面 -->
		     <span class="num_right">
		     	
		     </span>
		       <!-- 上面 -->
		     <span class="num_top">
		     	
		     </span>	
		       <!-- 下面 -->
		     <span class="num_bottom">
		     	
		     </span>		
		</div>
	</div>
</body>
</html>

在这里插入图片描述

CSH_lucky

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css3中的动画特效案例

引言最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。一、升空的孔明灯<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>孔明灯</title> <style> *{ ...
复制链接

扫一扫