Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Day - 13 Web Development: by - Dipankar Kumar Pankaj

    Uploaded by

    nisha gautam
    The document discusses various web development techniques including the marquee tag for scrolling text, CSS hover selector to change styles on mouseover, CSS transitions to animate property changes, and CSS animations to move elements on a page over time using keyframe animations. It provides examples of how to implement the marquee tag, hover selector, transitions using properties like duration and timing, and a simple animation that moves a div from left to right.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Day - 13 Web Development: by - Dipankar Kumar Pankaj

    Uploaded by

    nisha gautam
    7 views11 pages
    The document discusses various web development techniques including the marquee tag for scrolling text, CSS hover selector to change styles on mouseover, CSS transitions to animate property changes, and CSS animations to move elements on a page over time using keyframe animations. It provides examples of how to implement the marquee tag, hover selector, transitions using properties like duration and timing, and a simple animation that moves a div from left to right.

    Original Description:

    web development course

    Original Title

    Day_13

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various web development techniques including the marquee tag for scrolling text, CSS hover selector to change styles on mouseover, CSS transitions to animate property changes, and CSS animations to move elements on a page over time using keyframe animations. It provides examples of how to implement the marquee tag, hover selector, transitions using properties like duration and timing, and a simple animation that moves a div from left to right.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    7 views11 pages

    Day - 13 Web Development: by - Dipankar Kumar Pankaj

    Uploaded by

    nisha gautam
    The document discusses various web development techniques including the marquee tag for scrolling text, CSS hover selector to change styles on mouseover, CSS transitions to animate property changes, and CSS animations to move elements on a page over time using keyframe animations. It provides examples of how to implement the marquee tag, hover selector, transitions using properties like duration and timing, and a simple animation that moves a div from left to right.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 11

    Day_13

    Web Development

    By - Dipankar Kumar Pankaj


    Effect And Animation
    The marquee Tag
    • The HTML <marquee> tag is used for scrolling piece of text or image
    displayed either horizontally across or vertically down your web site page
    depending on the settings.

    <marquee> This is basic example of marquee </marquee>

    • Attributes
    – Behavior
    • Scroll
    • slide
    • alternate
    – Direction
    • Up
    • Down
    • Left
    • right
    CSS :hover Selector
    • The :hover selector is used to select elements
    when you mouse over them.

    • Ex. :
    a:hover {
      background-color: yellow;
    }

    <a href=“#”> Click </a>


    CSS transition Property
    • The transition property is a shorthand
    property for:
    – transition-property
    – transition-duration
    – transition-timing-function
    – transition-delay
    • The transition-property property specifies the name of the
    CSS property the transition effect is for (the transition effect
    will start when the specified CSS property changes).

    • Ex. -
    div {
      transition-property: width;
    }
    div:hover {
      width: 300px;
    }
    • The transition-duration property specifies how
    many seconds (s) or milliseconds (ms) a
    transition effect takes to complete.

    div {
      transition-duration: 5s;
    }
    • The transition-timing-function property specifies
    the speed curve of the transition effect.
    • This property allows a transition effect to
    change speed over its duration.

    • #div1 {transition-timing-function: linear;}
    #div2 {transition-timing-function: ease;}
    #div3 {transition-timing-function: ease-in;}
    #div4 {transition-timing-function: ease-out;}
    #div5 {transition-timing-function: ease-in-out;}
    Animation
    • Css animation allow you to animate HTML
    element on webpage.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
    }

    @keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
    }
    </style>
    </head>

    <body>
    <div> </div>
    </body>
    </html>
    Thank you

    You might also like