43.纯 CSS 绘制一个充满动感的 Vue logo

原文地址:https://segmentfault.com/a/1190000015177284

感想: 又有点回到boder的三角形

HTML code:

<div class="vue">
  <span class="outer"></span>
  <span class="middle"></span>
  <span class="inner"></span>
</div>

CSS code:

/* 系统默认font-size: 12px; 此值只能调大,不能再小 */
html,body{
    margin: 0;
    padding: 0;
}
body{
    font-size: 6px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, lightgreen, white);
}
/* 定义3层三角形的尺寸 */
:root{
    --outer-w: 49em;
    --outer-h: 40em;
    --middle-w: 32em;
    --middle-h: 26em;
    --inner-w: 16em;
    --inner-h: 13em;
}
.vue{
    font-size: 6px;
    width: var(--outer-w);
    height: var(--outer-h);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;/* 这是默认的 */
    overflow: hidden;
}
.outer{
    --w: var(--outer-w);
    --h: var(--outer-h);
    --c: #42b883;
}
.vue .outer,
.vue .middle,
.vue .inner{
    position: absolute;
    border-style: solid;
    border-color: transparent;
    border-top-width: var(--h);
    border-top-color: var(--c);
    border-left-width: calc(var(--w ) / 2);
    border-right-width: calc(var(--w) / 2);
    animation: in-and-out 3s linear infinite;
}
.vue .middle{
    --w: var(--middle-w);
    --h: var(--middle-h);
    --c: #35495e;
    animation-delay: 0.1s;
}
.vue .inner{
    --w: var(--inner-w);
    --h: var(--inner-h);
    --c: white;
    animation-delay: 0.2s;
}
@keyframes in-and-out{
    0%, 5%{
        top: -100%;
    }
    15%, 80%{
        top: 0;
        filter: opacity(1);
        transform: scale(1);
    }
    90%, 100%{
        top: 100%;
        filter: opacity(0);
        transform: scale(0);
    }
}

原文地址:https://www.cnblogs.com/FlyingLiao/p/10445930.html

时间: 2024-10-08 14:05:22

43.纯 CSS 绘制一个充满动感的 Vue logo的相关文章

如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/czPkasr 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comeh

28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形

原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: <!-- penrose: 彭罗斯 --> <div class="penrose"> <span></span> <span></span> <span></span> </div> CSS代码: html, body { margin: 0

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle (圆形

前端每日实战:2.纯 CSS 创作一个矩形旋转 loader 特效

原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HTML代码: <div class="loader"> <span></span> <span></span> <span></span> </div> CSS代码: /* 居中显示 */ htm

前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效

原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class="content"> <h2>What is Lorem Ipsum?</h2> <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risu

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单 控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因 可以配合上transform: scale() 让弹窗更有动态感觉 全部代码: <!DOCT

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

纯css实现扁平化360卫士logo demo

前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄.不过,好在以前用过photoshop绘制过一些简单的icon.所以,经过我仔细 的分析.大概有了思路,这两个东东是可以利用box-shadow这个属性来实现.虽然跟photoshop绘制有点不同,但是大致还是差不多的. 代码效果预览地址:http://code.w3ctech.co