css3的一些动画（代码及演示）

最新推荐文章于 2024-05-09 09:40:04 发布

七月是我的生日

最新推荐文章于 2024-05-09 09:40:04 发布

阅读量6.8k

点赞数 12

分类专栏： css初学文章标签： css3动画

本文链接：https://blog.csdn.net/qq_43955202/article/details/88935491

版权

css初学专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS3 的一些动画（代码及演示）

1. 过渡：

Transition(实现元素不同状态间的平滑过渡）
补间动画：从初始状态到终了状态。
帧动画：按固定顺序和速度播放。
属性：
Transition-property：all；所有属性均过渡
Transition-duration：1s；设置过渡时间
Transition-timing-function:linear;设置运动曲线
（linear 线性，ease 减速，ease-in加速，
ease-out减速， ease-in-out 先减速后加速）
Transition-delay：1s；过渡延迟
综合属性：
Transition：让哪些属性过渡过渡持续时间运动曲线延迟时间
Transition：all 3s linear 0s;
案例演示:

<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 100px auto;
			/*transition: width 2s linear 0s;*/
			transition: all 2s linear 0s;

		}
		.box1:hover{
			width: 600px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
</body>

在这里插入图片描述

2. 2D动画

实现元素的位移，旋转，变形，缩放。
（1）缩放
Transform：scale（x，y）
Transform：scale（2，0.5）
X 为水平缩放倍数，y为垂直缩放倍数
案例:

<style>
		.box{
			width: 1000px;
			margin: 100px auto;
		}
		.box div{
			width: 300px;
			height: 150px;
			background-color: red;
			float: left;
			margin-right: 15px;
			color: white;
			text-align: center;
		}
		.box .box2{
			background-color: green;
			 transition:all 2s linear 0s;
		}
		.box .box2:hover{
                background-color: blue;
                transform: scale(2,0.5);

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
</body>

在这里插入图片描述
(2) 位移
Transform：translate（水平，垂直）
Transform：translate（-100px，100px）
实例:

    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
            transition: all 1s;
        }
 
        .box:hover {
            transform: translateX(100px);
        }
    </style>
</head>
<body>
<div class="box">
 </div>
</body>

在这里插入图片描述
(3)旋转：
Transform：rotate（90deg);
实例：

<style>
		.box{
			width: 1000px;
			margin: 100px auto;
		}
		.box div{
			width: 300px;
			height: 150px;
			border:1px solid #000;
			background-color: red;
			float: left;
			margin-right: 30px;
		}
		div:nth-child(2) {
               background-color: pink;
               transition: all 2s linear 0s;

		}
		div:nth-child(2):hover {
			transform: rotate(-360deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
</body>

在这里插入图片描述

3.3D动画：

（1）3D旋转
transform：rotateX(360deg）/rotateY/rotateZ
实例：

<style>
		.box{
			width: 1000px;
			margin: 100px auto;
		}
		.box div{
			width: 300px;
			height: 150px;
			border:1px solid #000;
			background-color: red;
			float: left;
			margin-right: 30px;
		}
		div:nth-child(2) {
               background-color: pink;
               transition: all 2s linear 0s;

		}
		div:nth-child(2):hover {
			transform: rotate(-360deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
</body>

在这里插入图片描述
（2）3D位移
Transform:TranslateX/Y/Z;
实例：

<style>
        .rotateX {
            width: 300px;
            height: 226px;
            margin: 200px auto;
 
            perspective: 110px;
        }
 
        img {
           
            transition: transform 2s;
        }
 
        
        .rotateX:hover img {
            transform: translateX(100px);
        }
 
    </style>
</head>
<body>
<div class="rotateX">
    <img src="images/1.jpg" alt=""/>
</div>
</body>

在这里插入图片描述
（3）3D立方体：

<style>
        .box {
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin: 100px auto;
            position: relative;
            /*border-radius: 50%;*/
 
            /* 让子盒子保持3d效果*/
 
            transform-style: preserve-3d;
 
            /*transform:rotateX(30deg) rotateY(-30deg);*/
 
            animation: gun 8s linear infinite;
        }
 
        .box > div {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color: #daa520;
        }
 
        .left {
            background-color: rgba(255, 0, 0, 1);
            /* 变换中心*/
            transform-origin: left;
            /* 变换*/
            transform: rotateY(90deg) translateX(-125px);
        }
 
        .right {
            background: rgba(0, 0, 255, 1);
            transform-origin: right;
            /* 变换*/
            transform: rotateY(90deg) translateX(125px);
        }
 
        .forward {
            background: rgba(255, 255, 0, 1);
            transform: translateZ(125px);
        }
 
        .back {
            background: rgba(0, 255, 255, 1);
            transform: translateZ(-125px);
        }
 
        .up {
            background: rgba(255, 0, 255, 1);
            transform: rotateX(90deg) translateZ(125px);
        }
 
        .down {
            background: rgba(99, 66, 33, 1);
            transform: rotateX(-90deg) translateZ(125px);
        }
 
        @keyframes gun {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
 
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="up">上</div>
    <div class="down">下</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="forward">前</div>
    <div class="back">后</div>
</div>
</body>

在这里插入图片描述
4.3D精灵图：

<style>
		body{
			background-color: white;
		}
		.box{
			width: 280px;
			height:280px;
			/*border:1px solid black;*/
			margin: 100px auto;
			position: relative; 
		}
		.box > div{
			width: 100%;
			height: 100%;
			position: absolute;
			/*border:1px solid black;*/
			border-radius: 50%;
			transition: all 2s linear 0s;
			backface-visibility: hidden;
		}
		.box1{
			background:url(images/1.jpg) left 0 no-repeat;
		}
		.box2{
			background:url(images/2.jpg) right 0 no-repeat;
			transform: rotateY(180deg);
		}
		.box:hover .box1{
			transform: rotateY(180deg);
		}
		.box:hover .box2{
			transform: rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>

在这里插入图片描述

4. animation动画

Animation属性格式：
Animation：动画名称持续时间执行次数方向运动曲线执行延迟
（1）动画名称
Animation-name：donghua；
（2）执行一次时间
Animation-duration：4s；
（3）执行次数
animation-iteration-count：1；

（4）动画方向
Animation-direction：normal/alternate
（5）动画执行延迟
Animation-delay：1s；
（6）结束后效果：
（7）Animation-fill-mode：forwards 末尾状态
Backwards 初始状态
动画实例：

<style>
		.box{
			width: 150px;
			height: 150px;
			background-color: red;
			margin: 100px auto;
			animation: donghua 4s linear 0s;

		}
		@keyframes donghua{
			0%{
				transform: translateX(0px) translateY(0px);
                background-color: red;

			}
			 25% {
                 transform: translateX(500px) translateY(0px);
            }
        50% {
             transform: translateX(500px) translateY(200px);
             background-color: green;
             
            }
        75% {
             transform: translateX(0px) translateY(200px);
             }
        100% {
             transform: translateX(0px) translateY(0px);
             background-color: red;
             
            }
        
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>

在这里插入图片描述

七月是我的生日

关注

12
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
css3的一些动画（代码及演示）

CSS3 的一些动画（代码及演示）1. 过渡：Transition(实现元素不同状态间的平滑过渡）补间动画：从初始状态到终了状态。帧动画：按固定顺序和速度播放。属性：Transition-property：all；所有属性均过渡Transition-duration：1s；设置过渡时间Transition-timing-function:linear;设置运动曲线（...
复制链接

扫一扫

专栏目录