css高级用法

暗逆骇客

已于 2023-12-11 13:54:11 修改

阅读量390

点赞数 5

分类专栏： cssgao jue 文章标签： css 前端 css3

于 2023-12-07 18:41:00 首次发布

本文链接：https://blog.csdn.net/qq_60833398/article/details/134856833

版权

cssgao jue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

*

*{
  margin:0;
  padding:0;
  box-sizing:0;
 }

html

html{
    font-size:62.5%;//10px相当于1rem=10px, 浏览器默认字体样式16px
}

body

body{
    font-family:"Lato" , "sanc-serif";
    font-weight:400;
    font-size:16px;
    line-height:1.7;
    color:#777;
    padding:30px;
}

header

<header class="header"><header/>

.header

.header{
    
    height:95vh;
    background-image:linear-gradient(
    to right bottom,
    rgba(233, 10, 10, 0.605),
    rgba(233, 10, 81, 0.556)
),
url(https://profile-avatar.csdnimg.cn          
/53d9c599239240838726414827154882_qq_60833398.jpg!1);
    background-size:cover;
     background-position:top;
    clip-path:polygon(0 0 ,100% 0,100% 25vh,0 100%);
    position:relative;
}

<div class="logo-box">
    <img src="img/logo.png" alt="trillo logo" class="logo">//alt seo
</div>

.logo-box

.logo-box{
    position:absolute;
    left:40px;
    top:40px;
}

.logo

.logo{
    height:40px;
}

.logo:hover

.logo:hover{
    animation: moveInleft 1s ease-out
}

<div class="text-box">
            <h1 class="heading-primary">//h1 seo
                <span class="heading-primary-main">页面标题</span>
                <span class="heading-primary-sub">页面标题描述</span>
             </h1>
</div>

<div class="text-box">
            <h1 class="heading-primary">//h1 seo
                <span class="heading-primary-main">页面标题</span>
                <span class="heading-primary-sub">页面标题描述</span>
             </h1>
            <a href="#"  class="btn btn-white">按钮</a>
</div>

.text-box

.text-box{
    postion:absolute;
    left:40%;
    top:50%;
    transform:translate(-50%,-50%);
}

.text-box{
    postion:absolute;
    left:40%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align: center;
}

.heading-primary

.heading-primary{
    color:#ffffff;
    text-transfrom:uppercase;
    
}

.heading-primary{
    color:#ffffff;
    text-transfrom:uppercase;
    backface-visibility:hidden;
    
}

.heading-primary{
    color:#ffffff;
    text-transfrom:uppercase;
    backface-visibility:hidden;
    margin-bottom: 60px;
    
}

.heading-primary-main

.heading-primary-main{
    display:block;
    font-size:60px;
    font-weight:400;
    letter-spacing:35px;
  }

.heading-primary-main{
    display:block;
    font-size:60px;
    font-weight:400;
    letter-spacing:35px;
    animation-name: moveInleft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
  /* animation-iteration-count: 3;
  animation-delay: 3s; */
  }

.heading-primary-sub

.heading-primary-sub{
     display:block;
    font-size:20px;
    font-weight:700;
    letter-spacing:17.4px;
}

@keyframes moveInleft

@keyframes moveInleft {
    0% {  
      opacity: 0;
      transform: translateX(-100px);
    }
    80%{
      transform: translateX(10px);
    }
    100%{
      opacity: 1;
      transform: translateX(0);
    }
}

@keyframes moveInright

@keyframes moveInright {
    0% {  
      opacity: 0;
      transform: translateX(100px);
    }
    80%{
      transform: translateX(-10px);
    }
    100%{
      opacity: 1;
      transform: translateX(0);
    }
}

<a href="#"  class="btn btn-white btn-animated">按钮</a>

.btn:link

.btn:visited

       .btn:link,
       .btn:visited
{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline;
    transform:all 0.3s
}

.btn:active

 .btn:active{
    transform: translateY(-3px);
    box-shadow:0 5px 10px rgba(0,0,0,0.2);
   }

.btn:hover

.btn:hover{
    transform: translateY(-1px);
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
   }

.btn-white

 .btn-white{
    background-color: #fff;
    color: #777;
   }

.btn::after

.btn::after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s;
    z-index: -1;
   }

.btn:hover::after

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn-animated

.btn-animated{
    animation: alternate 0.5s ease-out 0.75;
    animation-fill-mode: backwards;
}

@keyframes moveInbutton

