Catalog
Size adaptation of background drawing
I. css effect attribute
- box-shadow
- text-shadow
- border-radius
- background
- clip-path
1.box-shadow
- Create a sense of hierarchy (three-dimensional)
- Act as a border without width
- Special effect projection drawing
2.text-shadow
- Stereoscopic perception
- Printing quality sense
.container{
margin:0 auto;
max-width: 800px;
font-size: 18px;
line-height: 2em;
font-family: STKaiti;
text-shadow: 1px 1px 0 #aaa;
text-shadow: 0 0 1px rgba(128,128,128,.2);
background: black;
text-shadow: -1px -1px 0 white,
-1px 1px 0 white,
1px -1px 0 white,
1px 1px 0 white;
background: black;
text-shadow: 0 0 2px white;
}3.border-radius
- Fillet rectangle
- Circular type
- Semicircle
- Sector
- Strange patterns
.container{
width: 0;
height: 0;
background: red;
border: 10px solid green;
border-radius: 10px; /*Fillet rectangle */
border-radius: 50%; /*Circular*/
border-top-left-radius: 100px 50px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;/*Sector*/
border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;/*Quasi ellipse*/
}
4.background
- texture
- pattern
- Gradual change
Sprite animation
.container{
}
.i{
width: 20px;
height: 20px;
background: url(./background.png) no-repeat;
background-size: 20px 40px;
transition: background-position .4s;/*Animation time*/
}
.i:hover{
background-position: 0 -20px;/*Upward displacement*/
}
Size adaptation of background drawings
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: contain;
/*Not full of container, but the aspect ratio does not change completely*/
background-repeat: no-repeat;/*No repetition*/
background-position: center center;/*Centered*/
background-size: cover; /*Full of container but with constant aspect ratio*/
}5.clip-path
- Support animation
- Crop container
- Common geometry
- Custom path
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding:10px;
clip-path: inset(100px 50px);/*Cut into square without change of occupation*/
clip-path: circle(50px at 100px 100px); /*Cut the space into a circle*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); /*Space occupying unchanged cut into diamond*/
clip-path: url(#clipPath);
/* background-size: cover; */
transition:clip-path .4s;
}Clip path animation:
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding:10px;
clip-path: circle(50px at 100px 100px); /*No change of space occupation*/
transition:clip-path .4s;
}
.container:hover{
clip-path: circle(80px at 100px 100px);
}svg effect:
<svg> <defs> <clipPath id="clipPath"> <circle cx="60" cy="60" r="50" fill="#34538b" /> <!-- circular --> <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon> <!-- Five-pointed star --> </clipPath> </defs> </svg>
6.3D transformation
Transform transform:
Chromon rotation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:50px;
padding: 10px;
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
perspective: 500px;/*The smaller the stereo effect value, the closer you look*/
}
#cube{
width:200px;
height:200px;
transform-style: preserve-3d;/*3D perspective*/
transform: translateZ(-100px);
transition:transform .4s;/*Add transition animation*/
}
#cube div{
width: 200px;
height:200px;
position: absolute;
line-height: 200px;
font-size:50px;
text-align: center;
}
#cube:hover{
/* transform: translateZ(-100px) rotateX(270deg); */
transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
}
.front{
transform: translateZ(100px);
/* transform: translateX(100px); */
/* transform: translateX(100px) translateY(10px) rotate(25deg); */
/* transform: rotate(25deg) translateX(100px) translateY(10px); */
background:rgba(255,0,0,.3);
}
.back{
/* transform: translateZ(-100px); */
transform: translateZ(-100px) rotateY(180deg);
background:rgba(0,255,0,.3);
}
.left{
transform: translateX(-100px) rotateY(-90deg);
background:rgba(0,0,255,.3);
}
.right{
transform: translateX(100px) rotateY(90deg);
background:rgba(255,255,0,.3);
}
.top{
transform: translateY(-100px) rotateX(-90deg);
background:rgba(255,0,255,.3);
}
.bottom{
transform: translateY(100px) rotateX(90deg);
background:rgba(0,255,255,.3);
}
</style>
</head>
<body>
<div class="container">
<div id="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
</body>
</html>