Sử dụng chuyển tiếp CSS3 với nền gradient

Tôi đang cố gắng chuyển đổi khi di chuột bằng css qua hình thu nhỏ để khi di chuột, độ dốc nền mờ dần. Quá trình chuyển đổi không hoạt động, nhưng nếu tôi chỉ thay đổi nó thành một rgba()giá trị, nó sẽ hoạt động tốt. Là độ dốc không được hỗ trợ? Tôi cũng đã thử sử dụng một hình ảnh, nó cũng sẽ không chuyển đổi hình ảnh.

Tôi biết điều đó là có thể, như trong một bài đăng khác, ai đó đã làm điều đó, nhưng tôi không thể tìm ra chính xác như thế nào. Bất kỳ trợ giúp> Đây là một số CSS để làm việc với:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

Các lớp chưa hỗ trợ chuyển tiếp (mặc dù thông số kỹ thuật hiện tại cho biết họ nên hỗ trợ như chuyển đổi độ dốc để thích chuyển tiếp độ dốc thông qua phép nội suy.).

Nếu bạn muốn có hiệu ứng mờ dần với độ dốc nền, bạn phải đặt độ mờ cho thành phần chứa và 'chuyển đổi' độ mờ.

(Đã có một số bản phát hành trình duyệt hỗ trợ chuyển đổi trên độ dốc (ví dụ IE10. Tôi đã thử chuyển đổi độ dốc trong năm 2016 trong IE và chúng dường như hoạt động vào thời điểm đó, nhưng mã kiểm tra của tôi không còn hoạt động nữa.)

Cập nhật: Tháng 10 năm 2018 Chuyển đổi Gradient với cú pháp mới không có tiền tố [ví dụ: radial-gradient (...)] hiện đã được xác nhận để hoạt động (một lần nữa?) Trên Microsoft Edge 17.17134. Tôi không biết khi nào nó được thêm vào. Vẫn không hoạt động trên Firefox & Chrome / Windows 10 mới nhất.

Một cách giải quyết là chuyển đổi vị trí nền để tạo hiệu ứng thay đổi độ dốc: http://sapphion.com/2011/10/css3-gradient-transition-with-background-poseition/

Chuyển đổi độ dốc CSS3 với vị trí nền

Mặc dù bạn không thể trực tiếp làm động các gradient bằng cách sử dụng thuộc tính chuyển tiếp CSS, nhưng có thể làm động các thuộc tính vị trí nền để đạt được một hình ảnh động gradient đơn giản:

Mã cho điều này là đơn giản chết:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

Một giải pháp là sử dụng vị trí nền để bắt chước quá trình chuyển đổi độ dốc. Giải pháp này đã được sử dụng trong Twitter Bootstrap vài tháng trước.

Cập nhật

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showVer=1390287622614

Đây là một ví dụ nhanh:

Liên kết nhà nước

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

Trạng thái di chuột

.btn:hover {
   background-position: 0 0;
}

Để biết giá trị của nó, đây là một mixin Sass:

Sử dụng:

@include gradientAnimation(red, blue, .6s);

Mixin:

@mixin gradientAnimation( $start, $end, $transTime ){
    background-size: 100%;
    background-image: linear-gradient($start, $end);
    position: relative;
    z-index: 100;
    &:before {
        background-image: linear-gradient($end, $start);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        width: 100%;
        z-index: -100;
        transition: opacity $transTime;
    }
    &:hover {
        &:before {
            opacity: 1;
        }
    }
}

Lấy từ bài đăng tuyệt vời này trên Medium từ Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradrons-USE-only-css-d2fd7671e759

Tôi biết đó là câu hỏi cũ nhưng ai đó thích cách giải quyết của tôi trong CSS thuần túy. Gradient mờ dần từ trái sang phải.

.contener{
  background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/3d_landscape/9655_3d_landscape.jpg');   width:300px;
  height:200px;
  background-size:cover;
  border:solid 2px black;
}
.ed {
    width: 0px;
    height: 200px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:0;
    transition:width 20s, opacity 0.6s;
}

.contener:hover .ed{
    width: 300px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:1;
    transition:width 0.4s, opacity 1.1s;
    transition-delay: width 2s;
    
    animation-name: gradient-fade;
    animation-duration: 1.1s;   
    -webkit-animation-name: gradient-fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
}




/* ANIMATION */
@-webkit-keyframes gradient-fade {
    0%   {background:linear-gradient(to right, rgba(0,0,255,0), rgba(255,0,0,0));}
    2%  {background:linear-gradient(to right, rgba(0,0,255,0.01875), rgba(255,0,0,0));}
    4%  {background:linear-gradient(to right, rgba(0,0,255,0.0375), rgba(255,0,0,0.0));}
    6%  {background:linear-gradient(to right, rgba(0,0,255,0.05625), rgba(255,0,0,0.0));}
    8% {background:linear-gradient(to right, rgba(0,0,255,0.075), rgba(255,0,0,0));}
    10%  {background:linear-gradient(to right, rgba(0,0,255,0.09375), rgba(255,0,0,0));}
    12%   {background:linear-gradient(to right, rgba(0,0,255,0.1125), rgba(255,0,0,0));}
    14%  {background:linear-gradient(to right, rgba(0,0,255,0.13125), rgba(255,0,0,0));}
    16%  {background:linear-gradient(to right, rgba(0,0,255,0.15), rgba(255,0,0,0));}
    18%  {background:linear-gradient(to right, rgba(0,0,255,0.16875), rgba(255,0,0,0));}
    20% {background:linear-gradient(to right, rgba(0,0,255,0.1875), rgba(255,0,0,0));}
    22%  {background:linear-gradient(to right, rgba(0,0,255,0.20625), rgba(255,0,0,0.01875));}
    24%   {background:linear-gradient(to right, rgba(0,0,255,0.225), rgba(255,0,0,0.0375));}
    26%  {background:linear-gradient(to right, rgba(0,0,255,0.24375), rgba(255,0,0,0.05625));}
    28%  {background:linear-gradient(to right, rgba(0,0,255,0.2625), rgba(255,0,0,0.075));}
    30%  {background:linear-gradient(to right, rgba(0,0,255,0.28125), rgba(255,0,0,0.09375));}
    32% {background:linear-gradient(to right, rgba(0,0,255,0.3), rgba(255,0,0,0.1125));}
    34%  {background:linear-gradient(to right, rgba(0,0,255,0.31875), rgba(255,0,0,0.13125));}
    36%   {background:linear-gradient(to right, rgba(0,0,255,0.3375), rgba(255,0,0,0.15));}
    38%  {background:linear-gradient(to right, rgba(0,0,255,0.35625), rgba(255,0,0,0.16875));}
    40%  {background:linear-gradient(to right, rgba(0,0,255,0.375), rgba(255,0,0,0.1875));}
    42%  {background:linear-gradient(to right, rgba(0,0,255,0.39375), rgba(255,0,0,0.20625));}
    44% {background:linear-gradient(to right, rgba(0,0,255,0.4125), rgba(255,0,0,0.225));}
    46%  {background:linear-gradient(to right, rgba(0,0,255,0.43125),rgba(255,0,0,0.24375));}
    48%   {background:linear-gradient(to right, rgba(0,0,255,0.45), rgba(255,0,0,0.2625));}
    50%  {background:linear-gradient(to right, rgba(0,0,255,0.46875), rgba(255,0,0,0.28125));}
    52%  {background:linear-gradient(to right, rgba(0,0,255,0.4875), rgba(255,0,0,0.3));}
    54%   {background:linear-gradient(to right, rgba(0,0,255,0.50625), rgba(255,0,0,0.31875));}
    56%  {background:linear-gradient(to right, rgba(0,0,255,0.525), rgba(255,0,0,0.3375));}
    58%  {background:linear-gradient(to right, rgba(0,0,255,0.54375), rgba(255,0,0,0.35625));}
    60%  {background:linear-gradient(to right, rgba(0,0,255,0.5625), rgba(255,0,0,0.375));}
    62% {background:linear-gradient(to right, rgba(0,0,255,0.58125), rgba(255,0,0,0.39375));}
    64%  {background:linear-gradient(to right,rgba(0,0,255,0.6), rgba(255,0,0,0.4125));}
    66%   {background:linear-gradient(to right, rgba(0,0,255,0.61875), rgba(255,0,0,0.43125));}
    68%  {background:linear-gradient(to right, rgba(0,0,255,0.6375), rgba(255,0,0,0.45));}
    70%  {background:linear-gradient(to right, rgba(0,0,255,0.65625), rgba(255,0,0,0.46875));}
    72%  {background:linear-gradient(to right, rgba(0,0,255,0.675), rgba(255,0,0,0.4875));}
    74% {background:linear-gradient(to right, rgba(0,0,255,0.69375), rgba(255,0,0,0.50625));}
    76%  {background:linear-gradient(to right, rgba(0,0,255,0.7125), rgba(255,0,0,0.525));}
    78%   {background:linear-gradient(to right, rgba(0,0,255,0.73125),,rgba(255,0,0,0.54375));}
    80%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.5625));}
    82%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.58125));}
    84%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.6));}
    86% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.61875));}
    88%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.6375));}
    90%   {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.65625));}
    92%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.675));}
    94%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.69375));}
    96%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.7125));}
    98% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.73125),);}
    100%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));}
}

