CSS——过渡和动画

最新推荐文章于 2024-08-04 20:38:28 发布

PY_XAT_SFZL

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量96

点赞数

分类专栏：视频笔记文章标签： css css3 animation html

本文链接：https://blog.csdn.net/PY_XAT_SFZL/article/details/117772766

版权

视频笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

过渡效果
- 米兔练习
动画

过渡效果

 .box2{
            background-color: #bfa;

过渡（transition）
           - 通过过渡可以指定一个属性发生变化时的切换方式
           - 通过过渡可以创建一些非常好的效果，提升用户的体验

             transition-property: 指定要执行过渡的属性  
                多个属性间使用,隔开 
                如果所有属性都需要过渡，则使用all关键字
                大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
           
              transition-duration: 指定过渡效果的持续时间
              时间单位：s 和 ms  1s = 1000ms
                         
             transition-timing-function: 过渡的时序函数
                指定过渡的执行的方式  
                可选值：
                    ease 默认值，慢速开始，先加速，再减速
                    linear 匀速运动
                    ease-in 加速运动
                    ease-out 减速运动
                    ease-in-out 先加速 后减速
                    cubic-bezier() 来指定时序函数
                        https://cubic-bezier.com
                    steps() 分步执行过渡效果
                        可以设置一个第二个值：
                            end ， 在时间结束时执行过渡(默认值)
                            start ， 在时间开始时执行过渡
             
             
            /* margin-left: auto; */
            /* transition:all 2s; */

            /* transition-property: height , width; */
            /* transition-property: all; */

             /* transition-duration: 100ms, 2s; */
             /* transition-duration: 2s; */

             /* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); */
             /* transition-timing-function: steps(2, start); */


             /* 
             transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡  
             */
             /* transition-delay: 2s; */
             

             /* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */
             transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
        }

        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
            }

在这里插入图片描述

米兔练习

在这里插入图片描述

动画

变形（定位XYZ）

需要开启那个视图
在这里插入图片描述

animation 速度曲线

在这里插入图片描述

小练习（一个漂浮的超链接）

#box1{
		
		width: 460px;
		height: 90px;
		/* background-image: url(roft.png); */
		/* animation-timing-function: ; */
		animation-name: move;	
		animation-duration: 10s;
		animation-iteration-count: infinite;
		position: relative;
		overflow: hidden;
		animation-direction: alternate;
		/*动画应该轮流反向播放。	*/
		animation-timing-function: cubic-bezier(2,.55,5,.55);
		
	}
	
	#box1:hover{
		
		animation-play-state: paused;
		
		
	}
	
	@keyframes move{
		from{
			
			margin: 0 0;
			background-position: 0 0;
			
		}
		to{  
			
		background-position: right bottom; 
		
			/* background-position: 0; */
			margin:640px 840px ;
		}
	}`

自己找一张图片（雪碧图）放到路径下就可以看到效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		
		
		<link rel="stylesheet" type="text/css" href="动画.css"/>
	<style type="text/css">
		
/* 		img{
			width: 460px;
			height: 90px;
		}
		 */
	</style>
		
	</head>
	<body>
		
		
		<div id="box1">
			
		<a href="javascript:;" title="超链接" ><img src="roft.png"><img></a>
		
			
		</div>
		
		
		
		
	</body>
</html>

贝塞尔函数

官网地址：https://cubic-bezier.com/#.17,.67,.83,.67

可以指定动画过渡的移动曲线

3d相册的一个小demo部分

在这里插入图片描述

PY_XAT_SFZL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS——过渡和动画

CSS过渡效果米兔练习动画过渡效果 .box2{ background-color: #bfa;过渡（transition） - 通过过渡可以指定一个属性发生变化时的切换方式 - 通过过渡可以创建一些非常好的效果，提升用户的体验 transition-property: 指定要执行过渡的属性多个属性间使用,隔开如果所有属性都需要过渡
复制链接

扫一扫