programing

그라디언트 배경과 함께 CSS3 전환

lovejava 2023. 9. 6. 21:41

그라디언트 배경과 함께 CSS3 전환

나는 호버에서 배경 기울기가 희미해지도록 썸네일 위에 CSS를 사용하여 호버에서 전환하려고 합니다.전환이 작동하지 않지만, 단순히 다음으로 변경하면 됩니다.rgba() 작동합니다. value,잘합니다.그래디언트가 지원되지 않습니까?저도 이미지를 사용해봤는데, 이미지 전환도 안 됩니다.

다른 게시물에서 누군가가 한 것처럼 가능하다는 것은 알지만, 어떻게 정확하게 했는지는 알 수 없습니다.도움말> 작업할 CSS가 있습니다.

#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)))
}

그래디언트는 아직 변환을 지원하지 않습니다(현재 사양에서는 보간을 통해 그래디언트와 같은 그래디언트를 지원해야 한다고 말하지만).

배경 기울기로 페이드 인 효과를 원하는 경우 용기 요소에 불투명도를 설정하고 불투명도를 '전환'해야 합니다.

그래디언트(Gradient)에 대한 전환을 지원하는 일부 브라우저 릴리스(예: IE10)가 있습니다.2016년 IE에서 그라디언트 전환을 테스트했는데 당시에는 작동하는 것 같았지만 더 이상 테스트 코드가 작동하지 않습니다.)

업데이트: 2018년 10월 Microsoft Edge 17.17134에서 접두사가 없는 새 구문 [예: 방사형 구배(...)]을 사용한 그라디언트 전환이 (다시?) 작동하는 것으로 확인되었습니다.이게 언제 추가된 건지 모르겠어요.최신 Firefox & Chrome / Windows 10에서 여전히 작동하지 않습니다.

업데이트: 2021년 12월 @property 해결 방법을 사용하는 최신 크롬 기반 브라우저에서 가능합니다(그러나 Firefox에서는 작동하지 않습니다).아래(또는 YMMV 위) @mahozad의 답변을 확인(및 찬성)해주세요.

한 가지 해결 방법은 배경 위치를 전환하여 기울기가 변화한다는 효과를 주는 것입니다. http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

배경 위치를 사용한 CSS3 그래디언트 전환

CSS 전환 속성을 사용하여 그라디언트를 직접 애니메이션화할 수는 없지만 배경 위치 속성을 애니메이션화하여 간단한 그라디언트 애니메이션을 생성할 수 있습니다.

이에 대한 코드는 매우 간단합니다.

#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>

2021: 그라디언트 애니메이션이 가능합니다(아직 Firefox는 아님)

Chrome, Edge, Opera, Safari가 @property rule을 지원하므로 CSS에서 이 작업을 수행할 수 있습니다.

@property --myColor1 {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: green;
  inherits: false;
}

나머지는 일반 CSS입니다.
변수를 초기 그라디언트 색상으로 설정하고 변수의 전환도 설정합니다.

div {
  /* Optional: change initial value of the variables */
  /* --myColor1: #f64; --myColor2: brown; */

  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 3s, --myColor2 3s;
}

그런 다음 원하는 규칙에서 변수에 대한 새 값을 설정합니다.

div:hover {  
  --myColor1: #f00;
  --myColor2: yellow;
}


@property --myColor1 {
  syntax: '<color>';
  initial-value: #0f0;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: rgb(40, 190, 145);
  inherits: false;
}

div {
  width: 200px;
  height: 100px;
  background: linear-gradient(var(--myColor1), var(--myColor2));
  transition: --myColor1 3s, --myColor2 3s;
}

div:hover {
  --myColor1: red;
  --myColor2: #E1AF2F;
}
<div>Hover over me</div>

여기에 대한 전체 설명과 예시를 참조하고 사양에 대해서는 여기를 참조하십시오.
@property 규칙은 CSS Houdini 기술의 일부입니다.자세한 내용은 여기와 여기를 참조하고 이 비디오를 참조하십시오.

