CSS 3 中二维三维以及渐变过程简单总结 及效果(动图不好发)
一. 不动,区域内的变化(本质生产一张图片)
/*渐变
1 长方形之渐变先定义长方形的宽高大小(好观察最好加边框)
/*方向 颜色 位置*/
利用 background-image: -webkit-linear-gradient(right top,red 50% ,blue 50%);
2 大圆中小圆变色 先做一个大圆
/*变化圆心 从内到外依次填充颜色*/
background-image: -webkit-radial-gradient(50% 50%,yellow 20% ,red 50%, pink 55%, blue 100%);
/*也可以在矩形中以圆渐变*/
3 倒影
.testb{
background-image: url(img/5.jpg);
height: 200px;
/*方向 间距 渐变*/
/*上 above 下below*/
/*1 倒影不占文档流的空间 层级高于文档流
2 倒影是针对标签(宽高)进行的*/
-webkit-box-reflect: above 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%);
}
4 边框比较宽并且4个边框颜色不一样,在相遇的角会形成颜色不一的三角形,(内容为0做圆后可以制作吃豆豆,)
5 border-radius: 50px 0 50px 50px;用于切圆角
椭圆的制作
.textG{
width: 200px;
height: 100px;
border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
}
二.二维平面内的移动
.test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋转 平移 缩放 )
transition: all 3s ease .5s;(变化过程)}
.test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}
三种效果也可分开单独用,并且不同先后顺序效果不同
三.三维空间内的动画效果
body{perspective:1000px;}/*在body中加透视点*/
.父标签{ transform-style:preserve-3d;}/*在其父标签中开3D效果*/
.test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋转 平移 缩放 ) (没动之前的初始值,可以不加,有默认值)
transition: all 3s ease .5s;(变化过程必须有)}
.test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}(变化后的位置)
/*在开3D效果下 可以设置Z轴效果*/
四.帧动画
@keyframes 动画名(自取){
0%(from){transform:…}
?% {transform:…}
?% {transform:…}
100%(to){transform:…}
}
.test:hover{
/*动画效果的赋值方式和transition一样*/
animation:movet 1s ease;
/*动画执行的字数无限循环 infinite */
animation-iteration-count: infinite;
}
