CSS特效

 

CSS特效

1.图标按钮

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

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

  1  body {
  2      display: flex;
  3      /*弹性布局*/
  4      flex-direction: column;
  5      /* 灵活的项目将垂直显示，正如一个列一样。 竖直布局 */
  6      align-items: center;
  7      /* 元素位于容器的中心。
  8      弹性盒子元素在该行的侧轴（纵轴）上居中放置。
  9      （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 
 10      =》居中对其弹性盒子的各个元素
 11      */
 12      background: #142130;
 13      min-height: 100vh;
 14      /* 设置最小的高度 */
 15  }
 16  ​
 17  a {
 18      position: relative;
 19      /* 相对定位 */
 20      padding: 10px 30px;
 21      /*   =>内边距
 22      上内边距和下内边距是 10px 
 23       右内边距和左内边距是 30px
 24  ​
 25       四个则是：
 26       上 ，右 ，下 ， 左
 27  ​
 28       三个则是：
 29       上 ，右 and 左  ，下
 30       */
 31  ​
 32      margin: 45px 0;
 33      /* 外边距 所有规则和内边距一样 */
 34      color: #B7A3E0;
 35      /* 框内的字体颜色 */
 36      text-decoration: none;
 37      /*删除链接下划线*/
 38      font-size: 20px;
 39      /* 框内字体的大小 */
 40      transition: 0.5s;
 41      /* 定义过渡时间 */
 42      overflow: hidden;
 43      /* 隐藏溢出的线条 */
 44      -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
 45      /*  倒影在文字下方   ，线性渐变创建遮罩图像 */
 46      /* 倒影效果：
 47      none：无倒影
 48      above：指定倒影在对象的上边
 49      below：指定倒影在对象的下边
 50      left：指定倒影在对象的左边
 51      right：指定倒影在对象的右边  
 52      <length>：用长度值来定义倒影与对象之间的间隔。可以为负值
 53      <percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
 54      none：无遮罩图像
 55      <url>：使用绝对或相对地址指定遮罩图像。
 56      <linear-gradient>：使用线性渐变创建遮罩图像。
 57      <radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
 58      <repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
 59      <repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。
 60      */
 61  }
 62  ​
 63  /* hover：鼠标移到框上的悬停效果 */
 64  ​
 65  a:hover {
 66      background: #B7A3E0;
 67      color: #111;
 68      box-shadow: 0 0 50px #B7A3E0;
 69      /* 添加阴影效果
 70      box-shadow: h-shadow v-shadow  spread color ;
 71      h-shadow    必需的。水平阴影的位置。允许负值
 72      v-shadow    必需的。垂直阴影的位置。允许负值
 73      spread  可选。阴影的大小
 74      color   可选。阴影的颜色
 75      */
 76      transition-delay: 0.5s;
 77      /* 在过渡效果开始前等待 0.5 秒： */
 78  }
 79  ​
 80  /* 
 81  :before 选择器在被选元素的内容前面插入内容。
 82  请使用 content 属性来指定要插入的内容。
 83  */
 84  a::before {
 85      content: '';
 86      position: absolute;
 87      /* 启动绝对定位 */
 88      top: 0;
 89      right: 0;
 90      /* 设置开始的位置圆点 */
 91      width: 10px;
 92      height: 10px;
 93      /* 设置开始大小 */
 94      border-top: 2px solid #B7A3E0;
 95      border-right: 2px solid #B7A3E0;
 96      /* 设置效果 */
 97      transition: 0.5s;
 98      transition-delay: 0.25s;
 99      /* 在过渡效果开始前等待 0.25s 秒 */
100  }
101  ​
102  a:hover::before {
103      /* 设置悬停后的前面插入效果 */
104      width: 100%;
105      height: 100%;
106      transition-delay: 0s;
107  }
108  ​
109  /* 
110  :after 选择器在被选元素的内容后面插入内容。
111  请使用 content 属性来指定要插入的内容。
112  */
113  a::after {
114      content: '';
115      position: absolute;
116      bottom: 0;
117      left: 0;
118      width: 10px;
119      height: 10px;
120      border-bottom: 2px solid #B7A3E0;
121      border-left: 2px solid #B7A3E0;
122      transition: 0.5s;
123      transition-delay: 0.25s;
124  }
125  ​
126  a:hover::after {
127      width: 100%;
128      height: 100%;
129      transition-delay: 0s;
130  }
131  ​
132  a:nth-child(1) {
133      filter: hue-rotate(100deg);
134      /* css滤镜 */
135  }
136  ​
137  a:nth-child(3) {
138      filter: hue-rotate(200deg);
139  }
140  ​

