Web Animation
Rajeev Ranjan Tiwari
दोस्तो आज हम जानेंगे कि css में animation कैसे काम करता है ओ भि टेक्स्ट color change अपने आप होना चाहिए तभी एक animation होगा तो दिखते हैं कि यह कैसे हो सकता है यह animation आप वेब साइट software एपलिकेशन आदि में लागा सकते हो
(1)
<style>
.awesome {
width: 100%;
margin: 0 auto;
text-align: center;
color: #313131;
font-size: 45px;
font-weight: bold;
position: absolute;
animation: colorchange 20s infinite alternate;
}
@keyframes colorchange {
0% {
color: magenta;
}
10% {
color: purple;
}
20% {
color: black;
}
30% {
color: indigo;
}
40% {
color: green;
}
50% {
color: brown;
}
60% {
color: blue;
}
70% {
color: tomato;
}
80% {
color: yellow;
}
90% {
color: red;
}
100% {
color: pink;
}
}
</Style>
<p class="awesome">How are you</p>
<html>
<head>
<title>Change Color</title>
</head>
<body>
<button id="changeGreen">Green</button>
<button id="changeRed">Red</button>
<p>
<span id="output">Learn the test-driven development approach when building apps</span>
</p>
<script>
document.getElementById("changeGreen").onclick = function(){
document.getElementById("output").style.color = 'green';
}
document.getElementById("changeRed").onclick = function(){
document.getElementById("output").style.color = 'red';
}
</script>
</body>
</html>
(3)
<html>
<head>
<style>
#main {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
}
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
</style>
</head>
<body>
<h1>The flex Property</h1>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:coral;">RED</div>
<div style="background-color:coral;">RED</div>
</Div>
</Body>
</Html>
अंत मे अगर इस पोस्ट से आपको कुछ फायदा हुवा हो तो इसे दुसरो के साथ भी share करे ताकी दुसरो का भी फायदा हो. इस पोस्ट को पूरा पढ़ने के लिए आपका धन्यवाद और बहुत शुक्रिया.
Thanks friend posted by Rajeev Ranjan Tiwari
Comments
Post a Comment