前端杂谈 · Web

CSS线性渐变-圆形渐变-过渡动画-自定义动画

•̀.̫•́✧ · 12月19日 · 2019年本文2467字 · 阅读7分钟318

CSS中动画效果与渐变:

  1. 线性渐变:linear-gradient
  2. 圆形渐变:radial-gradient
  3. 过渡过画:transition
  4. 自定义动画:animation

代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS过渡、渐变、自定义动画</title>
<meta name="阿乞" content="150105.net" />
<style>
#div1{
	width: 300px;height: 50px;
	/*线性渐变:linear-gradient
	background或background-image:指明方向用to right、to left、to top、to bottom,再指明二个颜色值*/
	/*background-image: linear-gradient(to right,red, #fff);*/
	background:linear-gradient(to left,red,#fff);
}
 
#div2{
	width: 200px;
	height: 200px;
	/*圆形渐变:radial-gradient
	二个数字不等的话显示椭圆
	/*background-image: linear-gradient(to right,red, #fff);*/
	background: radial-gradient(100px 50px, red,blue,yellow);
}
 
#div3{
	width: 200px;
	height: 200px;
	background: green;
	/*过渡过画:transition,一般写二个参数,如:transition: all 2s
	多用于hover伪对象,但transition要写在对象里,不是Hover里。hover里有多种效果的时候,就用all
	参数-1:transition-property 默认值是:all,可指定可过渡的属性,如color、background等
	参数-2:transition-duration 默认值是:0,指定对象过渡的持续时间
	参数-3:transition-timing-function 默认值是:ease,指定过渡效果,如linear 、ease-in
	参数-4:transition-delay 默认值是:0 , 指定对象过渡的延迟时间,相当等待多长时间后再执行过渡,一般不要这个*/
	transition: all 0.3s ease-in 1s;
}
#div3:hover{background: red;border: 10px solid blue;opacity: 0.5;transform: translate(500px, 20px);}
 
 
#div4 {
	width: 200px;
	height: 200px;
	border-radius: 100%;
	background: radial-gradient(30px 90px, #333,#fff,#666);
	/*自定义动画:animation,一般写4个参数,如:animation:aname 0.05s linear  infinite 
	使用这个要配合@keyframes 使用
	多用于效果比较复杂的过渡,含有多种效果的时候,以下参数位置可以打乱写
	参数-1:animation-name 定义一个或多个动画名称(identifier标识),如果提供多个属性值,以逗号进行分隔。
	参数-2:animation-duration 指定对象动画的持续时间 
	参数-3:animation-timing-function 默认值:ease
	参数-4:animation-delay 指定对象动画延迟的时间 ,这个一般不写
	参数-5:animation-iteration-count 值 infinite: 无限循环 ,具体数字指定对象动画的具体循环次数 。默认值:1
	参数-6:animation-direction 默认值:normal-正常方向,reverse-反向,alternate-正常再反向,alternate-reverse-先反再正
	参数-7:animation-play-state 默认值:running,其它值:paused: 暂停,这个一般不写
	参数-8:animation-fill-mode 默认值:none,forwards-结束时的状态,backwards-开始时的状态 ,both-结束或开始的状态,用默认值在作圆运动时能表现连续不间断 */
	animation:aname 0.05s linear 1s infinite normal running none;
}
@keyframes aname{
	/*@keyframes:自定一个动画,可以用from to来定义,也可以用百分比来定义动画
	使用from to 的写法
	from{transform: translate(20px,30px);opacity: 1}
	to{transform: translate(20px, 60px);opacity: 0.5;}
	*/
 
	/*使用百分比的写法
	0%{transform: translate(0 10px);opacity: 0}
	50%{transform: translate(300px, 70px);opacity: 1}
	75%{transform: translate(320px, 80px);opacity: 1}
	100%{transform: translate(500px, 600px);opacity: 0;}
	*/
	from{transform: rotate(0deg);}
	to{transform: rotate(359deg);}
}
 
#div4:hover{animation:paused;}
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

运行以上代码通道

//这里贴要运行的代码
0 条回应