preface
First of all, there is no advertising, just to give you a free GIF recording tool, want to learn CSS to do a little bit of small effects to share out to find a good recording GIF tool, found three are watermark and then charge and continue to look for a finally found ScreenToGif, strong Amway!!
So let’s take a look at the cool effects made by CSS (not so cool, hahaha)
The body of the
1. Special effects of cubic boxes
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">* {margin: 0;
padding: 0;
}
html.body{
height: 100%;
}
body{
perspective: 1000px;
background: #0A0A0A;
}
.wrap{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg);
transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg);
-webkit-transition: all 50000s;
transition: all 50000s;
transition-timing-function: linear;
}
img{
width: 200px;
height: 200px;
opacity: 0.7;
border-radius: 50px;
}
.wrap:hover{
-webkit-transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg);
transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg);
}
.wrap div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50px;
/*10px: horizontal, 10px vertical, 200px shadow size */
box-shadow: inset 10px 10px 200px yellow, 0 0 150px #6F6;
}
.wrap div{
-webkit-transform: rotateY(0deg) translate3d(0, 0, 100px);
transform: rotateY(0deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(2){
background: # 000;
-webkit-transform: rotateY(90deg) translate3d(0, 0, 100px);
transform: rotateY(90deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(3){
background: pink;
-webkit-transform: rotateY(180deg) translate3d(0, 0, 100px);
transform: rotateY(180deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(4){
background: skyblue;
-webkit-transform: rotateY(270deg) translate3d(0, 0, 100px);
transform: rotateY(270deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(5){
background: yellow;
-webkit-transform: rotateX(90deg) translate3d(0, 0, 100px);
transform: rotateX(90deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(6){
background: green;
-webkit-transform: rotateX(270deg) translate3d(0, 0, 100px);
transform: rotateX(270deg) translate3d(0, 0, 100px);
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img src="img/1.jpg" alt="">
</div>
<div>
<img src="img/2.jpg" alt="">
</div>
<div>
<img src="img/3.jpg" alt="">
</div>
<div>
<img src="img/4.jpg" alt="">
</div>
<div>
<img src="img/5.jpg" alt="">
</div>
<div>
<img src="img/2.gif" alt="">
</div>
</div>
</body>
</html>
Copy the code2. 3D stereo projection
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: black;
}
.wrap{
width: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
perspective:3000px;
/ * finally added * /
animation: rotateView 10s 4s infinite alternate;
}
/ * finally added * /
@keyframes rotateView{
from{transform: rotateY(0) rotateX(0); }to{transform: rotateY(-360deg) rotateX(-35deg)}
}
.wrap div{
width: 200px;
height: 300px;
position: absolute;
/*1. Direction Specifies the direction. The value can be above, below, left, or right. * 2. Offset defines the reflection offset distance, * 3. Mask-box-image defines the mask image */
-webkit-box-reflect:below 10px -webkit-linear-gradient,0,0,0.5 (transparent, rgba (0)); }/* The fourth value is the size of the shadow, the larger the shadow is */
.wrap div img{transition:0.5 s;box-shadow: 0px 0px 10px 1px white}
.wrap div:nth-child(9){
animation:has_rotate9 0.5 s forwards;
}
@keyframes has_rotate9{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(400deg) translateZ(380px);}
}
.wrap div:nth-child(8){
animation:has_rotate8 0.5 s 0.5 s forwards;
}
@keyframes has_rotate8{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(440deg) translateZ(380px);}
}
.wrap div:nth-child(7){
animation:has_rotate7 0.5 s 1s forwards;
}
@keyframes has_rotate7{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(480deg) translateZ(380px);}
}
.wrap div:nth-child(6){
animation: has_rotate6 0.5 s 1.5 s forwards;
}
@keyframes has_rotate6{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(520deg) translateZ(380px);}
}
.wrap div:nth-child(5){
animation: has_rotate5 0.5 s 2s forwards;
}
@keyframes has_rotate5{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(560deg) translateZ(380px);}
}
.wrap div:nth-child(4){
animation: has_rotate4 0.5 s 2.5 s forwards;
}
@keyframes has_rotate4{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(600deg) translateZ(380px);}
}
.wrap div:nth-child(3){
animation: has_rotate3 0.5 s 3s forwards;
}
@keyframes has_rotate3{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(640deg) translateZ(380px);}
}
.wrap div:nth-child(2){
animation: has_rotate2 0.5 s 3.5 s forwards;
}
@keyframes has_rotate2{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(680deg) translateZ(380px);}
}
.wrap div:nth-child(1){
animation: has_rotate1 0.5 s 4s forwards;
}
@keyframes has_rotate1{
from{transform: rotateY(0deg) translateZ(0px); }to{transform: rotateY(720deg) translateZ(380px);}
}
</style>
</head>
<body>
<div class="wrap">
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
</div>
</body>
</html>
Copy the code3. Accordion menu
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">* {margin: 0;padding: 0}
ul{
list-style: none;
width: 840px;
border: 5px solid black;
margin: auto;
overflow: hidden;
}
li{
float: left;
width: 168px;
transition:1s;
}
img{
vertical-align: top;
}
ul:hover li{
width: 50px;
}
/* This cannot be reversed because it has the same priority. * /
ul li:hover{
width: 640px;
}
</style>
</head>
<body>
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
<li><img src="img4.jpg" alt=""></li>
<li><img src="img5.jpg" alt=""></li>
</ul>
</body>
</html>
Copy the code4. Color gradient
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
width: 800px;
height: 300px;
background: -webkit-linear-gradient(-30deg,red 30px,orange 150px,yellow 280px,pink 500px,blue);
/*-webkit-background-clip: text; * /
color:rgba,0.3 (255255255);text-align: center;
line-height: 300px;
font-size: 100px;
transition: 4s;
}
p:hover{
background-position: 400px;
}
</style>
</head>
<body>
<p>I am Vincent</p>
</body>
</html>
Copy the codeWell, that’s it for a few days. A little special effect.