随便记一下用过的一些css效果

最新推荐文章于 2020-09-13 19:53:24 发布

samfung09

最新推荐文章于 2020-09-13 19:53:24 发布

阅读量285

点赞数

分类专栏： css 文章标签： css3动画

本文链接：https://blog.csdn.net/samfung09/article/details/82911885

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3d旋转的菜单选项

<!-- html -->
<ul>
    <li>
        <a href="javascript:;">
            <span>选项一</span>
            <span>option1</span>
        </a>
    </li>
    <li>
        <a href="javascript:;">                
            <span>选项二</span>
            <span>option2</span>
        </a>
    </li>
    <li>
        <a href="javascript:;">                    
            <span>选项三</span>
            <span>option3</span>
        </a>
    </li>
</ul>

/* css */
li{
    width: 200px;
    height: 60px;
    list-style: none;
    float: left;
    line-height: 60px;
    text-align: center;
    /* 透视景深 */
    perspective: 150px;
}
li > a, li span{
    display: block;
}
li > a{
    height: 60px;
    /* 3d样式 */
    transform-style: preserve-3d;
    transition: .5s;
    transform-origin: center center -30px;
}
li a span{
    /* 背面不可见 */
    backface-visibility: hidden;
}
li a span:last-child{
    background: pink;
    /* 先把另一面隐藏好 */
    transform: rotateX(-90deg);
    transform-origin: top;
}
li > a:hover{
    transform: rotateX(90deg);
}

效果图

导航栏滑块

html

<div class="nav">
    <ul class="nav-list">
        <li class="nav-item">首页</li>
        <li class="nav-item">导航一</li>
        <li class="nav-item">导航二</li>
        <li class="nav-item">导航三</li>
        <li class="nav-item">导航四</li>
        <li class="slider"></li>
    </ul>
</div>

css

*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.nav-list{
  display: flex;
  position: relative;
}
.nav-item{
  width: 120px;
  text-align: center;
  line-height: 40px;
  color: white;
  cursor: pointer;
}
.slider{
  width: 100px;
  height: 40px;
  background: #38afda;
  border-radius: 6px;
  position: absolute;
  z-index: -1;
  left: 10px;
  bottom: 0;
  transition: all 0.3s;
}
.nav-item:nth-child(1):hover ~ .slider{
  left: 10px;
}
.nav-item:nth-child(2):hover ~ .slider{
  left: 130px;
}
.nav-item:nth-child(3):hover ~ .slider{
  left: 250px;
}
.nav-item:nth-child(4):hover ~ .slider{
  left: 370px;
}
.nav-item:nth-child(5):hover ~ .slider{
  left: 490px;
}

效果

汉堡按钮

html

<div class="burger">
  <div class="top-line"></div>
  <div class="middle-line"></div>
  <div class="bottom-line"></div>
</div>

css

.burger{
  width: 60px;
  height: 50px;
  border: 3px white solid;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.burger > div{
  width: 40px;
  height: 3px;
  background: white;
  transition: all 0.3s;
}
.burger.active .top-line{
  transform: rotate(45deg) translate(12px, 11px);
}
.burger.active .bottom-line{
  transform: rotate(-45deg) translate(12px, -11px);
}
.burger.active .middle-line{
  transform: translateX(-30px);
  opacity: 0;
}

let burgerBtn = document.querySelector('.burger');
let flag = false;
      
burgerBtn.onclick = function(){
    if(!flag){
        this.classList.toggle('active');
        flag = true;
    }else{
        this.classList.remove('active');
        flag = false;
    }
}

效果

进度条动画

html

<ul>
    <li class="html5">HTML5</li>
    <li class="css3">CSS3</li>
    <li class="js">JavaScript</li>
    <li class="vue">Vue</li>
    <li class="react">React</li>
</ul>

css

ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
li{
  width: 500px;
  position: relative;
  margin-bottom: 50px;
  color: white;
}
li::before, li::after{
  content: "";
  display: block;
  height: 20px;
  background-color: #1f4a59;
  border-radius: 10px;
  position: absolute;
  bottom: -28px;
}
li::before{
  width: 100%;
}
li::after{
  background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
  /*动画时长*/
  animation-duration: 1.2s;
  /*动画模式，动画停止时停在最后*/
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
li.html5::after{
  animation-name: html5;
}
li.css3::after{
  animation-name: css3;
}
li.js::after{
  animation-name: js;
}
li.vue::after{
  animation-name: vue;
}
li.react::after{
  animation-name: react;
}
@keyframes html5{
  from {width: 0;}
  to {width: 90%;}
}
@keyframes css3{
  from {width: 0;}
  to {width: 70%;}
}
@keyframes js{
  from {width: 0;}
  to {width: 80%;}
}
@keyframes vue{
  from {width: 0;}
  to {width: 90%;}
}
@keyframes react{
  from {width: 0;}
  to {width: 80%;}
}

效果

圆圈转动

html

<div id="wrap">
    <div class="box-left">
        <div class="circle-left"></div>
    </div>
    <div class="box-right">
        <div class="circle-right"></div>
    </div>
</div>

css

#wrap{
  width: 200px;
  height: 200px;
  margin: 200px auto;
  position: relative;
  border-radius: 50%;
}

/*底部圆圈*/
#wrap::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border: 10px solid rgba(255,255,255,0.5);
  border-radius: 50%;
}

