Вопросы Теги

Фон, зависание и переход - Почему это не работает? [Дубликат]

Чтобы использовать методы и член объекта, вам сначала нужно создать этот объект. Если вы его не создали (переменная, которая должна содержать объект, не инициализируется), но вы пытаетесь использовать его методы или переменные, вы получите эту ошибку.

Иногда вы можете просто забыть инициализировать .

Отредактировано: new не может вернуть значение null, но исключение огня при ошибке. Давно это было на некоторых языках, но не больше. Спасибо @John Saunders за указание на это.

38
задан Johan Alkstål 9 September 2011 в 15:24
поделиться

8 ответов

Это сложно. И конечно сложно сложно:)

ладно .. у меня есть решение. и в основном это делается с помощью удивительного селектора :before 

#cool-hover{
	width: 120px;
	height: 120px;
	display: block;
	cursor: pointer;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	margin: 0px auto 24px auto;
	transition: all 0.5s;
	position: relative;
	overflow: hidden;
}
#cool-hover:before{
	border-radius: inherit;
	display: block;
	width: 200%;
	height: 200%;
	content: '';
  position: absolute;
  top: 0; left: 0;
	background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);	
	transition: all 0.5s;
	transform: translate(-25%, -25%);
	z-index: 0;
}
#cool-hover:after{
	border-radius: 9px;
	display: block;
	width: 108px;
	height: 108px;
	margin: 6px;
	background: url('https://i.imgur.com/w0BjFgr.png');
	background-size: cover;
	content: '';
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
}
#cool-hover:hover:before{
	transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
	box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>

ПРИМЕЧАНИЕ. Я просто добавил :after sudo class только для малого места для создания топографического изображения.

имеют приятный потрясающий стиль;)

7
ответ дан Biskrem Muhammad 25 August 2018 в 10:38
поделиться

Я знаю, что этот вопрос довольно старый, но я нашел хороший способ оживить базовые градиенты, которые будут работать в некоторых случаях.

Этот метод позволит вам анимировать изменение цвета градиента, но не изменение положения цвета прекращается.

https://jsfiddle.net/62vzydeh/

HTML: 

<div class="button">
    Click Me!
</div>

CSS: 

.button {

  width: 200px;
  height: 30px;

  margin: 50px;
  padding-top: 10px;

  color: #C0C0C0;
  background: linear-gradient(to left, #F8F8F8, transparent 30%);
  background-color: #808080;

  text-align: center;
  font-family: sans-serif;

  cursor: pointer;

  transition: background-color 500ms;
}

.button:hover {

  background-color: #A0A0A0;
}
1
ответ дан Gogeta70 25 August 2018 в 10:38
поделиться

Если вы делаете небольшую подсветку при наведении курсора на кнопку, это гораздо более простое решение. Вы можете просто немного подтолкнуть градиент и оставить фоновый цвет таким же, как верхний цвет вашего градиента: http://cdpn.io/oaByI

Это довольно ограниченный, я знаю, но если хорошо работает для этого случая использования.

2
ответ дан Hampus Ahlgren 25 August 2018 в 10:38
поделиться

К сожалению, на данный момент вы не можете переходить на градиенты.

Итак, единственное работоспособное обходное решение - использование дополнительного элемента с необходимым градиентом, а переход - непрозрачность: 

a.button {
  position: relative;
  z-index: 9;
  display: inline-block;
  padding: 0 10px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
  background: -webkit-linear-gradient(top, green, #a5c956);
  background: -moz-linear-gradient(top, green, #a5c956);
  background: -o-linear-gradient(top, green, #a5c956);
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
  background: -webkit-linear-gradient(top, lime, #89af37);
  background: -moz-linear-gradient(top, lime, #89af37);
  background: -o-linear-gradient(top, lime, #89af37);
  background: linear-gradient(top, lime, #89af37);
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}
<a href="#" class="button"><span class="button-helper"></span>button</a>

34
ответ дан Jon Uleis 25 August 2018 в 10:38
поделиться

Вы можете подделывать переходы градиента, используя тени тени! Например, с одной из моих страниц: 

c { 
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
    inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease; 
-o-transition: background-color .5s ease; 
-webkit-transition: background-color .5s ease-in-out; 
transition: background-color .5s ease;
}

Далее следуют: 

c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
        inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
    inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
        inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
    inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}

Здесь вы, по существу, используете вставную тень в виде маски, подобной Photoshop, эффект градиента на базовый элемент. При зависании вы инвертируете эффект.

4
ответ дан Mark Choi 25 August 2018 в 10:38
поделиться

вы должны иметь тот же стиль в источнике и изменить стиль в целевом.

как 

a {
   background: transparent;
   background: linear-gradient(transparent,transparent);
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
a:hover
{
   background: #abc07c;
   background: linear-gradient(#c5db95,#88a743);
}

-1
ответ дан Omid Moridi 25 August 2018 в 10:38
поделиться

взломанный способ, который я пытался, помещал много <spans> для репликации «позиции», CSS только взломал здесь: https://codepen.io/philipphilip/pen/OvXEaV

0
ответ дан philip 25 August 2018 в 10:38
поделиться

Я знаю это довольно старое, но пока не нашел хорошего решения. Поэтому я сделал для этого хорошее решение.

Сначала сделайте градиент «раньше» и спрячьте его с непрозрачностью, а затем непрозрачность перехода 1 при наведении.

https://jsfiddle.net/sumon380/osqLpboc/3/

HTML: 

<a href="#" class="button">Button</a>

CSS: 

.button {
    text-decoration: none;
    padding: 10px 25px;
    font-size: 20px;
    color: #333;
    display: inline-block;
    background: #d6e9eb;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease-out;

}
.button:before {
    background: #91a5f4;
    background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.button:hover:before {
    opacity: 1;
}
.button:hover {
    color: #fff;
}
0
ответ дан user2462948 25 August 2018 в 10:38
поделиться