欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3鼠标滑过动画线条边框特效

程序员文章站 2022-04-22 19:51:03
...
基于CSS属性animation动画制作,效果流畅弹性十足

效果展示 http://hovertree.com/texiao/css3/32/

源码下载:
http://hovertree.com/h/bjaf/fo1jlmhi.htm

效果图如下:
CSS3鼠标滑过动画线条边框特效

代码如下:

doctype html>
html>
head>
meta charset="utf-8">
meta name="renderer" content="webkit">
meta http-equiv="X-UA-Compatible" content="IE=Edge">
meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
title>CSS3鼠标滑过动画线条边框特效 - 何问起title>
base target="_blank" />
link rel="stylesheet" href="http://hovertree.com/texiao/css3/32/css/index.css" />

head>
body>
div class="service">
  div class="service-list">
    ul class="clearfix" id="J_service_container">
      li> a href="http://hovertree.com/tiku/">
        div class="item-box">
        h3>何问起题库h3>
        h4>Web前端,HTML5,Java,C#,CSS等等h4>
        h4>考试,面试复习h4>
        h4>知识自测h4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
      li> a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">
        div class="item-box">
        h3>何问起键盘h3>
        h4>用电脑键盘弹电子琴h4>
        h4>学习音乐好工具h4>
        h4>没事弹小曲h4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
      li> a href="http://m.hovertree.com/">
        div class="item-box">
        h3>何问起谜语h3>
        h4>谜语是中华民族历史悠久的文化h4>
        h4>锻炼思维h4>
        h4>一点一点落实(字)h4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
      li> a href="http://hovertree.com/">
        div class="item-box">
        h3>何问起h3>
        h4>想问候不知从何问起h4>
        h4>就直接说喜欢你h4>
        h4>h4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
      li> a href="http://keleyi.com/">
        div class="item-box">
        h3>柯乐义h3>
        h4>木可柯h4>
        h4>乐意为您服务h4>
        h4>天长地久h4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
      li> a href="http://hovertree.com/hovertreescj/">
        div class="item-box">
        h3>HoverTreeSCJh3>
        h4>C#.NET Sql Serverh4>
        h4>何问起收藏夹h4>
        h4>WinFormh4>
        div class="overlay-start">div>
        div class="overlay-bottom">div>
        div class="overlay-left">div>
        div class="overlay-top">div>
        div class="overlay-right">div>
        div class="start-point"> i class="circle">i> div>
      div>
        div class="service-icon">
        div class="circle">+div>
      div>
        a> li>
    ul>
  div>
div>

div class="hovertreeinfo">
p>适用浏览器:FireFox、Chrome、Opera、Edge、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。p>
p>来源:a href="http://hovertree.com/" target="_blank">何问起a> a href="http://hovertree.com/menu/texiao/">网页特效a>
a href="http://hovertree.com/h/bjaf/vphj0rrw.htm">代码说明a>p>
div>
body>
html>

转自:http://hovertree.com/h/bjaf/vphj0rrw.htm

特效汇总:http://www.cnblogs.com/jihua/p/webfront.html