<div class="contener" style="">
  <div class="ed"></div>
</div>

Sau đây, một thẻ neo có một đứa con và một đứa cháu. Các cháu có độ dốc nền xa. Đứa trẻ trong nền gần là trong suốt, nhưng có độ dốc để chuyển sang. Khi di chuột, độ mờ của trẻ em được chuyển từ 0 sang 1, trong khoảng thời gian 1 giây.

Đây là CSS:

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

Và, đây là HTML:

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

Những điều trên chỉ được thử nghiệm trong phiên bản Chrome mới nhất. Đây là những hình ảnh trước khi di chuột, nửa chừng khi di chuột và được chuyển đổi hoàn toàn trên hình ảnh di chuột:

Cách giải quyết một phần cho quá trình chuyển đổi độ dốc là sử dụng bóng hộp trong hộp - bạn có thể chuyển đổi bóng của hộp hoặc màu nền - ví dụ: nếu bạn tạo bóng hộp trong cùng màu với nền và hơn là sử dụng chuyển đổi trên màu nền, nó sẽ tạo ảo giác nền trơn đó đang thay đổi thành gradient xuyên tâm

.button SPAN {
    padding: 10px 30px; 
    border: 1px solid ##009CC5;

    -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
    -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
    box-shadow: inset 0 0 20px 1px #00a7d1; 

    background-color: #00a7d1;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.button SPAN:hover {
    background-color: #00c5f7; 
}

