Cloud development gradients and animations

CSS is the perfect combination of programming technology and design art, programming elegance lies in the clear readability of the code, and design elegance lies in the combination of technology to bring users a feast of vision and interaction. With CSS, not only can graphic designers often use filters, gradients and other design effects, but also can design some interactive animation, enhance the user experience.

The gradient of CSS

Color gradients are essential for designers, and the CSS linear-gradient() function is used to create a picture that represents linear gradients in two or more colors.

Technical documentation: CSS gradient property linear-gradient

Use the developer tool to create a new gradient page, and then enter the following code on the gradient.wxml page:

<view class="gradient-display">
    </view>

Enter in gradient.wxss:

.gradient-display{
      background-image:linear-gradient(red, blue);
      width: 100vw;
      height: 100vh;
      }
  
.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }

We found that because the background picture uses the linear-gradient property, its default gradient direction is from top to bottom, the first color (red here) is the start color, and the second color (here is blue blue) is the stop color.

Replace the values of backgound-image in .gradient-display with the following in turn:

改变渐变的方向
background-image: linear-gradient(45deg, blue, red);
    /* 渐变轴为45度，从蓝色渐变到红色 */

You can also write like this, the specific meaning of the code can be referred to the technical documentation to understand

background-image:linear-gradient(to left top, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */

Add more color changes

background-image:linear-gradient(0deg, blue, green 40%, red);
    /* 从下到上（渐变轴为0度），从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

The percentage of colors

background-image: linear-gradient(19deg, rgb(33, 212, 253) 0%, rgb(183, 33, 255) 100%);

Small tasks: Refer to the radial gradient technical documentation below examples to implement a case of radial gradient in a small program. Through the actual way, understanding technical documents is like a dictionary, early learning does not have to do all understand, can be used on the line.

Filter filter

Filters are no strangers to designers, and CSS also has filter filter properties that allow you to perform Gaussus blur, adjust contrast, convert to grayscale images, color rotation, picture transparency, and more.

Compared to the filter effect of tools such as Photoshop, CSS can be used to process image filter effects in bulk, and programmatic means can not only overlay various effects, but also can be combined with interaction.

Here we mainly introduce the three most used filter effects, Gauss fuzzy bluur, picture grayscale (%), picture transparent opacity (%), other filter effects you can read the technical documentation later.

Technical documentation: Filter properties

Use the developer tool to create a new filter page and enter it at filter.wxml:

<view class="filter-display">
        <view>blur高斯模糊</view>
        <image class="blur" mode="widthFix" src=//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        <view>grayscale图片变灰</view>
        <image class="grayscale" mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        <view>opacity图片透明</view>
        <image class="opacity" mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        <view>多个滤镜叠加，注意css的写法即可</view>
        <image class="multiple" mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
    </view>

Then enter in filter.wxss:

    .filter-display img{
            width: 150px;height: auto;
        }
        .blur{
            filter: blur(8px);
        }
        .grayscale{
            filter: grayscale(90%);
        }
        .opacity{
            filter: opacity(25%);
        }
        .multiple{
            filter: blur(8px) grayscale(90%) opacity(25%);
        }

The picture changes from gray to color

In practice, many different color systems of pictures will be added to the site, such as partner logos, guest photos, news pictures, etc. , in order to make the photos and the site color system consistent, so all images need to be unified filter processing, and graying the picture is a more common practice.

Sometimes we add an interactive effect to these grayed-out pictures, which change from gray to color when the mouse hovers over the picture.

Enter the following code at filter.wxml:

<view class="filter-display">
        <text>将鼠标悬停（模拟器）或手指（手机微信）按住或放开图片查看效果</text>
        <view class="grayscale" hover-class="grayscale-hover" >
          <image mode="widthFix"  src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

In the technical documentation view component, we can see that hover-class is the style class specified to press down.

Add the following styles to the filter.wxss:

.filter-display image{
      width: 150px;height: auto;
    }
    .grayscale{
      filter: grayscale(90%);
    }
    .grayscale-hover{
      filter:grayscale(0);
    }

Gauss's fuzzy background

Gauss fuzzy is a special effect that UI designers often use. Graphic designers typically design images manually and manually, while UI designers can combine CSS to add uniform styles to all images in the same category, such as the background we want for each user's info page and the background at the top of each article.

Enter the following code at filter.wxml:

<view class="userinfo-display">
        <view class="blur-bg"></view>
        <view class="user-img">
            <image src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

Add the following styles to the filter.wxss:

.blur-bg {
        width: 750rpx;height: 300rpx;overflow: hidden;
        background: url(https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/blurimg.jpg);
        background-size: cover;
        position: fixed;
        filter: blur(15px);
        z-index: -1;   
    }
    .user-img{
        width: 750rpx;height: 300rpx;
        display: flex;
        justify-content: center; 
        align-items:center;   
    }
    .user-img image {
      width: 80rpx;height: 80rpx;
      border-radius: 100%;
      }

UI designers don't work with web element designs like graphic designers can differentiate each element, after all, CSS can't be as complex as design tools like Photoshop, but he can do it in bulk. So compared to graphic designers, UI designers pay more attention to monotony and unity.

Deformed property Transform

The CSS transform property rotates, scales, tilts, or pans a given component by modifying the coordinate space of the CSS visual formatting model.

Regarding the technical documentation of transforming Transform, transition Transition, animation, we should not rush to study, a cursor look at it, and then have time to study it again.

Technical documentation: CSS deformation property transform

Use the WeChat developer tool to create a new transform page and enter the following code in transform.wxml

<view class="transform-display">
        <view>缩放,scale(x,y)，x为长度缩放倍数，y为宽度缩放倍数，如果只有一个值，则是长和宽缩放的倍数</view>
        <image class="scale"  mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
        <view>平移,translate(x,y)，x为x轴平移的距离，y为y轴平移的距离，如果只有一个值，则是x和y轴缩放的距离，值可以为负数</view>
        <image class="translate" mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>旋转,rotate()里的值为旋转的角度</view>
       <image class="rotate"  mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>倾斜,skew()里的值为旋转的角度</view>
       <image class="skew"  mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

Add the following styles to the transform.wxss file:

.transform-display image{
      width: 80px;height: 80px;
      }
    .scale{
        transform: scale(1,0.5);
    }
    .translate{
        transform: translate(500px,20px);
    }
    .rotate{
        transform: rotate(45deg);
    }
    .skew{
        transform: skew(120deg);
    }

Transition property Transition

CSS transitions control the transition effect of a component when it switches from one property state to another.

Technical documentation: CSS transition property Transition

It is recommended that we only use short-form properties transition, multiple properties together to write will be better, transition syntax is as follows, syntax is more complex, we can combine the actual case behind

.selector {
        transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    }

• transition-property, the name of the CSS or animation property that applies the transition;
• transition-duration, the entire transition effect lasts for a long time, the default time is 0 seconds, so to have a transition effect this must be defined;
  • transition-timing-function, which specifies the time curve of the transition effect, defaulting to ease;
  • transition-delay, how long the transition effect is delayed, or when to start, the default is 0 seconds, undefined words is to start directly;

Changes in background color

Also enter the following code into the page of the small program to see the effect in a real-world way.

Use the developer tool to create a new transition page, and then enter the following code in the transition.wxml page:

<view class="transition-display">
        <view class="box bg-color" hover-class="bg-color-hover"></view>
    </view>

Then enter it in transition.wxss:

.box{width: 150px;height: 150px;cursor: pointer;}
    .bg-color{
        background-color:green;
    }
    .bg-color-hover{
        background-color: yellow;
        transition: background-color 5s ease-out 3s;
    }

Animation needs to be triggered, here we are using hoverover-class to trigger the effect, put the mouse on the element for more than 8 seconds, to see what changes in the background color of the square.

Now that we understand the effect, let's combine the actual case to understand the syntax:

• Because we use hover to trigger, so transition to be written in the element of the hover-class, the box in the background is green green, hover background is yellow yellow;
• Because we change the box background-color, so transition needs to transition the CSS property name, that is, background-color;
• The animation transition lasts for 5 seconds, which is when the background changes from green to yellow;
• The ease-out here (slow end) is the time curve effect of the color transition. Y ou can also have linear (constant speed), ease-in (slow start), ease-in-out (slow start and slow end). In the case of a short duration, these time curve effect differences are subtle and require the designer to be sensitive enough to the animation.
• The animation delay time is 3 seconds, which means that the animation does not start until 3 seconds later.

Technical documentation: A list of properties that can be animated

Let's look at a comprehensive case and enter it in transition.wxml

<view>
        <text>盒子的多个属性一起动画: width, height, background-color, transform. 将鼠标或手指悬停在盒子上查看动画之后放开。</text>
        <view class="animatebox" hover-class="animatebox-hover"></view>
    </view>

Enter in transition.wxss

.animatebox {
        display: block;
        width: 100px;
        height: 100px;
        background-color: #4a9d64;
        transition:width 2s, height 2s, background-color 2s, transform 2s;
    }
    .animatebox-hover {
        background-color: #cd584a;
        width:200px;
        height:200px;
        transform:rotate(180deg);
    }

Animated property Animation

CSS animations allow you to switch from one CSS style configuration to another. The animation consists of two parts: a style rule that describes the animation and keyframes that specify the start, end, and middle point styles of the animation.

Technical documentation: CSS animation property Animation

<view class="fadeIn">
     <view>注意会有一个无限颜色渐变变化的动画</view>
        <image mode="widthFix" src="//7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

Enter the following code in wxss

@keyframes fadeIn {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    .fadeIn {
      animation: 4s linear 0s infinite alternate fadeIn;
    }

CSS3 animation library Animate .css

Animate .css is an interesting, cross-browser css3 animation library that allows you to add animation styles to specified elements by simply introducing a CSS file.

Technical documentation: Animate .css

It presets up to 80 animation effects, including shake, flash, bounce, flip, rotate (rotateIn/rotateOut), fade In/fadeOut, and more, including almost all common animation effects.

Small tasks: Refer to the .css of the animmate and implement a case of component jitter in a small program. In addition to introducing some style frameworks such as weui, there are some open source libraries that we can learn from, and more need to be learned later.