java开发后端笔记——0820（CSS动画）

CSS动画

• 圆角边框

  • border-radius(x,x,x,x)：x为数值或百分比，属性从左上角开始按顺时针排列，值越大弧度越大
  • border-radius：50% ——⚪

• 盒子阴影

  • box-shadow：h-shadow v-shadow blur spread color inset ;
  • box-shadow：(水平阴影位置 垂直阴影位置 模糊距离 阴影大小 阴影颜色 阴影类型<inset：内阴影>< outset：外部阴影>)

• 背景属性

  • background-size：指定背景图像的大小
    
  • background-origin 属性指定背景图像的位置。
    • border-box - 背景图片从边框的左上角开始
    • padding-box -背景图像从内边距边缘的左上角开始（默认）
    • content-box - 背景图片从内容的左上角开始

• 线性渐变：Linear Gradients

  • 从上到下的线性渐变(默认)
    background: linear-gradient(red, blue);
    background: linear-gradient(#003322,#ff0000,#99ff00);
  • 从左到右的线性渐变 to right
    background: linear-gradient(to right,#003322,#ff0000,#99ff00);
  • 从左上角到右下角的线性渐变 to bottom right
    background: linear-gradient(to bottom right,#003322,#ff0000,#99ff00);

• 径向渐变：Radial Gradients

  • 颜色结点均匀分布的径向渐变
    background: radial-gradient(red, green, blue,#0099ff);
  • 颜色结点不均匀分布的径向渐变：
    background: radial-gradient(red 60%, green 15%, blue 5%);
  • 形状为圆形的径向渐变 circle
    background: radial-gradient(circle, red, yellow, green);

• 文本阴影：text-shadow

  • text-shadow:h-shadow v-shadow blur color（水平阴影位置 垂直阴影位置 模糊距离 阴影颜色）

• 文本溢出

  • white-space:nowrap 文本不会换行，在同一行继续
  • overflow:hidden 溢出隐藏
  • text-overflow:ellipsis 用省略号来代表被修剪的文本

• CSS 变形（transform）

  • translate(x,y)：向X/Y轴平移
    transform:translate(100px,100px);
    transform: translateX(100px);
    transform: translateY(100px);

  • scale：沿X/Y 缩放 不用加单位
    transform: scale(2);
    transform: scale(2,0);
    transform: scaleX(2);
    transform: scaleY(2);

  • skew：倾斜程度 deg 角度
    transform: skew(30deg,0deg);
    transform: skewX(30deg);
    transform: skewY(30deg);

  • rotate ：图像旋转
    transform: rotate(180deg);

同时达成几个效果：transform：效果1函数 效果2函数 …

• css 过渡 ：transition
  transition:[transition-property(过渡或动态模拟的CSS属性)
  transition-duration(完成过渡所需要的时间)
  transition-timing-function(指定过渡函数)
  transition-delay (过渡开始出现的延迟时间)]

  	<style>
  	img{
  		transition-property: all; 
  		/* 
  			all  变化的东西 ALL 所有与 
  			property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
  		*/
  		transition-duration: 3s;  /*  变化过程的时间 */
  		transition-timing-function: linear; /*匀速变化 */ 
  		/* 
  		 	linear	规定以相同速度开始至结束的过渡效果
  			ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
  			ease-in	规定以慢速开始的过渡效果
  			ease-out	规定以慢速结束的过渡效果
  			ease-in-out	规定以慢速开始和结束的过渡效果
  		 */
  		transition-delay: 0s; /*匀速变化 */
  		/*transition:all 1s linear 0s;*/
  	}
  	</style>
  

  <style>
  	<!--文本颜色渐变-->
  	div{
  		transition: all 3s linear 0s; 
  		text-shadow: 0px 0px 5px #FF0000,
  					0px -3px 6px #11EEBB,
  					0px -6px 7px #01DEFD,
  					0px -9px 8px #0088FF,
  					0px -12px 9px #0088FF;
  	}
  </style>
  

• CSS动画
  • animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  <style>
  	<!-- 设置关键帧 keyframes -->
  	@keyframes spread {
  				0% {
  					width: 0px;
  					height: 0px;
  				}
  				33% {
  					width: 23px;
  					height: 23px;
  				}
  				66% {
  					width: 46px;
  					height: 46px;
  				}
  				100% {
  					width: 69px;
  					height: 69px;
  				}
  			}
  	img {
  		<!-- spread 关键帧 动画3s完成  1s延迟 -->
  		animation: spread 3s 1s;
  		<!-- 动画反向播放-->
  		animation-direction: reverse;
  		<!-- 指定动画播放无限次（永远）-->
  		animation-iteration-count:infinite;
  	}
  </style>		
  

  animation-name:spread (指定要绑定到选择器的关键帧的名称——@keyframes spread)