收藏几个纯CSS效果工具代码备用

3027
主题模板, 工具代码, 教程, CSS样式
1 分钟

本文最后由 荒野孤灯 更新于 2023 年 11 月 20 日，已超过 157 天没有更新。如果文章内容或图片资源失效，请留言反馈，将会及时处理，谢谢！

今天逛 泽泽社 发现几个比较好看的 css 样式，整理后，收藏备用。

CSS 按钮发光效果

Button1 Button2

CSS 样式:

.con{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.con a{
    position: relative;
    width: 160px;
    height: 60px;
    display: inline-block;
    background: #fff;
    margin: 20px;
}
.con a:before,
.con a:after{
    content: '';
    position: absolute;
    inset:0;
    background: #f00;
    transition: 0.5s;
}
.con a:nth-child(1):before,
.con a:nth-child(1):after{
background: linear-gradient(45deg,#00ccff,#0e1538,#0e1538,#d400d4);
}
.con a:nth-child(2):before,
.con a:nth-child(2):after{
background: linear-gradient(45deg,#ff075b,#0e1538,#0e1538,#1aff22);
}

.con a:hover:before{
    inset:-3px;
}

.con a:hover:after{
    inset:-3px;
    filter: blur(10px);
}
.con a span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: #0e1538;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    border: 1px solid #040a29;
    overflow: hidden;
}
.con a span::before{
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.075);
    transform: skew(25deg);
}

按钮代码：

<div class="con">
    <a href="#"><span>Button1</span></a>
    <a href="#"><span>Button2</span></a>
</div>

阴影图片素材实现弯曲阴影

图片素材实现弯曲阴影

CSS 样式：

.box{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.curved{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F6F6F6;
}
.curved .shadow{
    position: relative;
    width: 250px;
    height: 300px;
    z-index: 2;
}
.curved .shadow div{
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e2e2e2;
    color: #000;
    font-size: 1.2em;
}
.curved .shadow::after{
    clear: both;
    background: url(./shadow-left.png) bottom left no-repeat;
    content: '';
    display: block;
    width: 100px;
    height: 15px;
    position: absolute;
    bottom: -11px;
    left: -3px;
}
.curved .shadow::before{
    background: url(./shadow-right.png) bottom center no-repeat;
    content: '';
    display: block;
    width: 100px;
    height: 15px;
    position: absolute;
    bottom: -9px;
    right: -6px;
}

html 代码：

    <div class="con">
        <div class="box curved">
            <div class="shadow"><div>图片素材实现弯曲阴影</div></div>
        </div>
    </div>

纯 CSS 实现弯曲阴影与彩色阴影

弯曲效果阴影
彩色阴影

CSS 样式：

.box1{
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.curved{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fffa4e;
}
.curved .shadow{
    position: relative;
    width: 500px;
    height: 250px;
    z-index: 2;
}
.curved .shadow div{
    position: relative;
    width: 100%;
    height: 100%;
    background: #4acaff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #fff;
    color: #fff;
    font-size: 2em;
    z-index: 2;
}
.curved .shadow::after{
    content: '';
    position: absolute;
    bottom: 30px;
    left: 4%;
    width: 70%;
    height: 70%;
    background: #000;
    transform-origin: right;
    transform: skewY(-7.5deg);
    filter: blur(15px);
    opacity: 0.5;
    z-index: 1;
}
.curved .shadow::before{
    content: '';
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 70%;
    height: 70%;
    background: #000;
    transform-origin: left;
    transform: skewY(7.5deg);
    filter: blur(15px);
    opacity: 0.5;
    z-index: 1;
}
.colored .shadow{
position: relative;
width: 500px;
height: 250px;
background: #ff4370;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2em;
}
.colored .shadow::before{
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -15px;
    height: 40px;
    background: #ff4370;
    border-radius: 50%;
    filter:blur(20px);
}
.colored .shadow::after{
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -15px;
    height: 40px;
    background: #ff4370;
    border-radius: 50%;
    filter:blur(40px);
}

html 代码：

    <div class="con">
    <!-- 效果一 -->
        <div class="box1 curved">
            <div class="shadow"><div>弯曲效果阴影</div></div>
        </div>
    <!-- 效果二 -->        
        <div class="box1 colored">
            <div class="shadow"><div>彩色阴影</div></div>
        </div>        
    </div>

一个炫酷的 canvas 动态背景

动态背景见本页面，代码如下：

<canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"  id="canvas"></canvas>
<script>
var canvas,
    ctx,
    width,
    height,
    size,
    lines,
    tick;

function line() {
    this.path = [];
    this.speed = rand(10, 20);
    this.count = randInt(10, 30);
    this.x = width / 2, +1;
    this.y = height / 2 + 1;
    this.target = {
        x: width / 2,
        y: height / 2
    };
    this.dist = 0;
    this.angle = 0;
    this.hue = tick / 5;
    this.life = 1;
    this.updateAngle();
    this.updateDist();
}

line.prototype.step = function(i) {
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed;

    this.updateDist();

    if (this.dist < this.speed) {
        this.x = this.target.x;
        this.y = this.target.y;
        this.changeTarget();
    }

    this.path.push({
        x: this.x,
        y: this.y
    });
    if (this.path.length > this.count) {
        this.path.shift();
    }

    this.life -= 0.001;

    if (this.life <= 0) {
        this.path = null;
        lines.splice(i, 1);
    }
};

line.prototype.updateDist = function() {
    var dx = this.target.x - this.x,
        dy = this.target.y - this.y;
    this.dist = Math.sqrt(dx * dx + dy * dy);
}

line.prototype.updateAngle = function() {
    var dx = this.target.x - this.x,
        dy = this.target.y - this.y;
    this.angle = Math.atan2(dy, dx);
}

line.prototype.changeTarget = function() {
    var randStart = randInt(0, 3);
    switch (randStart) {
        case 0: // up
            this.target.y = this.y - size;
            break;
        case 1: // right
            this.target.x = this.x + size;
            break;
        case 2: // down
            this.target.y = this.y + size;
            break;
        case 3: // left
            this.target.x = this.x - size;
    }
    this.updateAngle();
};

line.prototype.draw = function(i) {
    ctx.beginPath();
    var rando = rand(0, 10);
    for (var j = 0, length = this.path.length; j < length; j++) {
        ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
    }
    ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
    ctx.lineWidth = rand(0.1, 2);
    ctx.stroke();
};

function rand(min, max) {
    return Math.random() * (max - min) + min;
}

function randInt(min, max) {
    return Math.floor(min + Math.random() * (max - min + 1));
};

function init() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    size = 30;
    lines = [];
    reset();
    loop();
}

function reset() {
    width = Math.ceil(window.innerWidth / 2) * 2;
    height = Math.ceil(window.innerHeight / 2) * 2;
    tick = 0;

    lines.length = 0;
    canvas.width = width;
    canvas.height = height;
}

function create() {
    if (tick % 10 === 0) {
        lines.push(new line());
    }
}

function step() {
    var i = lines.length;
    while (i--) {
        lines[i].step(i);
    }
}

function clear() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
    ctx.fillRect(0, 0, width, height);
    ctx.globalCompositeOperation = 'lighter';
}

function draw() {
    ctx.save();
    ctx.translate(width / 2, height / 2);
    ctx.rotate(tick * 0.001);
    var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
    ctx.scale(scale, scale);
    ctx.translate(-width / 2, -height / 2);
    var i = lines.length;
    while (i--) {
        lines[i].draw(i);
    }
    ctx.restore();
}

function loop() {
    requestAnimationFrame(loop);
    create();
    step();
    clear();
    draw();
    tick++;
}

function onresize() {
    reset();
}

window.addEventListener('resize', onresize);

init();
</script>
~ ~  本文结束，喜欢请点赞+分享  ~ ~


 赏 
感谢您的支持，我会继续努力哒!
支付宝收款码
tips
文章二维码 文章标题： 收藏几个纯CSS效果工具代码备用
分类标签：折腾，主题模板，工具代码，教程，CSS样式
文章链接：https://www.80srz.com/posts/608.html
最后编辑：2023 年 11 月 20 日 09:15 By 荒野孤灯
许可协议： 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)

