Home > Web Front-end > HTML Tutorial > Player play button implemented by CSS3_html/css_WEB-ITnose

Player play button implemented by CSS3_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:59:15
Original
1526 people have browsed it

The completed effect is as follows

View the effect and download

Step 1: First understand the principle of border:

Step 2: HTML code structure

Html code

  1. Start
  2. Pause
  3. Stop
  4. Forward
  5. rewind">Rewind
  6. Rewind
  7. Eject
  8. Eject

Step 3: Draw a background circle, position: relative

Css code

.playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }

Step 4: Draw the stop button and make the button centered.

The button is positioned absolutely relative to the outer circle, starting from the center of the circle, so adjust the top and left values ​​

The stop button side length is 14px , it needs to be moved 7 pixels up and to the left relative to the origin, centered.

All CSS is as follows:

Css code

    1.    .playContainer { position: relative; float: left; background: rgba(0, 0, 0, 0.8); padding: 20px; }  
    2. .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }  
    3. .playContainer a { border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -3px;  }  
    4.   
    5. .playBtn a { border-color: transparent transparent transparent #fff; border-width: 8px 0 8px 12px;  width: 0; height: 0; }  
    6. .pauseBtn a { border-color: transparent white;  border-width: 0 6px; height: 15px; width: 6px; left: -9px; }  
    7. .stopBtn a { border: 7px solid #fff; height: 0; width: 0; left: -7px; top: -7px;}  
    8. .forwardBtn a { border-left-width: 8px; left: 1px; }  
    9. .forwardBtn a:first-child { margin-left: -7px;  }  
    10.   
    11. .rewindBtn a { border-width: 8px 8px 8px 0; border-color: transparent #fff transparent transparent; width: 0; height: 0; }  
    12. .rewindBtn a:first-child { margin-left: -7px; }  
    13.   
    14. .ejectBtn a.arrow { border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; top:-26px; left:-8px; }  
    15. ectBtn a.dash { border-width: 0 0 4px; border-color: transparent transparent #fff; height: 0; width:16px; left: -8px; top: 4px; } 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template