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>

在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