css3动画--css3阴影--css3渐变

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

qq_42589571

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

阅读量255

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_42589571/article/details/104442496

版权

css3动画

@keyframes 规则是用于创建动画的，在规则中必须设置：
1.动画时长
2.动画名称
后续需要通过动画的名称来绑定到特定的选择器上实现效果。

@keyframes 
{
0% {background: red;}
100%{background: yellow;}
}

什么是动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果
0%开始动画，100%结束动画，在这之间可以设置任意多次的变化

多次变化：

@keyframes 
{
0% {background: red;}
50%{background:blue}
100%{background: yellow;}
}

css3动画效果transition

transition（过度）：
即从一个效果逐渐变为另一个效果
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速…
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
复合写法：
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all;
当过度时间和延迟时间都存在时有顺序，前面一个是过度的总时间，后面一个是延迟时间。

 transition:2s 3s linear all  linear;

以上表示过度时间为2s，延迟3s，都匀速变化。
下面来做一个实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
				transition: all 1s 2s linear;
			}
			#box:hover{
				width: 200px;
				height: 50px;
				background: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

动画开始前：

动画结束：
在这里插入图片描述

css3之 transform变形：

translate : 位移
transform:translate(100px,100px); : 两个值分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )
scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() 3
rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或弧度rad
3d
rotateX()
rotateY()
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，
针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。

注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
    先执行后面的操作，在执行前面的操作。
    位移会受到后面要执行的缩放、旋转和斜切的影响。

tranform-origin 基点位置 ?

主要是针对旋转和缩放，默认都是中心点为基点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
				transition: all 1s linear;
			}
			#box:hover{
				transform: rotate(30deg);
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

animation动画：

逐帧动画，将运动过程分成100份。
动画名称：animation-name
动画持续时间：animation-duration
动画的延迟时间：animation-delay
动画的重复次数： animation-iteration-count
（默认值就是1 ，infinite无限次数）
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%_{100%)，一次反向(100%}0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%

animation: move 1s 2s linear forwards;

运行结果：

css3渐变

在两个或多个指定的颜色之间显示平稳的过渡。
两种类型的渐变：
线性渐变:方向向下/向上/向左/向右/对角方向

background-image:linear-gradient( red , yellow 50%, green 100%);
默认是
从上到下：to bottom
从下到上：to top
从左到右：to right
从右到左：to left
有角度：
background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

在这里插入图片描述
径向渐变：由它们的中心定义
background-image: radial-gradient(red, yellow, green);

例：
布局：

<div id="box">
		</div>

css：

#box{
				width: 300px;
				height: 30px;
				border: 1px solid #000000;
				background-image:linear-gradient( to right top, orangered 25% , white 25%, white 50% , orangered 50% ,  orangered 75%, white 75%);
				background-size: 30px;
			}

运行结果：
在这里插入图片描述
在让进度条动起来：
css

css3阴影

1. box shadow：

向框添加一个或多个阴影
盒阴影：
box-shadow
x：水平阴影
y：垂直阴影
blur : 模糊值
spread : 范围
color：颜色（默认颜色为黑色）
inset : 内阴影 outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)

box-shadow: 5px 5px 10px #ccc;

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			   #box{ 
			   	margin: 50px;
			   	width: 100px;
			   	height: 150px;
			   	box-shadow: 5px 5px 10px #ccc;
    		}
		</style>
	</head>
	<body>
		<div id="box">
		</div>
	</body>
</html>

结果：
在这里插入图片描述
文本阴影：
text-shadow
x：水平阴影
y：垂直阴影
blur : 模糊值
color：颜色
默认阴影颜色和文字颜色相同

box-shadow: 5px 5px 10px #red;

多阴影：
阴影可设置多个

例：可以利用多阴影设置火焰字
布局部分：

<div id="box">
			火焰字qwq
		</div>

css部分：

#box{
				width: 200px;
				margin: 50px auto;
				font-size: 40px;
				text-shadow: 0 0 4px white,0 -5px 4px #ff3,3px -10px
				 5px #EE9900,-3px -15px 10px #DF5000,3px -25px 20px #BD2C00;
			}

最终效果：
在这里插入图片描述

qq_42589571

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画--css3阴影--css3渐变

css3动画@keyframes 规则是用于创建动画的，在规则中必须设置：1.动画时长2.动画名称后续需要通过动画的名称来绑定到特定的选择器上实现效果。@keyframes {0% {background: red;}100%{background: yellow;}}什么是动画？动画是使元素从一种样式逐渐变化为另一种样式的效果0%开始动画，100%结束动画，在这之间可以...
复制链接

扫一扫