해결책은 배경 위치를 사용하여 그라디언트 전환을 모방하는 것입니다.이 솔루션은 몇 달 전 트위터 부트스트랩에서 사용되었습니다.

갱신하다

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

간단한 예는 다음과 같습니다.

링크 상태

 .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;
}

호버 상태

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

그럴만한 가치는 있지만, 새스 믹스인은 다음과 같습니다.

용도:

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

믹신:

@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;
        }
    }
}

Dave Lunny가 미디엄에 올린 이 멋진 게시물에서 가져온 것: https://medium.com/ @message_lunny/애니메이션-message-wasing-only-d2fd7671e759

:: 이전에는 CSS 의사 요소가 쉽게 트릭을 수행할 수 있습니다!

.element {
  position: relative;
  width: 200px;
  height: 150px;
  background-image: linear-gradient(45deg, blue, aqua);
  z-index: 2;
}

.element::before {
  position: absolute;
  content: "";
  inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
  background-image: linear-gradient(to bottom, red, orange);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.element:hover::before {
  opacity: 1;
}
<body>
  <div class="element"></div>
</body>

불투명도가 0인 의사 요소 앞에 ::를 사용하기만 하면 됩니다.

:hover에서 :::before의 불투명도를 1로 전환하고 몇 가지 간단한 단계를 수행하면 전환 작업을 수행해야 합니다.

  1. 배경 이미지를 사용하여 요소의 배경 기울기 설정
  2. 불투명도가 0인 의사 요소를 사용하여 다음 그래디언트를 설정합니다.
  3. 불투명도를 1 inside로 설정합니다.http::before
  4. 에 다음이 있는지 확인합니다.
    • 포지션 절대
    • 내용: ""
    • 기본 요소보다 낮은 z 지수
    • 위, 아래, 왼쪽, 오른쪽 0(또는 간단히 삽입: 0)
    • 선호하는 시간 간격을 사용하여 불투명도를 전환합니다.

그것으로 끝!이제 원하는 기간/지연/타이밍 기능을 사용하여 전환을 조정할 수 있습니다!

나는 그것이 오래된 질문이라는 것을 알지만 아마도 누군가 순수한 CSS에서 내 해결 방식을 즐길 것입니다. 왼쪽에서 오른쪽으로 기울기가 희미해집니다.

.contener{   
  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>

당신의 질문에 있는 CSS 코드를 바탕으로, 저는 다음과 같은 코드를 시도해 보았고 그것은 저에게 효과가 있습니다(코드 스니펫 실행), 그리고 당신이 직접 시도해 보세요.

#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>

당신의 질문에 있는 css 코드를 바탕으로 다음과 같은 코드를 시도해 보았으며, 저에게 효과가 있으며, 직접 시도해 보시기 바랍니다.

    #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;
}

그것이 당신에게 효과가 있습니까?고객님의 니즈에 맞게 색상을 :)

그라데이션 전환을 위한 부분적인 해결 방법은 삽입 상자 그림자를 사용하는 것입니다. 상자 그림자 자체 또는 배경색을 전환할 수 있습니다. 예를 들어 배경과 동일한 색의 삽입 상자 그림자를 만들고 배경색에 전환을 사용하지 않으면 일반 배경이 방사형 그라데이션으로 변경되는 것처럼 착각하게 됩니다.

.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; 
}

다음의 답변에서 설명한 대로 누적된 몇 개의 그래디언트의 불투명도에서 전환을 사용하여 그래디언트 간의 전환을 위장할 수 있습니다.

그래디언트가 있는 CSS3 애니메이션.

여기에 설명된 대로 대신 위치를 전환할 수도 있습니다.

배경 위치를 사용한 CSS3 그래디언트 전환.

다음과 같은 몇 가지 추가 기술을 소개합니다.

CSS3 그래디언트를 애니메이션화합니다.

다음의 앵커 태그에는 자녀와 손주가 있습니다.손주는 배경 경사도가 아주 깁니다.가까운 배경에 있는 아이는 투명하지만 전환할 수 있는 기울기를 가지고 있습니다.호버에서는 1초에 걸쳐 어린이의 불투명도가 0에서 1로 변경됩니다.

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;
}