Bạn có thể FAKE chuyển tiếp giữa các gradient, sử dụng các chuyển tiếp trong độ mờ đục của một vài gradient được xếp chồng lên nhau, như được mô tả trong một vài câu trả lời ở đây:

Hoạt hình CSS3 với độ dốc .

Bạn cũng có thể chuyển đổi vị trí thay thế, như được mô tả ở đây:

Chuyển tiếp gradient CSS3 với vị trí nền .

Một số kỹ thuật ở đây:

Hoạt hình sinh viên CSS3 .

Đã tìm thấy một bản hack hay trên codepen để sửa đổi thuộc opacitytính nhưng đạt được độ mờ dần từ độ dốc này sang độ dốc khác bằng cách tận dụng các phần tử giả. Những gì anh ta làm là anh ta thiết lập :afterđể khi bạn thay đổi độ mờ đục của phần tử thực tế, :afterphần tử hiển thị để nó trông như thể nó bị mờ dần. Nghĩ rằng nó sẽ hữu ích để chia sẻ.

Codepen gốc: http://codepen.io/sashtown/pen/DfdHh

.button {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #ca5f5e, #d68584);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
.button:hover:after {
  opacity: 1;
}
.button span {
  position: relative;
  z-index: 3;
}
body {
  text-align: center;
  background: #ddd;
}

<a class="button" href="#"><span>BUTTON</span></a>

Dựa trên mã css trong câu hỏi của bạn, tôi đã thử mã như sau và nó hoạt động với tôi (chạy đoạn mã) và vui lòng tự mình thử:

#container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
     
#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
    
#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>

Dựa trên mã css trong câu hỏi của bạn, tôi đã thử mã như sau và nó hoạt động với tôi, và hãy tự mình thử:

    #container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}

#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

Nó có hiệu quả với bạn không? Thay đổi màu dựa trên nhu cầu của bạn :)

Hãy thử sử dụng: trước và: sau (tức là 9 +)

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}

Như đã nói. Các lớp hiện không được hỗ trợ với Chuyển tiếp CSS. Nhưng bạn có thể xử lý xung quanh nó trong một số trường hợp bằng cách đặt một trong các màu thành trong suốt, để màu nền của một số thành phần bao bọc khác tỏa sáng và thay vào đó chuyển tiếp.

Tôi sử dụng điều này tại nơi làm việc :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

Đừng quên <element class="ahover"><span>Text</span></a>nếu bạn sử dụng một yếu tố văn bản.

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}

Không thể làm tổn thương để đăng một quan điểm khác vì vẫn chưa có một cách chính thức để làm điều này. Đã viết một plugin jQuery nhẹ mà bạn có thể xác định độ dốc xuyên tâm nền và tốc độ chuyển tiếp. Cách sử dụng cơ bản này sau đó sẽ cho phép nó mờ dần, được tối ưu hóa với requestAnimationFrame (rất mượt):

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

Giữ nền gốc và tất cả các thuộc tính nguyên vẹn. Cũng có tính năng theo dõi nổi bật như một cài đặt:

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

Tôi muốn có một div xuất hiện như hình cầu 3D và chuyển qua màu sắc. Tôi phát hiện ra rằng màu nền gradient không chuyển tiếp (chưa). Tôi đặt một nền gradient hướng tâm trước phần tử (sử dụng chỉ số z) với nền rắn chuyển tiếp.

/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );

sau đó div.ballbên dưới:

transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

sau đó thay đổi màu nền của div.ballvà voila!

https://codepen.io/keldon/pen/dzPxZP