css中的transiton动画

最新推荐文章于 2024-04-25 16:16:15 发布

忆昔年.

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量566

点赞数 2

分类专栏：前端 CSS HTML

本文链接：https://blog.csdn.net/rt5476238/article/details/85635222

版权

前端同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

一、CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)

曲线设置网站：https://matthewlein.com/ceaser/
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style type="text/css">
		body{
			background-color: orange;
		}
		.box{
			background-color: rgba(0,0,0,0.7);
			width: 100px;
			height: 100px;
			transition: width 0.5s ease,/*也可以同时设置多个过渡属性*/
				height 0.5s ease,
				background-color 0.5s ease,
				border-radius 0.5s ease;
			margin: 100px auto;
			 box-shadow:10px 10px 5px 2px pink;
		}
		.box:hover{
			width: 500px;
			height: 300px;
			background-color: rgba(0,0,0,0.5);
			border-radius: 50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

二、CSS3圆角、阴影、rgba

1、CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

2、CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->

3、rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

忆昔年.

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录