[ Written in the front ] I have been obsessed with CSS special effects for the past two days, and even thought about using CSS to make cartoons. I hope I can do it later. Today I mainly talk about buttons, which are common elements on our pages. Many times, buttons It also needs to be advanced, but many people suffer from no way to find it, so I would like to take this opportunity to share with you how to achieve advanced button dynamic effects, main line dynamic buttons, and floating reflection effects.
[ Involved knowledge points ]: CSS3 realizes advanced buttons, CSS realizes button animation special effects, CSS realizes dynamic button effects, CSS realizes button light and shadow effects, box-reflect realizes reflection effects, and Animation realizes animation effects.
[ Effect display ] Not much else to say, let's see the effect first:
You are invited to click here for the entrance of the emperor list
Table of contents
1. Implementation principle
Copyright Statement : Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane , If you have any doubts, please leave a message and send a private message!
1.1transform attribute to achieve movement
Transform setting translate value setting
Translate(x, y) takes the center as the base point and translates the element according to the set x, y parameter value. The
animation effect we set is inseparable from the setting of the moving attribute value. I am in the element A negative 50% offset is set on the dom node pseudo-element before.
transform: translate(-50%, -50%);
The page effect after adding is as follows:
1.2Animation set animation properties
In fact, this step is the most critical, I set as follows:
.btn::before {
content: '';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 300%;
background-color: #000;
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0 0;
background-image: conic-gradient(var(--color), var(--color));
animation: rotate 2s linear infinite;
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
Which is set to run the full loop for 2 seconds and then never stop.
The effect is as follows:
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane , If you have any doubts, please leave a message and send a private message!
1.3box-reflect set the reflection effect
box-reflect: includes 3 values (direction, offset, mask).
Direction:
direction defines the direction, and the values include above, below, left, and right.
above: specifies that the reflection is above the object
below: specifies that the reflection is below the object
left: specifies that the reflection is on the left side of the object
right: specifies that the reflection
is offset
on the right side of the object mainly for the distance between the reflection and the image, and can also be a negative value
Mask
The image will cover the projection area. If this parameter value is omitted, it defaults to an unmasked image.
I set it as follows:
.btn {
position: relative;
z-index: 0;
width: 160px;
height: 80px;
line-height: 80px;
color: var(--color);
font-size: 24px;
border-radius: 10px;
text-align: center;
margin: auto;
overflow: hidden;
cursor: pointer;
transition: .3s;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
}
The overall page reflection effect is as follows:
2. Complete source code package sharing
Baidu network disk download address
Link: https://pan.baidu.com/s/1k53AEACJ1MudpiDKxv4iZQ
Extraction code: hdd6
123 cloud disk download address
Link: https://www.123pan.com/s/ZxkUVv-OzJ4.html
Extraction code: hdd6
Easter Egg List
Dedicated to creating a masterpiece, I would like to solve your confusion. If you are lucky, I hope you will be on the list. Thank you very much! Click here for the entrance of
Huangbang