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

阅读约 1 分钟

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

CSS 按钮发光效果

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>


 赏 
感谢您的支持,我会继续努力哒!
微信收款码
~~  The   End  ~~

文章二维码 本文标签:主题模板, 工具代码, 教程, CSS样式
最后编辑:2022 年 4 月 22 日 10:26 By 荒野孤灯 —(致知在格物,格物而后知至)
本文链接:https://www.80srz.com/608.html(转载时请注明出处及链接! )
作品采用: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议授权。
1 + 7 =
共  9  评论:
    6月16日 广东省惠州市 回复

    第一个好酷..

    5月10日 内蒙古包头市 回复

    好奇这个演示怎么做到的

      5月10日 广东省广州市 回复

      直接上代码啊,用英文 !!!包裹如下

      !!!

      css样式

      html代码
      !!!

        5月10日 内蒙古包头市 回复

        不太明白

          5月11日 海南省三亚市 回复

          🐶

    4月22日 美国 回复

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

      4月22日 广东省广州市 回复

      🙌

    4月21日 贵州省贵阳市 回复

    感觉有用,有感觉没啥用,哈哈哈

      4月21日 广东省广州市 回复

      所以叫备用,哈哈



篱落主机MySSL安全认证穿梭虫洞