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

CSS中动画效果与渐变：

线性渐变：linear-gradient
圆形渐变：radial-gradient
过渡过画：transition
自定义动画：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>

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

CSS中动画效果与渐变：

代码

在网页字体加载期间所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

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

CSS中动画效果与渐变：

代码

在网页字体加载期间 所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

在网页字体加载期间所有文本都保持可见状态