CSS特效

时间：2020-07-31 15:41:58 阅读：129 评论：0 收藏：0 [点我收藏+]

CSS特效

1.图标按钮

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

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

 body {
     display: flex;
     /*弹性布局*/
     flex-direction: column;
     /* 灵活的项目将垂直显示，正如一个列一样。 竖直布局 */
     align-items: center;
     /* 元素位于容器的中心。
     弹性盒子元素在该行的侧轴（纵轴）上居中放置。
     （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 
     =》居中对其弹性盒子的各个元素
     */
     background: #142130;
     min-height: 100vh;
     /* 设置最小的高度 */
 }
 ?
 a {
     position: relative;
     /* 相对定位 */
     padding: 10px 30px;
     /*   =>内边距
     上内边距和下内边距是 10px 
      右内边距和左内边距是 30px
 ?
      四个则是：
      上 ，右 ，下 ， 左
 ?
      三个则是：
      上 ，右 and 左  ，下
      */
 ?
     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);
     /*  倒影在文字下方   ，线性渐变创建遮罩图像 */
     /* 倒影效果：
     none：无倒影
     above：指定倒影在对象的上边
     below：指定倒影在对象的下边
     left：指定倒影在对象的左边
     right：指定倒影在对象的右边  
     <length>：用长度值来定义倒影与对象之间的间隔。可以为负值
     <percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
     none：无遮罩图像
     <url>：使用绝对或相对地址指定遮罩图像。
     <linear-gradient>：使用线性渐变创建遮罩图像。
     <radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
     <repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
     <repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。
     */
 }
 ?
 /* hover：鼠标移到框上的悬停效果 */
 ?
 a:hover {
     background: #B7A3E0;
     color: #111;
     box-shadow: 0 0 50px #B7A3E0;
     /* 添加阴影效果
     box-shadow: h-shadow v-shadow  spread color ;
     h-shadow    必需的。水平阴影的位置。允许负值
     v-shadow    必需的。垂直阴影的位置。允许负值
     spread  可选。阴影的大小
     color   可选。阴影的颜色
     */
     transition-delay: 0.5s;
     /* 在过渡效果开始前等待 0.5 秒： */
 }
 ?
 /* 
 :before 选择器在被选元素的内容前面插入内容。
 请使用 content 属性来指定要插入的内容。
 */
 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;
     /* 在过渡效果开始前等待 0.25s 秒 */
 }
 ?
 a:hover::before {
     /* 设置悬停后的前面插入效果 */
     width: 100%;
     height: 100%;
     transition-delay: 0s;
 }
 ?
 /* 
 :after 选择器在被选元素的内容后面插入内容。
 请使用 content 属性来指定要插入的内容。
 */
 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);
 }
 ?

html：

 <body>
     <a href="#">按钮</a>
     <a href="#">按钮</a>
     <a href="#">按钮</a>
 </body>

效果图片：

技术分享图片

2.跑马灯按钮

基本与上面的按钮类似

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

 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     background: #14213D;
     min-height: 100vh;
 }
 ?
 a {
     position: relative;
     display: inline-block;
     /* 行内块元素。 */
     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;
     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);
 }

html:

 <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>

效果图片：

技术分享图片

3.图标旋转

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

 body {
     min-height: 100vh;
     margin: 0;
     padding: 0;
     justify-content: center;
     align-items: center;
     background: slategray;
 }
 ?
 /* 图标基本样式 */
 a {
     display: block;
     text-align: center;
     text-decoration: none;
     margin: 0 50px;
     padding: 0 20px;
     color: seagreen;
 }
 ?
 .container {
     width: 60px;
     height: 60px;
     position: relative;
     transition: all .3s;
 ?
 }
 ?
 /* 移入旋转 shew 扭曲  斜切变换 */
 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: 0.3s;
 }
 ?
 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(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;
 }
 ?

html:

 <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>

效果图片：

技术分享图片

4.点击页面出现爱心

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>

CSS特效

原文：https://www.cnblogs.com/feilongkenguokui/p/13409758.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)