css,Code片段,代码实例,代码示例,代码片段库

css 渐变边框

gradient.css

.gradient-border{
  border: 3px solid;
  border-image-source: linear-gradient(0, #5597E4, #2F54A0);
  border-image-slice: 1;
  border-radius: 10px;
  padding:20px;
}

css Bonita Css风格

base.css

.btn.btn-primary {
    border-radius: 23px;
    border: none;
    padding: 8px 30px;
    outline: none;
    background: linear-gradient(90deg, rgba(82, 151, 255, 1) 0%, rgba(45, 96, 255, 1) 100%);
}

.btn.btn-primary:focus,
.btn.btn-primary:active {
    outline: none;
}

css Адаптивніетаблицізасчетскрола

function.php

add_action( 'wp_footer', 'art_responsive_tables' );
function art_responsive_tables() {
   if ( is_singular() ) {
      ?>
      <script>
            jQuery(document).ready(function ($) {
                $('article table').wrap('<div class="table-cover"></div>');
            });
      </script>
      <style>
         @media screen and (max-width: 1035px) {
            .table-cover {
               width: 100%;
               overflow: auto;
               margin: 0 0 1em;
            }
         }
      </style>
      <?php
   }
}

style.css

@media screen and (max-width: 1035px) { // на всех экранах шириной до 1035 пикселей
        .table-cover {
		width: 100%;
		overflow: auto;
		margin: 0 0 1em;
	}
}

css @媒体

@媒体

media.css

/* ***************************** */    
/* @media            */
/* ***************************** */

  .submenu {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}



@media screen {
  .submenu {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}


$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
 
@media #{$media} and ($feature: $value) {
  .submenu {
    width: 500px;
  }
}

css 使用jQuery进行平滑滚动

script.js

jQuery(document).ready(function ($) {

/**
 * Smooth Scrolling
 * @link https://css-tricks.com/snippets/jquery/smooth-scrolling/
 */

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      &&
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

});

style.css

html {
  // Not supported in all browsers yet
  scroll-behavior: smooth;
}

css 清除清动浮动

clearfix.css

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

css 向下箭头雪佛龙seta pra baixo css

css.css

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

css 更改divi手机菜单汉堡包

divi mobile menucolor

@media only screen and (max-width: 980px)  {
	#et-top-navigation span.mobile_menu_bar:before, 
	#et-top-navigation span.mobile_menu_bar:after {
		color: #ffffff !important;
	}
}

css 动画反弹CSS

Animation Bounce

  .animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  @-webkit-keyframes bounce {
    0%, 100% {
      -webkit-transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-5px);
    }
  }
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
  }
 
  hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
  }

css Aria展开三角形图标

triangle

a[aria-expanded="true"] .triangle-down {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);  
  margin-left: 20px;
} 


.triangle-down{
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-left: 20px;
}