龙空技术网

2020你必须掌握的CSS特效「值得收藏」

Echa攻城狮 323

前言:

此刻我们对“字体倒影css”可能比较讲究,朋友们都想要了解一些“字体倒影css”的相关资讯。那么小编也在网摘上收集了一些有关“字体倒影css””的相关文章,希望小伙伴们能喜欢,大家一起来学习一下吧!

作者:monkeysoft

转发链接:

图标按钮

这个按钮特效比较简单,通过伪类选择器before和after,通过绝对定位,定位在按钮的两端。

然后通过hover属性,划上时添加动画和阴影,就有了视觉上的特效。

<style>        body{            display: flex;            flex-direction: column;            align-items: center;            background: #14213D;            min-height: 100vh;        }           a{            position: relative;            padding: 10px 30px;            margin: 45px 0;            color: #B7A3E0;            text-decoration: none;            font-size: 20px;            transition: 0.5s;            overflow: hidden;//隐藏溢出的线条            -webkit-box-reflect: below 1px linear-gradient(transparent,#0003);//倒影在文字下方            ,线性渐变创建遮罩图像        }        a:hover{            background: #B7A3E0;            color: #111;            box-shadow:  0 0 50px #B7A3E0;//盒子阴影            transition-delay: 0.5s;        }        a::before{            content: '';            position:absolute;            top: 0;            right: 0;            width: 10px;            height: 10px;            border-top: 2px solid #B7A3E0;            border-right: 2px solid #B7A3E0;            transition: 0.5s;            transition-delay: 0.25s;        }        a:hover::before{            width: 100%;            height: 100%;            transition-delay: 0s;        }        a::after{            content: '';            position: absolute;            bottom: 0;            left: 0;            width: 10px;            height: 10px;            border-bottom: 2px solid #B7A3E0;            border-left: 2px solid #B7A3E0;            transition: 0.5s;            transition-delay: 0.25s;        }        a:hover::after{            width: 100%;            height: 100%;            transition-delay: 0s;        }        a:nth-child(1){            filter: hue-rotate(100deg); //css滤镜        }        a:nth-child(3){            filter: hue-rotate(200deg);        }    </style><body>    <a href="#">按钮</a>    <a href="#">按钮</a>    <a href="#">按钮</a></body>
跑马灯按钮

基本与上面的按钮类似

只是每个按钮的四个角是用四个span来定位,每个span加上各自的动画,就形成了跑马灯效果

 <style>        body{            display: flex;            flex-direction: column;            align-items: center;            background: #14213D;            min-height: 100vh;        }           a{            position: relative;            display: inline-block;            padding: 10px 30px;            margin: 45px 0;            color: #6ECF81;            text-decoration: none;            font-size: 20px;            text-transform: uppercase;            transition: 0.5s;            overflow: hidden;            letter-spacing: 4px;            -webkit-box-reflect: below 1px linear-gradient(transparent,#0003);        }        a span{            position: absolute;            display: block;        }        a:hover{            background: #6ECF81;            color: #111;            transition-delay: 0.1s;            box-shadow:  0 0 5px #6ECF81,                         0 0 25px #6ECF81,                         0 0 50px #6ECF81,                         0 0 100px #6ECF81        }        a span:nth-child(1){            top: 0;            left: -100%;            width: 100%;            height: 2px;            background: linear-gradient(90deg,transparent,#6ECF81);            animation: animate1 0.5s linear infinite;        }        @keyframes animate1{            0%{                left: -100%;            }            50% ,100%{                left: 100%;            }        }        a span:nth-child(2){            top: 0;            right: 0;            width: 2px;            height: 100%;            background: linear-gradient(180deg,transparent,#6ECF81);            animation: animate2 0.5s linear infinite;            animation-delay: 0.125s;        }        @keyframes animate2{            0%{                top: -100%;            }            50% ,100%{                top: 100%;            }        }        a span:nth-child(3){            bottom: 0;            right: 0;            width: 100%;            height: 2px;            background: linear-gradient(270deg,transparent,#6ECF81);            animation: animate3 0.5s linear infinite;            animation-delay: 0.25s;        }        @keyframes animate3{            0%{                right: -100%;            }            50% ,100%{                right: 100%;            }        }        a span:nth-child(4){            bottom: -100%;            left: 0;            width: 2px;            height: 100%;            background: linear-gradient(360deg,transparent,#6ECF81);            animation: animate4 0.5s linear infinite;            animation-delay: 0.375s;        }        @keyframes animate4{            0%{                bottom: -100%;            }            50% ,100%{                bottom: 100%;            }        }        a:nth-child(1){            filter: hue-rotate(120deg);        }        a:nth-child(3){            filter: hue-rotate(270deg);        }    </style><body>    <a href="#">        <span></span>        <span></span>        <span></span>        <span></span>        SHINE    </a>    <a href="#">        <span></span>        <span></span>        <span></span>        <span></span>        SHINE    </a>    <a href="#">        <span></span>        <span></span>        <span></span>        <span></span>        SHINE    </a></body>
图标旋转

用几个i标签来代表边框,设置不同的透明度,制造重影效果。

<style>        body {            min-height: 100vh;            margin: 0;            padding: 0;            display: flex;            justify-content: center;            align-items: center;            background: slategray;        }        /* 图标基本样式 */        a {            display: block;            text-align: center;            text-decoration: none;            margin: 0 50px;            padding: 0 20px;            color: seashell;        }        .container {            width: 60px;            height: 60px;            position: relative;            transition: all .3s;        }        /* 移入旋转  skew 扭曲 斜切变换*/        a:hover .container {            transform: rotate(-35deg) skew(10deg);        }        .iconfont {            font-size: 50px;            line-height: 60px;            text-align: center;        }        i {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            border: 1px solid #fff;            transition: .3s;        }        /* 每个i标签代表一个边框,加上不同的颜色和重影 */        a:hover i:nth-child(1) {            opacity: 0.2;        }        a:hover i:nth-child(2) {            opacity: 0.4;            transform: translate(5px, -5px);        }        a:hover i:nth-child(3) {            opacity: 0.6;            transform: translate(10px, -10px);        }        a:hover i:nth-child(4) {            opacity: 0.8;            transform: translate(15px, -15px);        }        a:hover i:nth-child(5) {            opacity: 1;            transform: translate(20px, -20px);        }        .items:nth-child(1) .container i,        .items:nth-child(1) a p {            border-color: pink;            color: pink;        }        .items:nth-child(2) .container i,        .items:nth-child(2) a p {            border-color: yellowgreen;            color: yellowgreen;        }        .items:nth-child(3) .container i,        .items:nth-child(3) a p {            border-color: sandybrown;            color: sandybrown;        }        .items:nth-child(1) a:hover i {            box-shadow: -1px 1px 3px pink;        }        .items:nth-child(2) a:hover i {            box-shadow: -1px 1px 3px yellowgreen;        }        .items:nth-child(3) a:hover i {            box-shadow: -1px 1px 3px sandybrown;        }        p {            transform: translateY(-30px);            opacity: 0;            transition: .3s;            font-weight: 700;        }        a:hover p {            transform: translateY(0px);            opacity: 1;        }    </style><body>    <div class="items">        <a href="#">            <div class=" container">                <i></i>                <i></i>                <i></i>                <i></i>                <i class="iconfont icon-qq"></i>            </div>            <p>QQ</p>        </a>    </div>    <div class="items">        <a href="#">            <div class=" container">                <i></i>                <i></i>                <i></i>                <i></i>                <i class="iconfont icon-weixin"></i>            </div>            <p>WeChat</p>        </a>    </div>    <div class="items">        <a href="#">            <div class=" container">                <i></i>                <i></i>                <i></i>                <i></i>                <i class="iconfont icon-tubiaozhizuo-"></i>            </div>            <p>WeiBo</p>        </a>    </div></body>
点击页面出现爱心

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

<script>        (function (window, document, undefined) {            var hearts = [];            window.requestAnimationFrame = (function () {                return window.requestAnimationFrame ||                    window.webkitRequestAnimationFrame ||                    window.mozRequestAnimationFrame ||                    window.oRequestAnimationFrame ||                    window.msRequestAnimationFrame ||                    function (callback) {                        setTimeout(callback, 1000 / 60);                    }            })();            init();            function init() { //初始化爱心                css(                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"                );                attachEvent();                gameloop();            }            function gameloop() {                for (var i = 0; i < hearts.length; i++) {                    if (hearts[i].alpha <= 0) {                        document.body.removeChild(hearts[i].el);                        hearts.splice(i, 1);                        continue;                    }                    hearts[i].y--;                    hearts[i].scale += 0.004;                    hearts[i].alpha -= 0.013;                    hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +                        hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +                        ") rotate(45deg);background:" + hearts[i].color;                }                requestAnimationFrame(gameloop);            }            function attachEvent() { //监听鼠标单击事件                var old = typeof window.onclick === "function" && window.onclick;                window.onclick = function (event) {                    old && old();                    createHeart(event);                }            }            function createHeart(event) {//创建div存放爱心                var d = document.createElement("div");                d.className = "heart";                hearts.push({                    el: d,                    x: event.clientX - 5,                    y: event.clientY - 5,                    scale: 1,                    alpha: 1,                    color: randomColor()                });                document.body.appendChild(d);            }            function css(css) {                var style = document.createElement("style");                style.type = "text/css";                try {                    style.appendChild(document.createTextNode(css));                } catch (ex) {                    style.styleSheet.cssText = css;                }                document.getElementsByTagName('head')[0].appendChild(style);            }            function randomColor() { //随机函数                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math                    .random() *                    255)) + ")";            }        })(window, document);    </script>
视频悬停特效
<style>        .banner{            position: absolute;            width: 100%;            height: 100vh;            display: flex;            justify-content: center;            align-items: center;            overflow: hidden;        }        .banner video {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            object-fit: cover;        }        .iconfont{            position: relative;            height: 100%;            width: 100%;            background: #fff;            font-size: 30vw;            text-align: center;            line-height: 150%;            color: #000;            mix-blend-mode: screen;        }        .iconfont:hover{            background-color: #000;            color:#fff;        }        @media(max-width: 900px){ //宽度低于900px 排列方向变为垂直            .banner{                flex-direction: column;            }            .banner i .iconfont{                height: 50%;                line-height: 50vh;                font-size: 30vw;            }        } </style>    <div class= "banner">        <video autoplay loop muted >            <source src = "; type = "video/mp4">        </video>        <i class="iconfont icon-qq"></i>        <i class="iconfont icon-weixin"></i>    </div></body>

作者:monkeysoft

转发链接:

标签: #字体倒影css