Lightbox/Pop up window

Cool Open Mode Window Transition Animation Effect

PetitQ PetitQ Lightbox/Pop up window , Dialog/Tips 2019-3-06 2.01K zero
Collection
Alibaba Cloud


This is a cool transition animation special effect of opening modal window using CSS3 animation animation. The principle of this CSS transition animation is to create step animation through the steps () function, and create different animation transition effects through different background Sprite pictures.

HTML Structure

Each of the 11 different animation transition effects uses a separate class class. Note the class class on the<body>element in each demo. Other HTML structures are basically similar, as follows:

Want to be here? contact us bar
Maker host
  1.  <! doctype html >
  2.  < html lang = "zh"  class = "no-js" >
  3.  < head >
  4.    <!--  ...  -->
  5.  </ head >
  6.  < body class = "cartoon-transition" >
  7.  < main class = "cd-main-content" >
  8.    <!--  ...  -->
  9.  </ main > 
  10.   
  11.  < div class = "cd-modal" id = "modal-1" >
  12.    <!--  ...  -->
  13.  </ div > 
  14.   
  15.  < div class = "cd-transition-layer" data - frame = "25" > 
  16.    < div class = "bg-layer" ></ div >
  17.  </ div > 
  18.   
  19.  < script src = "js/jquery.min.js" > </script>
  20.  < script src = "js/main.js" > </script>  <!-- Resource jQuery -->
  21.  </ body >
  22.  </ html >

CSS style

The style.css file contains 11 kinds of transition animation codes. The Shared style part is a general style, including the button style and modal window style. Each of the following summaries is a separate style for various effects.

  1.  /* --------------------------------
  2.   
  3.  Shared style
  4.   
  5.  -------------------------------- */
  6.   
  7.  .cd-btn  {
  8.    display :  inline-block ;
  9.    padding :  1.6em  2.4em ;
  10.    font-size :  1.4rem ;
  11.    letter-spacing :  .15em ;
  12.    font-weight :  seven hundred ;
  13.    text-transform :  uppercase ;
  14.    box-shadow :  zero  2px  10px  rgba ( zero ,  zero ,  zero ,  zero point zero eight ) ;
  15.    transition : box-shadow .3s ;
  16.    /*...*/
  17.  }
  18.   
  19.  /* --------------------------------
  20.   
  21.  Scrub Effect - Custom effect style
  22.   
  23.  -------------------------------- */
  24.   
  25.  .scrub-transition  {
  26.    font-family :  "PT Sans" ,  sans-serif ;
  27.    color :  #2c1a32 ;
  28.    /*...*/
  29.  }
  30.   
  31.  /* --------------------------------
  32.   
  33.  Animations
  34.   
  35.  -------------------------------- */
  36.   
  37.  @keyframes cd-sequence {
  38.    0%  {
  39.      transform : translateY ( -50% ) translateX ( -2% ) ;
  40.    }
  41.    100%  {
  42.      transform : translateY ( -50% ) translateX ( -98% ) ;
  43.    }
  44.  }

Cool Open Mode Window Transition Animation Effect

502 people have purchased
  • 0npm
View Demo Upgrade VIP Buy Now

Demo Address Download address

Consulting customer service Chinese Demo

Professionally provide WordPress theme installation, in-depth localization, accelerated optimization and other website construction services. Please consult online customer service for details!

Maker host
Collection
fabulous ( one )

Related articles

Post reply

Hot selling template

Ashade - Works exhibition photo album WordPress Chinese theme
LensNews

This site accepts WordPress/PbootCMS/DedeCMS, etc
System construction, imitation, development, customization and other services!

Sign in