/*左右两个盒子里面各放着一个半圆圈，主要overflow*/
.box-left, .box-right{
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.box-left, .circle-left{
  left: 0;
}
.box-right, .circle-right{
  right: 0;
}
.circle-left, .circle-right{
  width: 200%;
  height: 100%;
  box-sizing: border-box;
  border: 10px blue solid;
  border-radius: 50%;
  position: absolute;
  top: 0;
}

/*左边盒子里的圆圈初始时只显示右半边*/
.circle-left{
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  animation: circleRotate 2s linear forwards 2s;
}
/*右边盒子里的圆圈初始时只显示左半边*/
.circle-right{
  border-bottom-color: transparent; 
  border-right-color: transparent; 
  transform: rotate(-45deg);
  animation: circleRotate 2s linear forwards;
}
@keyframes circleRotate{
  from {transform: rotate(-45deg)}
  to {transform: rotate(135deg)}
}

效果

body背景图固定，其他元素正常滚动

知识点：

background-attachment: fixed; 固定背景图片。
background-size在background复合样式中使用时必须要有background-position且用 / 分割（如：center/cover）

方法1

html

<body>
    <div id="container">
        <div class="gap"></div>
        <div class="text"></div>
        <div class="gap"></div>
        <div class="text"></div>
        <div class="gap"></div>
        <div class="text"></div>
        <div class="gap"></div>
        <div class="text"></div>
        <div class="gap"></div>
    </div>
</body>

css

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background: url("https://images.pexels.com/photos/1054289/pexels-photo-1054289.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") no-repeat fixed center/cover;
    /* background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: center;
    background-size: cover; */
}
.text{
    width: 80%;
    height: 300px;
    background-color: white;
    border: 1px red solid;
    margin: 0 auto;
}
.gap{
    width: 100vw;
    height: 300px;
}

注意：background-attachment在移动端不太支持，这时可以用一个元素固定定位全屏达到同样效果。

body:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(path/to/image) center 0 no-repeat;
  background-size: cover;
}

方法2

html

<div class="article">内容...</div>
<div class="gap"></div>
<div class="article">内容...</div>

css

*{
  margin: 0;
  padding: 0;
}
html{
  overflow: hidden;
}
body{
  height: 100vh;
  overflow-y: auto;
  background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579010052674&di=50846ec6e5d032cd5d0d4b6075da977c&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F54a212912e5dd.jpg") no-repeat;
  background-size: cover;
}
.gap{
  height: 500px;
}
.article{
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 3em 1em;
  text-indent: 2em;
  text-align: justify;
  line-height: 1.5em;
  letter-spacing: 0.1em;
}

效果

类似mac桌面导航菜单鼠标划过动画

html

<div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
    <div class="box box7"></div>
    <div class="box box8"></div>
</div>

css

.wrapper{
    width: 900px;
    height: 100px;
    /*border: 3px white solid;*/
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 100px;
}
.box{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition: all 0.3s ease-out;
}
.box1{
    background-color: #880015;
}
.box2{
    background-color: #ed1c24;
}
.box3{
    background-color: #ff7f27;
}
.box4{
    background-color: #fff200;
}
.box5{
    background-color: #22b14c;
}
.box6{
    background-color: #00a2e8;
}
.box7{
    background-color: #3f48cc;
}
.box8{
    background-color: #a349a4;
}

var aBox = document.querySelectorAll('.box');
aBox.forEach((el, index) => {
    el.onmouseenter = function(){
        // 当前元素变大到1.6倍      
        el.style.width = '160px';
        el.style.height = '160px';
        // 相邻两个元素变大到1.2倍
        aBox[index+1] ? (aBox[index+1].style.width = '120px', aBox[index+1].style.height = '120px') : null;
        aBox[index-1] ? (aBox[index-1].style.width = '120px', aBox[index-1].style.height = '120px') : null;
    }

    el.onmouseleave = function(){
        aBox.forEach(el => {
            // 元素恢复到原来大小
            el.style.width = '100px';
            el.style.height = '100px';
        })
    }
})

效果：

samfung09

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
随便记一下用过的一些css效果

3d旋转的菜单选项<ul> <li> <a href="javascript:;"> <span>选项一</span> <span>option1</span> </a>...
复制链接

扫一扫

专栏目录