51rgb-css3动画16-音符跳动导航条

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,用CSS3制作音符跳动导航条!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-26

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    419次

    源码,可以直接复制使用!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    	*{ background:#000;}
    	ul,li,html,body,div{ margin:0; padding:0;}
    	li{ margin:0 10px; list-style:none; font-size:36px; color:#fff;
    	text-shadow: 2px 2px 5px #f00;
    	transition: all .5s;}
    	ul{ width:1000px; margin:100px auto;}
    	
    	li:hover{letter-spacing: 100px;
    
    color: #ffffff;
    text-shadow: 0 0 25px #0f0, 
    0 0 10px #fff,
    0 0 15px #fff, 
    0 0 20px #FF9900, 
    0 0 35px #FF9900, 
    0 0 40px #FF9900, 
    0 0 50px #FF9900, 
    0 0 75px #FF9900;}
    
    li .line{
    margin:10px 0;
    transition: all 1s;
    width:0;
    height:2px;
    border-radius:1px;
    background:#fff;}
    
    li:hover .line{
    width:50%;
    }
    </style>
    </head>
    
    <body>
    	<ul>
        	<li>hello<div class="line"></div></li>
            <li>hello<div class="line"></div></li>
            <li>hello<div class="line"></div></li>
            <li>hello<div class="line"></div></li>
            <li>hello<div class="line"></div></li>
        </ul>
    
    
    </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:hhttp://www.51rgb.cn/video/page-29/283.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载
在线客服
热线电话

微信公众账号