Home > Developer > Web Develop

CSS from simple to complex dynamic effects, you deserve to have

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<style>
. tip{
height:10px;
padding-left:20%;
Background-color: #FFFFFF;
Text-align:center;
Line-height:: 10px;
Color: #dddcdc;
font-size:15px;
}
p:active{
Text-decoration:underline;
Color: #81A9C3;
}
. dp{
margin:0 Auto;
Text-align:center;
}
/* elements are scaled up to no effect on the surrounding elements and are completed instantaneously */
/*
img{
width:30px;
height:30px;

}
img:hover{
Transform:scale (2);

}
*/
/* Change with transition animation effect, can control the time, will affect the surrounding elements, caused by the change of the element property animation effect */
/*
img{
width:30px;
height:30px;
transition:height 2s linear 2s;
}
img:hover{
height:50px;

}
*/
/* Element height changes, will affect the surrounding elements, instantaneous completion */
/*
img{
width:30px;
height:30px;

}
img:hover{
height:50px;
}
*/
/* Keyframe Animation */

/* Keyword @keyframes to define the animation */
@keyframes demo{
0%{width:50px;height:30px}
50%{width:30px;height:50px}
100%{width:30px;height:30px}
}

/* The animation is defined and now binds the action to the element */
img:hover{
Animation:demo 2s;
}

</style>
<body>
<script>

</script>
<div>
<p class= "Tip" > No account yet? Stamp here to register </p>
</div>
<div class= "DP" >

</div>
<div>
<p class= "Tip" > No account yet? Stamp here to register </p>
</div>

</body>

Directly paste the code.

1 The simplest dynamic effect is

img:hover{

height:50px;
} is implemented by dynamic pseudo-class.

2 by the dynamic Pseudo-class trigger event, the transform to complete the dynamic effect, of course, the transform effect is much better than the former

img:hover{
Transform:scale (2);

}

3 Transition animation, this is triggered by binding element properties, because of changes in element properties, animation controllability is much higher than transform, but can only set the start and end of two frames.

4 Keyframe Animation, you can control the changes of each frame, directly bound elements can make the element animated.

The above is a personal learning experience, welcome to shoot bricks.

CSS from simple to complex dynamic effects, you deserve to have

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More