css小样式汇总

花儿开富贵花

已于 2023-03-24 16:14:07 修改

阅读量125

点赞数

文章标签：前端

于 2022-06-09 17:06:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43843679/article/details/125206983

版权

css

几个块元素之间间距问题

在这里插入图片描述

    //&-info是该div的父类
    &-info div:not(:last-child) {
        margin-right: 50px;
    }

渐变边框，圆角矩形渐变背景，水球，svg

在这里插入图片描述

<template>
    <div class="demo-nav">
        <div class="demo1"></div>
        <div class="demo2" style="margin-top: 10px" ref="demo2"></div>
        <div class="per-content">{{per}}%</div>
        <div class="box-inner">
            <div class="inner" ref="inner">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
                   <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
                    </path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
                   <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
                    </path>
                </svg>
                <!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
                   <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
                    </path>
                </svg> -->
            </div>
        </div>
        <!-- 改后缀名为svg的icon颜色, svg中的fill为currentColor，继承的是父类color -->
        <div class="demo-svg" style="color: green">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>元件/组件图标/提示/面</title>
                <g id="元件/组件图标/提示/面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M7.5,11.5 C7.5,11.7762581 7.72387097,12 8,12 C8.27612903,12 8.5,11.7762581 8.5,11.5 C8.5,11.2237419 8.27612903,11 8,11 C7.72387097,11 7.5,11.2237419 7.5,11.5 Z M8,4 C7.72385763,4 7.5,4.22385763 7.5,4.5 L7.5,9.5 C7.5,9.77614237 7.72385763,10 8,10 C8.27614237,10 8.5,9.77614237 8.5,9.5 L8.5,4.5 C8.5,4.22385763 8.27614237,4 8,4 Z" id="icon换色层" fill="currentColor"></path>
                </g>
            </svg>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            per: 0
        }
    },
    mounted() {
        this.getData()
    },
    destroyed() {},
    methods: {
        getData() {
            let i = 0
            let timer = null
            timer = setInterval(() => {
                if(i < 100) {
                    i++
                    this.$refs.inner.style.bottom = (-128 + i) + '%'
                    this.per = i
                } else {
                    i = 0;
                    clearInterval(timer)
                    this.$refs.inner.style.bottom = -128 + '%'
                    this.per = 0
                    this.getData()
                }
            }, 90);

        }
    }
}
</script>
<style scoped>
.demo-nav {
    padding: 30px;
}
.demo1 {
    width: 60px;
    height: 60px;
    border: 2px solid;
    border-image: linear-gradient(180deg, red, orange) 1;
}
.demo2 {
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    background-image: linear-gradient(180deg, red, orange), linear-gradient(180deg, red, orange);
    /* 前一个内容背景色，后面为边框渐变色 */
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 10px;
    animation: 2s toBorder linear infinite alternate;
}
@keyframes toBorder {
    100% {
        border-radius: 50%;
    }
}

.box-inner {
    width: 200px;
    height: 200px;
    box-shadow: 0px 2px 7px 0px #238fdb;
    border-radius: 50%;
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(#021f40, #021f40), linear-gradient(180deg, rgba(36, 144, 220, 0.41), rgba(37, 147, 225, 1));
    background-origin: border-box;
    background-clip: content-box, border-box;
    overflow: hidden;
    
}
.inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0%;
    background-color: #a0edff;
}
.box-waves {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 200%;
    /* fill: #a0edff; */
    stroke: none;
}
.box-waves:nth-child(1) {
    fill: #146DA1;
    transform: translate(-50%, 0);
    z-index: 3;
    animation: wave-move1 1.5s linear infinite;
}
.box-waves:nth-child(2) {
    fill: #a0edff;
    transform: translate(0, 0);
    z-index: 3;
    animation: wave-move2 2s linear infinite;
    margin-bottom: -2px;
}
.box-waves:nth-child(3) {
    fill: #9dd1f0;
    transform: translate(0, 0);
    z-index: 3;
    animation: wave-move3 1.5s linear infinite;
}
@keyframes wave-move1 {
    100% {
        transform: translate(0, 0);
    }
}
@keyframes wave-move2 {
    100% {
        transform: translate(-50%, 0);
    }
}
@keyframes wave-move3 {
    100% {
        transform: translate(-50%, 0);
    }
}
.per-content {
    /* position: absolute; */
    z-index: 10;
    position: relative;
    top: 106px;
    left: 80px;
    font-size: 20px;
}
.demo-svg {
    /* width: 200px;
    height: 200px;
    border: 1px solid red; */
}
/* .svg  {
  fill: #77809F;
  color: #dae0f8;
} */
</style>

图片旋转360deg

<img src="../assets/logo.png" alt="" class="cover-anim">
.cover-anim {
    animation: coverRoute 16s linear infinite;
}
@keyframes coverRoute {
    form {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

让字体显示一行，超出隐藏并显示点点点

<div class="father">
    <div class="son">让字体显示一行，超出隐藏并显示点点点</div>
</div>
.father {
    width: 80px;
    overflow: hidden;
}
.son {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

显示二行，超出隐藏，显示点点点

<div class="father1">
     <div class="son1">显示二行，超出隐藏，显示点点点</div>
</div>
.father1 {
    width: 80px;
    overflow: hidden;
}
.son1 {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
}

网站置灰

在这里插入图片描述

// 根目录标签下
.app {
  filter: grayscale(.95);
  -webkit-filter: grayscale(.95);
}

毛玻璃

backdrop-filter
backdrop-filter: none|filter|initial|inherit;
在这里插入图片描述

<div class="test">
	<div class="child">123456</div>
</div>
.test {
    width: 400px;
    height: 400px;
    background: url('../assets/hchunf_ctn.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .child {
        width: 300px;
        height: 300px;
        background-color: rgba(255, 255, 255, .7);
        backdrop-filter: blur(10px);
    }
}

data中定义得值

<div class="login">
	<div class="width-login"></div>
</div>

data() {
  return {
    uwidth: '10px'
  };
  },
.login {
	--uid-with: v-bind(uwidth);
	.width-login {
  		width: var(--uid-with);
  		height: var(--uid-with);
  		border: 1px solid red;
	}
}

css样式网址收集

https://juejin.cn/post/7164527444731363336
运动图形小特效：
https://juejin.cn/post/7166142204019228702
三角形、五角星：
https://juejin.cn/post/7114306621144039455
对话框：
https://juejin.cn/post/7124314655110987807
水球进度条：
https://juejin.cn/post/7164050832181166094
svg：
https://juejin.cn/post/6926353919333531661
动态霓虹灯：
https://juejin.cn/post/6844903493799510029