그리고, 이것은 HTML:

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

위의 내용은 Chrome의 최신 버전에서만 테스트됩니다.다음은 호버링 전, 중간 호버링 및 완전히 전환된 온 호버링 영상입니다.

Before Halfway After

코드펜에 대한 멋진 해킹을 발견했습니다.opacity속성이지만 의사 규칙을 활용하여 한 기울기에서 다른 기울기로 희미해지는 효과를 얻을 수 있습니다.그가 하는 일은 그가 다음과 같은 것을 설정하는 것입니다.:after그래서 당신이 실제 요소의 불투명도를 변경할 때,:after요소가 나타나 마치 페이드인 것처럼 보입니다.공유하면 유용할 거라 생각했습니다.

원본 코드펜: 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>

저는 디브를 3D 구처럼 보이게 하고 색상을 통해 전환하고 싶었습니다.저는 그라디언트 배경색이 (아직) 전환되지 않는다는 것을 발견했습니다.저는 (z-index를 사용하여) 요소 앞에 변환 솔리드 배경과 함께 방사형 그라디언트 배경을 배치했습니다.

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

그 다음에div.ball아래:

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

그 다음에 배경색을 바꿨습니다.div.ball그리고 voila!

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

:이전 및 :후(i9+)를 사용해 보십시오.

#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;}

말씀하신 대로.그라디언트는 현재 CSS Transition에서 지원되지 않습니다.하지만 어떤 경우에는 다른 랩핑 요소의 배경색이 빛나도록 투명하게 설정하여 작업할 수도 있습니다. 대신 다른 랩핑 요소의 배경색이 빛나도록 전환합니다.

직장에서 사용합니다 :) IE6+ https://gist.github.com/GrzegorzPerko/7183390

<element class="ahover"><span>Text</span></a>텍스트 요소를 사용하는 경우.

.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;
}

아직 공식적인 방법이 없기 때문에 다른 보기를 게시하는 것은 해로울 수 없습니다.배경 방사형 구배 및 전환 속도를 정의할 수 있는 경량 jQuery 플러그인 작성.그러면 이 기본적인 사용법은 요청 애니메이션 프레임(매우 부드럽게)을 통해 최적화된 상태로 페이드 인:

$('#element').gradientFade({

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

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

원래 배경과 모든 속성을 그대로 유지합니다.또한 하이라이트 추적을 설정으로 사용합니다.

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

배경색을 설정하고 마스크 이미지를 사용하는 것이 훨씬 더 깨끗한 해결책이 될 것입니다.

#container div a {
  background-color: blue;
  transition: background 0.2s linear;
  width: 200px;
  height: 150px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .4));
}

#container div a:hover { 
  background-color: red;
}

아주 오래된 게시물에 2023년에 오신 것을 환영합니다.하지만 나는 여기에 착륙했고 당신도 분명히 착륙했습니다.

CSS 전용

https://jsfiddle.net/BradChesney79/rpa8v50t/78/

마크업:

