渐变
线性渐变
div{
height: 300px;
width: 300px;
border: 10px solid gray;
/* background: linear-gradient(red,yellow); */
/* background: linear-gradient(to top,red,yellow); */
background: linear-gradient(90deg,red,yellow);
/*
支持多颜色渐变
支持方向 to left....to bottom right...
支持角度的写法
*/
}
径向渐变
重复渐变
太极案例
实现方法
div{
width: 200px;
height: 200px;
border: 1px solid gray;
background: linear-gradient(white 50%,black 50%);
margin: auto;
display: flex;
align-items: center;
border-radius: 50%;
}
div::before{
content:"";
width:100px;
display: block;
height: 100px;
background:radial-gradient(white 25%,black 25%);
border-radius: 50%;
}
div::after{
content:"";
width:100px;
display: block;
height: 100px;
background:radial-gradient(black 25%,white 25%);
border-radius: 50%;
}
过渡动画
div{
width: 200px;
height: 200px;
background:yellow;
transition: all 2s linear 1s;
}
/* all 所有属性
2s 动画时间
linear 匀速
1s 延迟
除了 display:none/block属性不行
*/
div:hover{
width: 400px;
height: 600px;
background: red;
}
在菜单中的过渡动画
2D属性-transfrom
缩放
改变中心点的位置移动
旋转
rotate中心,正值顺时针,负值逆时针=====rotateZ
扇子打开案例
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul{
margin: 10px auto;
width: 600px;
height: 400px;
border:5px solid gray;
position: relative;
}
li{
position: absolute;
width: 60px;
height: 200px;
left:50%;
text-align:center;
margin-left: -30px;
bottom: 30px;
transform-origin: bottom center;
border-radius: 10px;
transition: all 2s;
}
ul li:not(:nth-child(7)){
opacity: 0;
}
ul:hover li{
opacity: 1;
}
ul li:nth-child(1),ul li:nth-child(13){
background: purple;
}
ul li:nth-child(2),ul li:nth-child(12){
background: darkblue;
}
ul li:nth-child(3),ul li:nth-child(11){
background: deeppink;
}
ul li:nth-child(4),ul li:nth-child(10){
background: deepskyblue
}
ul li:nth-child(5),ul li:nth-child(9){
background: green;
}
ul li:nth-child(6),ul li:nth-child(8){
background: yellow;
}
ul li:nth-child(7){
background: red;
}
ul:hover li:nth-child(1){
transform: rotate(90deg);
}
ul:hover li:nth-child(13){
transform: rotate(-90deg);
}
ul:hover li:nth-child(2){
transform: rotate(75deg);
}
ul:hover li:nth-child(12){
transform: rotate(-75deg);
}
ul:hover li:nth-child(3){
transform: rotate(60deg);
}
ul:hover li:nth-child(11){
transform: rotate(-60deg);
}
ul:hover li:nth-child(4){
transform: rotate(45deg);
}
ul:hover li:nth-child(10){
transform: rotate(-45deg);
}
ul:hover li:nth-child(5){
transform: rotate(30deg);
}
ul:hover li:nth-child(9){
transform: rotate(-30deg);
}
ul:hover li:nth-child(6){
transform: rotate(15deg);
}
ul:hover li:nth-child(8){
transform: rotate(-15deg);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</body>
多属性
倾斜
关键帧动画
div{
width: 200px;
height: 200px;
background: red;
animation: cxl2 6s linear infinite;
/* infinite 无限次执行 */
}
/* 声明动画 */
@keyframes cxl1 {
from{
width: 200px;
height: 200px;
background: red;
}
to{
width: 200px;
height: 400px;
background: blue;
}
}
@keyframes cxl2 {
0%{
width: 200px;
height: 200px;
background: red;
}
20%{
width: 400px;
height: 200px;
background: yellow;
}
40%{
width: 400px;
height: 200px;
background: green;
}
60%{
width: 400px;
height: 200px;
background: black;
}
80%{
width: 400px;
height: 200px;
background: yellow;
}
100%{
width: 200px;
height: 400px;
background: blue;
}
}
div{
height: 100%;
width: 200px;
background-color: red;
position: fixed;
left: 0px;
top:0px;
transform: translateX(-100%);
animation: run 1s forwards;
animation: run 1s forwards reverse;
/* animation-fill-mode: forwards; */
/* forwards:保留最后画面
backwards:初始画面
none:默认值 */
}
@keyframes run {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0);
}
}
关键帧轮播案例
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 640px;
height: 300px;
margin: auto;
overflow: hidden;
}
.box img{
width: 640px;
height: 300px;
}
.box2{
width: 9999px;
animation: run 5s linear infinite;
}
//鼠标移上去暂停,移开滚动
.box2:hover{
animation-play-state: paused;
}
@keyframes run {
0%{
transform: translateX(0);
}
5%{
transform: translateX(-640px);
}
25%{
transform: translateX(-640px);
}
30%{
transform: translateX(-1280px);
}
50%{
transform: translateX(-1280px);
}
55%{
transform: translateX(-1920px);
}
75%{
transform: translateX(-1920px);
}
80%{
transform: translateX(-2560px);
}
100%{
transform: translateX(-2560px);
}
}
.box3{
float: left;
}
</style>
<body>
<div class="box">
<div class="box2">
<div class="box3"> <img src="01.jpeg" alt=""></div>
<div class="box3"> <img src="02.jpeg" alt=""></div>
<div class="box3"> <img src="03.jpeg" alt=""></div>
<div class="box3"> <img src="04.jpeg" alt=""></div>
<!-- 为了实现无缝轮播,第一张和最后一张一样 -->
<div class="box3"> <img src="01.jpeg" alt=""></div>
</div>
</div>
</body>
逐帧动画
div{
width: 200px;
height: 200px;
background: red;
/* animation: run 5s steps(1,start); */
animation: run 5s step-start;
/* end(保留当前帧,看不到最后一帧,动画结束看不见) */
/* start(保留下一帧,看不见第一帧,从第一帧很快跳到最后一帧 */
}
@keyframes run {
0%{
background: red;
}
50%{
background: green;
}
100%{
background: yellow;
}
}
step案例
div{
width: 252px;
height: 300px;
background-image: url(./cat.png);
animation: run 2s step-end infinite;
}
@keyframes run {
0%{
background-position: 0px 0;
}
20%{
background-position: -252px 0;
}
40%{
background-position: -504px 0;
}
60%{
background-position: -756px 0;
}
80%{
background-position: -1008px 0;
}
100%{
background-position: -1008px 0;
}
}
Animate.css---------css3动画库
vs中引入,在class中使用
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
animate.css/3.5.1/animate.min.css">
<div class="animated bounce"></div>
兼容性在 Can I use... Support tables for HTML5, CSS3, etc网站中查询
3D部分
.box{
width: 500px;
height: 500px;
margin: 20px auto;
border: 3px solid black;
transform-style: preserve-3d;
position: relative;
/* transform: rotateY(30deg); */
perspective: 900px;
/* 设置景深 */
}
.center{
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
background-color: red;
margin-top: -100px;
margin-left: -100px;
/* transform: translateZ(100px); */
transition: all 2s;
}
.box:hover .center{
transform: translateZ(900px);
/* transform: translate3d(x,y,z); */
}
前面三个值取值0-1
3d缩放
立方体
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 600px;
margin: 20px auto;
border: 3px solid black;
position: relative;
transform-style: preserve-3d;
transform: rotateY(30deg) rotateX(30deg);
animation: run 6s linear infinite;
}
@keyframes run {
0%{
transform: rotateY(30deg) rotateX(30deg);
}
50%{
transform: rotateY(300deg) rotateX(300deg);
}
100%{
transform: rotateY(30deg) rotateX(30deg);
}
}
.box div{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
line-height: 200px;
text-align: center;
font-size: 50px;
color: #fff;
opacity: 0.8;
}
.box div:nth-child(1){
background: gray;
transform: translateZ(100px);
}
.box div:nth-child(2){
background: blue;
transform: translateX(-100px) rotateY(-90deg);
}
.box div:nth-child(3){
background: yellow;
transform: translateY(-100px) rotateX(90deg);
}
.box div:nth-child(4){
background: pink;
transform: translateY(100px) rotateX(-90deg);
}
.box div:nth-child(5){
background: purple;
transform: translateX(100px) rotateY(90deg);
}
.box div:nth-child(6){
background: orange;
transform: translateZ(-100px);
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>