Download Images and Source Code Download Images and Source Code
Are you big fans of creative and beautiful animations? If you want to make your website more user-friendly, keep reading this article and try it yourself. A user’s first impression is important, and creative fantasy welcome animations can help you engage visitors. Moreover, animations can entertain visitors and make them want to use / play or try to make them.
These animations are one of the most noticeable and they can appear on your website home page. They help visitors relax and provide a light look. The interface of the animation responds to the user’s cursor (click the animation). Most users prefer to control the animation by panning so that visitors can respond to the animation with the user’s cursor movements. Are these 3D animations? Yes, it is one of the basic 3D animations. 3D animations offer more opportunities to create realistic visuals that attract visitors. Some designers simply use 3D animation to serve as decorative elements of a website. It is common to place them on the homepage to welcome visitors
All of the code is using pure HTML and CSS coding that I just made with Visual Studio Code (Recommended software). Let’s get started, tfirst .html, then second .css. Forget the basics, let’s move on to the implementation and schedule right away. (By the way, if you want to Copy-Paste the spelling of the program directly, no problem)
CAMVAVSR Men’s Sneakers Fashion Lightweight Running Shoes Tennis Casual Shoes for Walking
Are these website animations responsive? First of all it is a word that represents a website that can be opened on any device that is responsive, such as laptop, smart phone, smart watch and other devices. Let me answer your question, yes this website animations are responsive so you can open them on any device. How did you do this? Well, I can tell I’m using magic codes
These especially
Put it in an HTML file and there’s a second magic code that puts the CSS file in box sizing: border-box;*
{
margin: 0;
filling: 0;
box sizing: border-box;
}
body
{
screen: flexible;
justification content: center;
alignment items: center;
min-height: 100vh;
background: # f4f4f4;
overflow: hidden;
}
.World
{
position: relative;
width: 400px;
height: 400px;
background: # 0588e4 url (‘earth.png’);
background size: cover;
border radius: 50%;
box-shadow: inset 0 0 50px rgba (0,0,0,0.85);
screen: flexible;
justification content: center;
alignment items: center;
pass: 0.5s;
animation: Animate the linear infinity of the 12’s;
}
.earth: enabled
{
transformation: scale (5);
}
.earth: before
{
content: ”;
position: absolute;
width: 100%;
height: 100%;
border radius: 50%;
overflow: hidden;
background: url (cloud.png);
background size: cover;
animation: Animate the 18’s linear infinity;
z-index: 1;
}
.earth img
{
position: absolute;
z-index: 2;
pass: 0.5s;
pointer events: none;
}
.earth: active img
{
transformation: scale (0.2);
}
@keyframes portrays
{
0%
{
background position: 0 0;
}
one hundred%
{
background position: 719px 0;
}
}
(Don’t forget to click the animation to zoom the animation)
Isn’t it easy? This lesson took only 2 to 3 minutes to complete and from this lesson you can improve your skills, for example try to do something different that you can rotate or make your own 3D animation product to promote your product. There are many things you can do to start from scratch and reach the top, let’s make it our motto. Animation is no longer just cartoon, our creativity is our ideas and hobby. I hope that through this course you will be able to increase your interest in the website, especially web design. And I would be very happy if you continue to follow my blog. Sharing information through this blog makes me happy. Website, programming, design, animation, etc. Share it with your loving friend. See you.