如何将溢出的图像放入圆圈中：隐藏; 这是代码https://codepen.io/anon/pen/oWaWYL。当我点击图像与lib过境图像上升。但我需要将图像看到圆圈
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);
}
}
JS
"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);
};