Visualization big screen is basically data visualization, and the theme is mainly science and technology. Here are some simple CSS effects that may be useful to you, and will be updated if there are others.

1. Calibration lens rotation effect with mask

Like this scale down here

The aim is to make the scales on the top and bottom half disappear gradually when the lens rotates, and only the scales on the left and right sides can be seen. At this point, you can use a mask. Use a gradient mask to mask the top and bottom scales. The mask effect is as follows:

mask-image
linear-gradient 

.box {
    -webkit-mask-image: linear-gradient( to bottom, transparent, orange, transparent ); // Add mask mask middle color is not important/* -webkit-mask-repeat: no-repeat; * /
    /*
    ...省略
    */
}
Copy the code

To demonstrate the address online, change the color block to a graduated picture and rotate it.

2, breathing lamp effect

This effect can be added where it needs to be highlighted, for example:




brightness


@keyframes breath_light {
    0% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(220%);
    
    100% {
        filter: brightness(100%); }}Copy the code

Use:

animation: breath_light 3s ease infinite;
Copy the code

3. Scanning effect

The scan should be a common shot in many science fiction films. The length of the scan shadow can be modified according to the page theme. I added the scan effect to a title background:


The length of the scanned shadow can be adjusted by adjusting the position of Linear-gradient transparent color and the width of the pseudo-element

.container-title-scanning{
    position: relative;
    overflow: hidden;
    &::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        width: 30px;
        height: 100%;
        background-image: linear-gradient(to right, transparent 0%.#00ffff 100%);  
        z-index: -10;
        animation: scanning 2s infinite linear;
        opacity: 0.7; }}/* Define a left-to-right scan animation */
@keyframes scanning {
    0% {
        left: 0; 
        opacity: 0.7;
    }
    90% {
        left: 100%;
        opacity: 0.3;
    }
    100% {
        right: -20px;
        opacity: 0; }}Copy the code

Use:

<div class="container-title">
    <span class="title-text container-title-scanning">Project analysis</span>
</div>
Copy the code