Эффект угла слева и справа на вкладке 2 «Обо мне» не запускается - PullRequest
Новая
       7

Эффект угла слева и справа на вкладке 2 «Обо мне» не запускается

0 голосов
/ 21 апреля 2020

Я пытаюсь создать эффект запуска угла слева и справа на вкладке 2. «Обо мне».

Это код jsfiddle: https://jsfiddle.net/Krzysiek_35/L9v74tw1/82/

Вот код HTML / CSS / JavaScript: 

<body>
    <div class="tab-content">
        <ul class="tablist" role="tablist">
            <li id="tab1" class="tab curl-top-left" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Home</li>
            <li id="tab2" class="tab test-1 test-2" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">About me</li>
            <li id="tab3" class="tab curl-top-right" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Contact</li>
        </ul>
    </div>
</body>   

body {
    background-color: #363636;
    margin: 0;
    height: 100vh;
}

.tab-content {
    left: 7%;
    top: 15%;
    position: absolute;
}

.tablist {
    padding: 0;
    list-style-type: none;
}

.tab {
    float: left;
    margin-left: 0px;
    width: 180px;
    line-height: 35px;
    background-color: #33691e;
    color: #DDDDDD;
    font-family: verdana;
    letter-spacing: .025em;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    outline: none;
    margin-right: 8px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.one {
    float: left;
    margin-left: 0px;
    width: 180px;
    line-height: 35px;
    background-color: #191919;
    color: #DDDDDD;
    font-family: verdana;
    letter-spacing: .025em;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    outline: none;
    margin-right: 8px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.curl-top-left {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.curl-top-left:before {
    pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.curl-top-left:hover:before {
    width: 20px;
    height: 20px;
}

.curl-top-right {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.curl-top-right:before {
    pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.curl-top-right:hover:before {
    width: 20px;
    height: 20px;
}

.test-1 {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.test-1:before {
    pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.test-1:hover:before {
    width: 20px;
    height: 20px;
}

.test-2 {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.test-2:before {
    pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.test-2:hover:before {
    width: 20px;
    height: 20px;
}

.tab:hover {
    color: #DDDDDD;
    cursor: pointer;
    background-color: #191919;
}

$(function() {
    $("#tab1").addClass('one');

    $('#tab1').click(function() {
        $("#tab1").addClass('one');
        $("#tab2").removeClass('one');
        $("#tab3").removeClass('one');
    });

    $('#tab2').click(function() {
        $("#tab1").removeClass('one');
        $("#tab2").addClass('one');
        $("#tab3").removeClass('one');
    });

    $('#tab3').click(function() {
        $("#tab1").removeClass('one');
        $("#tab2").removeClass('one');
        $("#tab3").addClass('one');
    });
});

Мне бы хотелось, чтобы этот эффект хорошо работал слева и справа в вкладка 2 «Обо мне».

Знаете ли вы, как заставить этот эффект работать хорошо?

Я буду очень благодарен за эффективную помощь.

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Как я понимаю, вы хотите, чтобы этот эффект был на обеих сторонах вкладки "Обо мне", если это реальная потребность, вот решение, если вам нужно что-то еще, не стесняйтесь спрашивать ... 

body
{
	background-color: #363636;
	margin: 0;
	height: 100vh;
}

.tab-content
{
	left: 7%;
	top: 15%;
	position: absolute;
}

.tablist
{
	padding: 0;
	list-style-type: none;
}

.tab
{
  float: left;
  margin-left: 0px;
  width: 180px;
  line-height: 35px;
  background-color: #33691e;
  color: #DDDDDD;
  font-family: verdana;
  letter-spacing: .025em;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  outline: none;
  margin-right: 8px;
	-webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.one
{
  float: left;
  margin-left: 0px;
  width: 180px;
  line-height: 35px;
  background-color: #191919;
  color: #DDDDDD;
  font-family: verdana;
  letter-spacing: .025em;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  outline: none;
  margin-right: 8px;
	-webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

 .curl-top-left
{
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.curl-top-left:before
{
	pointer-events: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
	left: 0;
	top: 0;
	background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-top-left:hover:before, .curl-top-left:active:before, .curl-top-left:focus:before
{
  width: 20px;
  height: 20px;
}

.curl-top-right
{
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.curl-top-right:before
{
	pointer-events: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
	top: 0;
	right: 0;
	background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-top-right:hover:before, .curl-top-right:active:before, .curl-top-right:focus:before
{
  width: 20px;
  height: 20px;
}

 .test-1
{
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.test-1:before
{
	pointer-events: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 0;
  background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, 
  white 80%);
  background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 
  80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
  startColorstr='#ffffff', endColorstr='#000000');
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.test-1:hover:before, .test-1:focus:before, .test-1:active:before
{
  width: 20px;
  height: 20px;
}

.test-2
{
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.test-2:before
{
	pointer-events: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
	top: 0;
	right: 0;
	background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.test-1:after {
  pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.test-2:hover:before, .test-1:hover:after, .test-2:focus:before, .test-1:focus:after, .test-2:active:before, .test-1:active:after
{
  width: 20px;
  height: 20px;
}

.tab:hover, .tab:active, .tab:focus
{
	color: #DDDDDD;
	cursor: pointer;
	background-color: #191919;
}
<body>

	<div class="tab-content">
  
		<ul class="tablist" role="tablist">
			<li id="tab1" class="tab curl-top-left" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Home</li>
			<li id="tab2" class="tab test-1 test-2" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">About me</li>
			<li id="tab3" class="tab curl-top-right" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Contact</li>
		</ul>
    
	</div>
  
</body>
0 голосов
/ 21 апреля 2020

Из .test-1: перед {}, Удалить слева: 0; имущество. 

.test-1:before {
  pointer-events: none;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 0;
  background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, 
  white 80%);
  background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 
  80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
  startColorstr='#ffffff', endColorstr='#000000');
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...