<div class="fx-button">
<div class="button-content">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAhCAYAAAALboFLAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV+/UKTFwQ4iHTJUB7EgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE1cVJ0UVK/F9SaBHjwXE/3t173L0D/M0qU83gOKBqlpFJJYVcflXoeUUQIUQQw6jETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOfGYQRckfuS67PIb55LDfp4ZNbKZeeIosVDqYrmLWdlQiaeI44qqUb4/57LCeYuzWq2z9j35C8MFbWWZ6zRjSGERSxAhQEYdFVRhIUGrRoqJDO0nPfxDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAqEX2/4YBnp2gVbDtr+Pbbt1AgSegSut4681gZlP0hsdLX4E9G8DF9cdTd4DLneAwSddMiRHCtD0F4vA+xl9Ux4YuAX61tze2vs4fQCy1FX6Bjg4BEZKlL3u8e7e7t7+PdPu7wdXSnKcEOSXsgAAAAZiS0dEAKMAmwCI3OECOgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+cEBQ8XBXt+4EwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABn0lEQVQ4y02UQZJjIQxDn4Rz/7nCrOeEqQlWLww/vUlR+WDZTwL9+/snpAlBLAAs0QkSSKJs0b1YBCQiIUQZEgCoz/9NAh/CfIZtkTQILFPLphMiIALNRmKYFdU92sHPhiBkgRphyssALDFi0qkCWEimktCnQRlo5keCT4BN7b2JjBLSAhnRTz9I1FqLzowvmWQmCsMIgUnONMxpQZLZMH9SO5m1IOlv80cKRJGQDF0pY8eZjEu872hA0wP0yM9K1OtVdPdBsAhgBq41ttfuTXI49zTXBPnyC2V8FExuE4H0o0eNWZk83al4NKenz2c/p/FUUyYRQoQMzLsnV+qBO4rVCeked3tgXjsu+fJa57iQ/SQ9OpkCisMoYioC+1pzBql61bEl4DWkEyLBlXu/3xy3CB/SYOtJBECtVd/G7amkb/MEqrtJQnqPDDrs9QtB91euQ3efe3Dpi3oSmCm/amEy8nruXU8FgWRI0z4X9PZki9Z9KuYt8C+fsSgQT+btyXjOvUtIQslC+aYWglYNSHtg9t6TwA6Rz0vQ493J2g8fnASMeeRW2QAAAABJRU5ErkJggg==" />
<span class="button-text">DESKTOP BUTTON WITH COLOR SHIFT</span>
</div>
</div>
<p>
Drop shadow intrudes into immediate space around the element.
</p>
<p>
Not a particular issue, but something to be aware of.
</p>

CSS:

p {
   border: 1px red solid;
   margin: 0;
   padding: 0;"
}


.fx-button {
  background-image: linear-gradient(15deg, #a09486, #d2c7af);
  border: 1px red solid;
  box-shadow: 5px 5px 13px -4px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 5px 5px 13px -4px rgba(0, 0, 0, 0.35);
  color: white;
  height: 33px;
  margin: 0;
  paddng: 0;
  position: relative;
  vertical-align: middle;
  width: fit-content;
  z-index: 1;
}

.fx-button::before {
  background-image: linear-gradient(15deg, #d2c7af, #a09486);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s linear;
  z-index: -1;
}
.fx-button:hover::before {
  opacity: 1;
}

.button-text {
  border: 0;
  font-family: sans-serif;
  font-size: 12px;
  height: auto;
  margin: 0;
  padding: 0 10px 0 2px;
  position: relative;
  top: -11px;
}
.button-content {
  border: 0;
  height: 33px;
  margin: 0;
  padding: 0;
  width: fit-content;
  vertical-align: middle;
}

정말 감사합니다.

.element {
  position: relative;
  width: 200px;
  height: 150px;
  background-image: linear-gradient(45deg, blue, aqua);
  z-index: 2;
}

.element::before {
  position: absolute;
  content: "";
  inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
  background-image: linear-gradient(to bottom, red, orange);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.element:hover::before {
  opacity: 1;
}
<body>
  <div class="element"></div>
</body>

언급URL : https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds

'programing' 카테고리의 다른 글

도커로 mariaDB 컨테이너 및 시작 스크립트 시작  (0) 2023.09.06
AJAX 대 양식 제출  (0) 2023.09.06
배시 셸에서 Python 인라인을 실행하는 방법  (0) 2023.09.06
사용자 지정 루트 디렉터리의 하위 폴더 및 파일 순환  (0) 2023.09.06
를 합니다 합니다 를 에 초점을 맞출 때 모바일 기본 키보드를 방지합니다. 를 합니다 합니다 를 에 초점을 맞출 때 모바일 기본 키보드를 방지합니다. 를 합니다 합니다 를 에 초점을..  (0) 2023.09.06

'programing'의 다른글

  • 현재글그라디언트 배경과 함께 CSS3 전환

관련글

댓글

티스토리툴바