Image of the circle

如何将放置它的图像放入带有溢出的圆形中：hidden; 这里是代码https://codepen.io/anon/pen/oWaWYL。当我点击图像与lib运输图像上去。但我需要看到的图像到了中圈Image of the circle

的Html

<body> 
    <div id="del-countdown"> 
     <div id="screen"></div> 
     <div id="clock"></div> 

     <div id="units"> 
     <span>Hours</span> 
     <span>Minutes</span> 
     <span>Seconds</span> 
     </div> 

    </div> 

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
    </body>

CSS

* { margin:0; padding:0; box-sizing:border-box; } 
body { 
    background: #282e3a; 
    font-family: Ubuntu, sans-serif; 
} 

h1 { 
    color: #fff; 
    text-align: center; 
    font-size: 74px; 
    letter-spacing: 10px; 
    margin-bottom: 70px; 
} 

#del-countdown { 
    width: 700px; 
    height: 700px; 

    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 

    /*background-color: rgba(255, 0, 0, 0.3) ;*/ 

    border-radius: 50%; 
    border-style: solid; 
    border-color: #0000ff; 
    z-index: 0; 

    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
} 

#clock,#units { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
} 

#screen{ 
    width:100%; 
    height:100%; 
    position: absolute; 
    overflow: hidden; 
    background: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97700&w=1000&h=700) no-repeat center center fixed; 
} 

#clock span { 
    float: left; 
    text-align: center; 
    font-size: 84px; 
    margin: 0 2.5%; 
    color: #fff; 
    padding: 20px; 
    width: 20%; 
    border-radius: 20px; 
    box-sizing: border-box; 
} 
#clock span:nth-child(1) { 
    background: #fa5559; 
} 
#clock span:nth-child(2) { 
    background: #26c2b9; 
} 
#clock span:nth-child(3) { 
    background: #f6bc58; 
} 

#clock:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

#units span { 
    float: left; 
    width: 25%; 
    text-align: center; 
    margin-top: 30px; 
    color: #ddd; 
    text-transform: uppercase; 
    font-size: 13px; 
    letter-spacing: 2px; 
    text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7); 
} 


span.turn { 
    animation: turn 0.7s ease forwards; 
} 

@keyframes turn { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(0deg); 
    } 
}

"use strict"; 

function updateTimer(deadline) { 
    var time = deadline - new Date(); 
    return { 
    hours: Math.floor(time/(1000 * 60 * 60) % 24), 
    minutes: Math.floor(time/1000/60 % 60), 
    seconds: Math.floor(time/1000 % 60), 
    total: time 
    }; 
} 

function animateClock(span) { 
    span.className = "turn"; 
    setTimeout(function() { 
    span.className = ""; 
    }, 700); 
} 

function startTimer(id, deadline) { 
    var timerInterval = setInterval(function() { 
    var clock = document.getElementById(id); 
    var timer = updateTimer(deadline); 

    clock.innerHTML = "<span>" + timer.hours + "</span><span>" + timer.minutes + "</span><span>" + timer.seconds + "</span>"; 

    var spans = clock.getElementsByTagName("span"); 
    animateClock(spans[2]); 

    if (timer.seconds == 59){ 
     animateClock(spans[1]); 
    } 

    if (timer.minutes == 59 && timer.seconds == 59){ 
     animateClock(spans[0]); 
    } 

    if (timer.total < 1) { 
     clearInterval(timerInterval); 
     clock.innerHTML = "<span>0</span><span>0</span><span>0</span>"; 
    } 

    }, 1000); 
} 

function hideOnLoad(clock, units){ 
    var c = document.getElementById(clock); 
    var u = document.getElementById(units); 
    c.style.visibility = 'hidden'; 
    u.style.visibility = 'hidden'; 
} 

function clickStart(counter){ 
    var start = document.getElementById("del-countdown"); 
     start.addEventListener("click", function() { 
     counter++; 
     if(counter%2==0){ 

      $('#screen').transition({ y: '-500px' }); 
      var c = document.getElementById("clock"); 
      var u = document.getElementById("units"); 
      c.style.visibility = 'visible'; 
      u.style.visibility = 'visible'; 
     }else{ 

      $('#screen').transition({ y: '0px' }); 
      var c = document.getElementById("clock"); 
      var u = document.getElementById("units"); 
      c.style.visibility = 'hidden'; 
      u.style.visibility = 'hidden'; 
     } 
     }, false); 
} 

window.onload = function() { 
    var deadline = new Date("Jan 1, 2018 10:10:00"); 
    var counter = 1; 

    hideOnLoad("clock", "units"); 
    clickStart(counter); 
    startTimer("clock", deadline); 
};

来源

2017-05-19 Sec Cam

你可以#screenhttps://codepen.io/caseydev/pen/eWPWWw

来源

2017-05-19 00:06:20 Kumar

添加边框半径是我硝酸钾w为此...但我需要当你点击图像时，图像上升。你看到图像的一半，另一半被隐藏......你只需要看到图像的一部分在圈子里 –

Image of the circle

回答

相关问题