相关推荐

热门推荐

(*) 5 + 3 =
本文共 12 条评论。您也快来参与吧！
    奕奕 初次见面
    3月22日 荷兰 发自Windows 10 回复 1

    按钮效果很炫酷，收藏了

    旺东 初次见面
    3月1日 甘肃省兰州市 发自Windows 10 回复 0

    值得收藏，感谢分享！

    风记星辰 初次见面
    2022年10月15日 河北省石家庄市裕华区 发自Windows 10 回复 2

    这个canvas够炫酷~

    Mr.Chou 点头之交
    2022年06月16日 广东省惠州市 发自Windows 10 回复 0

    第一个好酷..

    苏晨 点头之交
    2022年05月10日 内蒙古包头市 发自Windows 10 回复 0

    好奇这个演示怎么做到的

      荒野孤灯 博主 @  苏晨
      2022年05月10日 广东省广州市 发自Android 回复 0

      直接上代码啊，用英文 ！！！包裹如下

      ！！！

      css样式

      html代码
      ！！！

        苏晨 点头之交 @  荒野孤灯
        2022年05月10日 内蒙古包头市 发自Windows 10 回复 0

        不太明白

          荒野孤灯 博主 @  苏晨
          2022年05月11日 海南省三亚市 发自Android 回复 0

          ?

    Pipecraft 初次见面
    2022年04月22日 美国加利福尼亚州 发自Mac OSX 回复 0

    效果很酷，收藏了。 https://jukebox.pipecraft.net/d/209

      荒野孤灯 博主 @  Pipecraft
      2022年04月22日 广东省广州市 发自Windows 10 回复 0

      ?

    I'M代代付 酒肉朋友
    2022年04月21日 贵州省贵阳市 发自Windows 10 回复 0

    感觉有用，有感觉没啥用，哈哈哈

      荒野孤灯 博主 @  I'M代代付
      2022年04月21日 广东省 发自Windows Server 2003 回复 0

      所以叫备用，哈哈