@keyframes moveInbutton{
    0%{
        opacity: 0;
        transform: translateY(30px);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}

清除浮动.clearfix::after

.clearfix::after{
    content: '';
    clear:both;
    display: table;
}

sass

npm i node-sass

sass使用方法

@mixin clearfix{
   &:{
    content: '';
    clear:both;
    display: table;
    }
}
nav{
       
     @include clearfix;
}



$color-white:#fff;
@mixin text（$color-white）{
     color:$color-white;
    
}

nav{
       
     @include text;
}


@fuction divide($a,$b){
    @return $a/$b
}
nav{
       
    margin:divide(60,2) * 1px;
}

%button{}{
    margin:divide(60,2) * 1px;
}
nav{
    @extend:%button;
}

main

<main>
<diV class="section-about">
    <div class="u-center-text">
      <h2 class="section-about">h2</h2> 
    </div>  
</div>
</main>

文字渐变.section-about

.section-about{
    background-color: $color;
padding: 25rem 0;
margin-top:-20vh;

}

.heading-secondary

.heading-secondary{
    font-size: 3.5rem;
    text-transform: uppercase;
    font-size: 700;
    display: inline-block;
    background-image: linear-gradient(to right, #000000, #000000);
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: 0.2rem;
    translate: all 0.3s;
    & : hover{
        transform: skewY(2deg) skewY(15deg) scale: (1,1);
        text-shadow: 0.5rem 1rem 2rem rgba(0,0,0,0.5);
    }

}

三张图片重叠显示特效

<div class="composition">
<img src="img/nat-1. ipg" alt="photo 1" class="composition_photo composition_photo--p1">
<img src="img/nat-2.ipg" alt="photo 2" class="composition_photo composition_photo--p2">
<img src="img/nat-3. ipg" alt="Photo 3" class="composition_photo composition_photo--p3">
</div>

$color-black:#666;
.composition{
position: relative;
&_photo{
width: 55%;
box-shadow: 0 1.5rem 4rem 口rgba($color-black, .4);
border-radius: 2px;
position: absolute;
z-index:10;
transition: all .2s;
outline-offset: 2rem;
&--p1 {
left: 0;
top: -2rem;}
&--p2 {
right: 0;
top: 2rem;
}
&-p3 {
left: 20%;
top: 10rem;
}
&:hover {
outline: 1.5rem solid $color-primary;transform: scale(1.05);
box-shadow: 0 2.5rem 4rem 口rgba($color-black,.5);
z-index: 20;
}
}
}

卡片旋转特效

<div class="card">
<div class="card side card side--front">FRONT
</div>
<div class="card sidecard_side--back card side--back-1">BACK
</div>
</div>

.card{
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem;
&_side {
height:50rem;
font-size: 2rem;
color: #fff;
transition:all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem 口rgba($color-black,.15);
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(-180deg);
}
&-1 {
background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark) ;
}
}
&:hover &_side--front {
transform: rotateY(-180deg);
}
&:hover &_side--back {
transform: rotateY(0)
}
}

图文混排

   <div class='story >
                        <figure class="story_shape">
                        <img src="img/nat-8. jpg" alt="Person on a tour' class="story_img"/>
                        </figure>
                        <div class="story text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            
                            I had the best week ever with my family
                        </h3>
                            <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspern
                        </p>
                        </div>
                        </div>

.story{
width:75%;
margin:  auto;
box-shadow: 0 3rem 6rem rgba($color-black,.1);background-color: $color-white;
border-radius: 3px;
padding: 6rem;padding-left: 9rem;
font-size: $default-font-size;transform: skewX(-12deg);
&_shape {
width: 15rem;
height: 15rem;
float: left;}
webkit-shape-outside: circle(50% at 50% 50%);shape-outside: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);clip-path: circle(50% at 50% 50%);transform: translateX(-3rem) skewX(12deg);
&_img {
height: 100%
}
&_text {
transform: skewX(12deg);
}}

图像阴影img

img:hover{
    filter:blur(3px) brightness(80%);
}

背景视频video

<div class="bg-video">
    <video class="bg-video_ content' autoplay muted loop>
        <source src="img/video.mp4'type="video/mp4">
        <source src="img/video.webm' type="video/webm">
        Your browser is not supported!
    </video>
</div>



.bg-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: .15;
overflow: hidden;

&_content {
height: 100%;
width: 100%;
object-fit: cover;
}
}

li悬浮特效.link


.link {
    &:link,
    &:visited {
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: $color-white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%,$color-white 50%);
    background-size: 220%;
    transition: all .4s;
    }
    &:hover,
    &:active {
    background-position: 100%;
    color: $color-primary;
    transform: translateX(1rem);
    }
}

去除滚动条样式

/* WebKit浏览器（Chrome、Safari） */
::-webkit-scrollbar {
  width: 0.01px;
  height: 0.01px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color:transparent;
}

/* Firefox */
/* 注意：Firefox的滚动条样式要求使用 -moz- 前缀 */
/* Firefox的滚动条样式通常较难自定义 */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* IE浏览器 */
/* 注意：IE浏览器的滚动条样式要求使用 -ms- 前缀 */
* {
  -ms-overflow-style: none; /* 隐藏IE浏览器的滚动条 */
}

三种布局方法

浮动布局

flex布局

grid布局