html：

1 <body>
2 <a href="#">按钮</a>
3 <a href="#">按钮</a>
4 <a href="#">按钮</a>
5 </body>

 

效果图片：

2.跑马灯按钮

基本与上面的按钮类似

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

  1  body {
  2      display: flex;
  3      flex-direction: column;
  4      align-items: center;
  5      background: #14213D;
  6      min-height: 100vh;
  7  }
  8  ​
  9  a {
 10      position: relative;
 11      display: inline-block;
 12      /* 行内块元素。 */
 13      margin: 45px 0;
 14      color: #6ECF81;
 15      text-decoration: none;
 16      font-size: 20px;
 17      text-transform: uppercase;
 18      transition: 0.5s;
 19      overflow: hidden;
 20      letter-spacing: 4px;
 21      -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
 22  }
 23  ​
 24  a span {
 25      position: absolute;
 26      display: block;
 27  }
 28  ​
 29  a:hover {
 30      background: #6ECF81;
 31      color: #111;
 32      box-shadow: 0 0 5px #6ECF81,
 33          0 0 25px #6ECF81,
 34          0 0 50px #6ECF81,
 35          0 0 100px #6ECF81
 36  }
 37  ​
 38  a span:nth-child(1) {
 39      top: 0;
 40      left: -100%;
 41      width: 100%;
 42      height: 2px;
 43      background: linear-gradient(90deg, transparent, #6ECF81);
 44      animation: animate1 0.5s linear infinite;
 45  }
 46  ​
 47  @keyframes animate1 {
 48      0% {
 49          left: -100%;
 50      }
 51  ​
 52      50%,
 53      100% {
 54          left: 100%;
 55      }
 56  }
 57  ​
 58  a span:nth-child(2) {
 59      top: 0;
 60      right: 0;
 61      width: 2px;
 62      height: 100%;
 63      background: linear-gradient(180deg, transparent, #6ECF81);
 64      animation: animate2 0.5s linear infinite;
 65      animation-delay: 0.125s;
 66  }
 67  ​
 68  @keyframes animate2 {
 69      0% {
 70          top: -100%;
 71      }
 72  ​
 73      50%,
 74      100% {
 75          top: 100%;
 76      }
 77  }
 78  ​
 79  a span:nth-child(3) {
 80      bottom: 0;
 81      right: 0;
 82      width: 100%;
 83      height: 2px;
 84      background: linear-gradient(270deg, transparent, #6ECF81);
 85      animation: animate3 0.5s linear infinite;
 86      animation-delay: 0.25s;
 87  }
 88  ​
 89  @keyframes animate3 {
 90      0% {
 91          right: -100%;
 92      }
 93  ​
 94      50%,
 95      100% {
 96          right: 100%;
 97      }
 98  }
 99  ​
100  a span:nth-child(4) {
101      bottom: -100%;
102      left: 0;
103      width: 2px;
104      height: 100%;
105      background: linear-gradient(360deg, transparent, #6ECF81);
106      animation: animate4 0.5s linear infinite;
107      animation-delay: 0.375s;
108  }
109  ​
110  @keyframes animate4 {
111      0% {
112          bottom: -100%;
113      }
114  ​
115      50%,
116      100% {
117          bottom: 100%;
118      }
119  }
120  ​
121  a:nth-child(1) {
122      filter: hue-rotate(120deg);
123  }
124  ​
125  a:nth-child(3) {
126      filter: hue-rotate(270deg);
127  }

 

html:

 1  <body>
 2      <a href="#">
 3          <span></span>
 4          <span></span>
 5          <span></span>
 6          <span></span>
 7          SHINE
 8      </a>
 9      <a href="#">
10          <span></span>
11          <span></span>
12          <span></span>
13          <span></span>
14          SHINE
15      </a>
16      <a href="#">
17          <span></span>
18          <span></span>
19          <span></span>
20          <span></span>
21          SHINE
22      </a>
23  </body>

 

效果图片：

3.图标旋转

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

  1  body {
  2      min-height: 100vh;
  3      margin: 0;
  4      padding: 0;
  5      justify-content: center;
  6      align-items: center;
  7      background: slategray;
  8  }
  9  ​
 10  /* 图标基本样式 */
 11  a {
 12      display: block;
 13      text-align: center;
 14      text-decoration: none;
 15      margin: 0 50px;
 16      padding: 0 20px;
 17      color: seagreen;
 18  }
 19  ​
 20  .container {
 21      width: 60px;
 22      height: 60px;
 23      position: relative;
 24      transition: all .3s;
 25  ​
 26  }
 27  ​
 28  /* 移入旋转 shew 扭曲  斜切变换 */
 29  a:hover .container {
 30      transform: rotate(-35deg) skew(10deg);
 31  }
 32  ​
 33  .iconfont {
 34      font-size: 50px;
 35      line-height: 60px;
 36      text-align: center;
 37  }
 38  ​
 39  i {
 40      position: absolute;
 41      top: 0;
 42      left: 0;
 43      width: 100%;
 44      height: 100%;
 45      border: 1px solid #fff;
 46      transition: 0.3s;
 47  }
 48  ​
 49  a:hover i:nth-child(1) {
 50      opacity: 0.2;
 51  ​
 52  }
 53  ​
 54  a:hover i:nth-child(2) {
 55      opacity: 0.4;
 56      transform: translate(5px, -5px);
 57  }
 58  ​
 59  a:hover i:nth-child(3) {
 60      opacity: 0.6;
 61      transform: translate(10px, -10px);
 62  }
 63  ​
 64  a:hover i:nth-child(4) {
 65      opacity: 0.8;
 66      transform: translate(15px, -15px);
 67  }
 68  ​
 69  a:hover i:nth-child(5) {
 70      opacity: 1;
 71      transform: translate(20px, -20px);
 72  }
 73  ​
 74  .items:nth-child(2).container i,
 75  .items:nth-child(2) a p {
 76      border-color: yellowgreen;
 77      color: yellowgreen;
 78  }
 79  ​
 80  .items:nth-child(3) .container i,
 81  .items:nth-child(3) a p {
 82      border-color: sandybrown;
 83      color: sandybrown;
 84  }
 85  ​
 86  .items:nth-child(1) a:hover i {
 87      box-shadow: -1px 1px 3px pink;
 88  }
 89  ​
 90  .items:nth-child(2) a:hover i {
 91      box-shadow: -1px 1px 3px yellowgreen;
 92  }
 93  ​
 94  .items:nth-child(3) a:hover i {
 95      box-shadow: -1px 1px 3px sandybrown;
 96  }
 97  ​
 98  p {
 99      transform: translateY(-30px);
100      opacity: 0;
101      transition: .3s;
102      font-weight: 700;
103  }
104  ​
105  a:hover p {
106      transform: translateY(0px);
107      opacity: 1;
108  }
109  ​

html:

 1  <body>
 2  ​
 3      <div class="items">
 4          <a href="#">
 5              <div class=" container">
 6                  <i></i>
 7                  <i></i>
 8                  <i></i>
 9                  <i></i>
10                  <i class="iconfont icon-qq"></i>
11              </div>
12              <p>QQ</p>
13          </a>
14      </div>
15  ​
16      <div class="items">
17          <a href="#">
18              <div class=" container">
19                  <i></i>
20                  <i></i>
21                  <i></i>
22                  <i></i>
23                  <i class="iconfont icon-weixin"></i>
24              </div>
25              <p>WeChat</p>
26          </a>
27      </div>
28  ​
29      <div class="items">
30          <a href="#">
31              <div class=" container">
32                  <i></i>
33                  <i></i>
34                  <i></i>
35                  <i></i>
36                  <i class="iconfont icon-tubiaozhizuo-"></i>
37              </div>
38              <p>WeiBo</p>
39          </a>
40      </div>
41  </body>

 

效果图片：

4.点击页面出现爱心

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

 1  <script>
 2          (function (window, document, undefined) {
 3              var hearts = [];
 4              window.requestAnimationFrame = (function () {
 5                  return window.requestAnimationFrame ||
 6                      window.webkitRequestAnimationFrame ||
 7                      window.mozRequestAnimationFrame ||
 8                      window.oRequestAnimationFrame ||
 9                      window.msRequestAnimationFrame ||
10                      function (callback) {
11                          setTimeout(callback, 1000 / 60);
12                      }
13              })();
14              init();
15  ​
16              function init() { //初始化爱心
17                  css(
18                      ".heart{width: 10px;height: 10px;
19 　　　　　　　　　　　　position: fixed;background: #f00;transform: rotate(45deg);
20 　　　　　　　　　　　　　-webkit-transform: rotate(45deg);
21 　　　　　　　　　　　　-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';
22 　　　　　　　　　　　　width: inherit;height: inherit;background: inherit;border-radius: 50%;
23 　　　　　　　　　　　　-webkit-border-radius: 50%;-moz-border-radius: 50%;
24 　　　　　　　　　　　　position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
25                  );
26                  attachEvent();
27                  gameloop();
28              }
29  ​
30              function gameloop() {
31                  for (var i = 0; i < hearts.length; i++) {
32                      if (hearts[i].alpha <= 0) {
33                          document.body.removeChild(hearts[i].el);
34                          hearts.splice(i, 1);
35                          continue;
36                      }
37                      hearts[i].y--;
38                      hearts[i].scale += 0.004;
39                      hearts[i].alpha -= 0.013;
40                      hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +
41                          hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
42                          ") rotate(45deg);background:" + hearts[i].color;
43                  }
44                  requestAnimationFrame(gameloop);
45              }
46  ​
47              function attachEvent() { //监听鼠标单击事件
48                  var old = typeof window.onclick === "function" && window.onclick;
49                  window.onclick = function (event) {
50                      old && old();
51                      createHeart(event);
52                  }
53              }
54  ​
55              function createHeart(event) {//创建div存放爱心
56                  var d = document.createElement("div");
57                  d.className = "heart";
58                  hearts.push({
59                      el: d,
60                      x: event.clientX - 5,
61                      y: event.clientY - 5,
62                      scale: 1,
63                      alpha: 1,
64                      color: randomColor()
65                  });
66                  document.body.appendChild(d);
67              }
68  ​
69              function css(css) {
70                  var style = document.createElement("style");
71                  style.type = "text/css";
72                  try {
73                      style.appendChild(document.createTextNode(css));
74                  } catch (ex) {
75                      style.styleSheet.cssText = css;
76                  }
77                  document.getElementsByTagName('head')[0].appendChild(style);
78              }
79  ​
80              function randomColor() { //随机函数
81                  return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
82                      .random() *
83                      255)) + ")";
84              }
85          })(window, document);
86      </script>

 原文采用

 

posted @ 2020-07-31 15:04  肥龙啃锅盔  阅读(170)  评论(0)  编辑  收藏  举报