cssとhtml第3部
38245 ワード
/* */
.box1{
width: 500px;
height: 500px;
/*
background-color
*/
background-color: #bfa;
/*
background-image
- ，
- ，
- ，
- ，
*/
background-image: url("./img/1.png");
/*
background-repeat
：
repeat ， x y
repeat-x x
repeat-y y
no-repeat
*/
background-repeat: no-repeat;
/*
background-position
：
top left right bottom center
， center
：
*/
/* background-position: center; */
background-position: -50px 300px;
} .box1{
width: 500px;
height: 500px;
overflow: auto;
background-color: #bfa;
background-image: url("./img/2.jpg");
background-repeat: no-repeat;
background-position: 0 0;
padding: 10px;
/*
background-clip
：
border-box ，
padding-box ，
content-box
background-origin
padding-box ，background-position
content-box
border-box
*/
/* background-origin: border-box;
background-clip: content-box; */
/*
background-size
- ， auto
cover ，
contain ，
*/
background-size: contain;
background: cover;
/*
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
- backgound ，
，
：
background-size background-position ， /
background-position/background-size
background-origin background-clip ，orgin clip
*/
}
.box2{
width: 300px;
height: 1000px;
background-image: url('./img/1.png');
background-repeat: no-repeat;
background-position: 100px 100px;
/*
background-attachment
-
- ：
scroll
fixed ，
*/
background-attachment: fixed;
}
.box3{
border: 10px red double;
padding: 50px;
width: 500px;
height: 500px;
background: url('./img/2.jpg') #bfa center center/contain border-box content-box no-repeat ;
}
/* */
.box1{
width: 200px;
height: 200px;
/* background-color: #bfa; */
/*
，
！！ ， background-image
，
linear-gradient()
linear-gradient(red,yellow) ， ，
- ，
to left
to right
to bottom
to top
deg deg
turn
- ， ，
repeating-linear-gradient()
*/
/* background-image: linear-gradient(red,yellow,#bfa,orange); */
/* background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); */
background-image: repeating-linear-gradient(to right ,red, yellow 50px);
}
.box1{
width: 300px;
height: 300px;
/*
radial-gradient() ( ) */
/*
-->
-->
-
circle
ellipse
-
- ：
radial-gradient( at , , , )
：
circle
ellipse
closest-side
closest-corner
farthest-side
farthest-corner
：
top right left center bottom
*/
background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
}
/* */
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: */
/* border-spacing: 0px; */
/* border-collapse: collapse; */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 100px;
/* td vertical-align */
vertical-align:middle;
text-align: center;
}
/*
tbody tr，
tbody， tr tbody
tr table
*/
tbody > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* td */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
/* */
.box2{
background-color: #bfa;
transition-property: height , width;
transition-duration: 100ms, 2s;
transition-timing-function: steps(2, start);
transition-delay: 2s;
/* margin-left: auto; */
/* transition:all 2s; */
/*
（transition）
-
- ，
*/
/*
transition-property:
,
， all
，
*/
/* transition-property: height , width; */
/* transition-property: all; */
/*
transition-duration:
：s ms 1s = 1000ms
*/
/* transition-duration: 100ms, 2s; */
/* transition-duration: 2s; */
/*
transition-timing-function:
：
ease ， ， ，
linear
ease-in
ease-out
ease-in-out
cubic-bezier()
https://cubic-bezier.com
steps()
：
end ， ( )
start ，
*/
/* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); */
/* transition-timing-function: steps(2, start); */
/*
transition-delay: ，
*/
/* transition-delay: 2s; */
/* transition ， ， ， ， */
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition: 2s margin-left 2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: alternate-reverse;
animation-play-state: paused;
animation-fill-mode: both;
animation-name: test;
animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
animation-fill-mode: both;
animation-delay: 0s;
animation-play-state: running;
animation-direction: alternate;
animation-duration: 0s;
/* box2 */
/* animation-name: */
/* animation-name: test; */
/* animation-duration: */
/* animation-duration: 4s; */
/* */
/* animation-delay: 2s; */
/* animation-timing-function: ease-in-out; */
/*
animation-iteration-count
：
infinite
*/
/* animation-iteration-count: 1; */
/*
animation-direction
：
normal from to
reverse to from
alternate from to
alternate-reverse to from
*/
/* animation-direction: alternate-reverse; */
/*
animation-play-state:
：
running
paused
*/
/* animation-play-state: paused; */
/*
animation-fill-mode:
：
none
forwards
backwards ，
both forwards backwards
*/
/* animation-fill-mode: both; */
animation: test 2s 2 1s alternate;
}
.box1:hover div{
animation-play-state: paused;
}
/*
， ，
， ，
*/
@keyframes test {
/* from 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to 100%
20%.......
eg：
@keyframes ball {
from{
margin-top: 0;
}
to{
margin-top: 400px;
}
2 to{
margin-top: 400px;
animation-timing-function: ease-in;
}
40%{
margin-top: 100px;
}
80%{
margin-top: 200px;
} */
to{
background-color: red;
margin-left: 700px;
}
}
/* */
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
/*
CSS
-
- transform
- ：
translateX() x
translateY() y
translateZ() z
- ，
*/
/* transform: translateY(-100px); */
transform: translateX(100%);
transform: translateX();
}
/* .box2{
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
} */
.box3{
background-color: orange;
position: absolute;
/*
，
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box4, .box5{
width: 220px;
height: 300px;
background-color: #fff;
float: left;
margin: 0 10px;
transition:all .3s;
}
.box4:hover,.box5:hover{
transform: translateY(-4px);
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
html{
/* 800px，
z ， */
perspective: 800px;
}
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/*
z ， z ， ，
，
z （ ）， ，
*/
transition:2s;
}
body:hover .box1{
transform: translateZ(800px);
}
body:hover .box1{
/*
x y z
rotateX()
rotateY()
rotateZ()
*/
/* transform: rotateZ(.25turn); */
/* transform: rotateY(180deg) translateZ(400px); */
/* transform: translateZ(400px) rotateY(180deg) ; */
transform: rotateY(180deg);
/* */
backface-visibility: hidden;
backface-visibility: initial;
transform: rotateX(10deg);
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
transition:2s;
margin: 100px auto;
transform-origin: 0 0;
/* center*/
/* transform-origin:20px 20px; */
}
.box1:hover{
/*
：
scaleX()
scaleY()
scale()
*/
transform:scale(1.2)
}