文档章节

css 应用

墨鱼拉面
 墨鱼拉面
发布于 2016/11/01 09:08
字数 484
阅读 4
收藏 0

计时时钟

            setInterval( function() {
                var year = newDate.getFullYear();
                var month = newDate.getMonth()+1;
                var day = newDate.getDate();
                var seconds = new Date().getSeconds();
                var minutes = new Date().getMinutes();
                var hours = new Date().getHours();
                if(seconds=='0'&&(minutes%5==0)){
                    //location.reload(true);
                }  //顺便控制页面刷新
                $("#year").html(year);
                $("#month").html(( month < 10 ? "0" : "" ) + month);
                $("#day").html(( day < 10 ? "0" : "" ) + day);
                $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
                $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
                $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
                },1000);

.clock {display:inline;width:31%;height: 5%; margin-left:auto; padding-top:0.3%;position:relative;color:#46d7ff; background:url(images/clock.png)no-repeat;  background-size: 100% 100%;margin-top:0.1%}
ul { display:inline; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li {display:inline;  font-size:4.0rem; text-align:center; font-family:'digital-7__mono', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }

@-webkit-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }    
}

@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }    
}

@keyframes rotate {
 0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); }
100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); }
 }

背景渐变

 background:radial-gradient(220% 105% at top center, #131925 10%, #2850a7 40%, rgba(41, 74, 146, 0.97) 65%, rgb(7, 14, 60));

引入字体

@font-face {
    font-family: 'digital-7__mono';
    src: url('fonts/digital-7__mono.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '造字工房悦圆常规体';
    src: url('fonts/zaozigongfangyueyuan.otf');
    font-weight: normal;
    font-style: normal;
}

页面布局就找bootStrap吧 特效药

动画效果

#animated_div
{
width:76px;
height:47px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}

@keyframes animated_div
{
0%		{transform: rotate(0deg);left:0px;}
25%		{transform: rotate(20deg);left:0px;}
50%		{transform: rotate(0deg);left:500px;}
55%		{transform: rotate(0deg);left:500px;}
70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%	{transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0%		{-webkit-transform: rotate(0deg);left:0px;}
25%		{-webkit-transform: rotate(20deg);left:0px;}
50%		{-webkit-transform: rotate(0deg);left:500px;}
55%		{-webkit-transform: rotate(0deg);left:500px;}
70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%	{-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

 

 

© 著作权归作者所有

上一篇: java时间处理
下一篇: echarts拓展
墨鱼拉面
粉丝 0
博文 17
码字总数 1757
作品 0
深圳
程序员
私信 提问
简单的LESS Tutorial

简单的LESS Tutorial 1. 什么是LESS? LESS是一种动态的CSS语言,更专业的称呼是CSS preprocessor。作为CSS的扩展语言,LESS可以让CSS文件逻辑上更清晰,从而更容易维护和更新。LESS是开源的,...

我为楚狂
2014/05/03
0
0
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
2015年50+ CSS 工具、框架、库合集

CSS动画工具 & 库 1. Animate Plus 一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。 2. Rocket 一个创建WEB动画的简单的工具。 3. Tuesday 新奇CSS动画库。 4. Shift.css 创建定时CSS...

柠檬酷
2015/12/15
127
0
Css选择器(上) 让样式无孔不入

本文转载于:猿2048网站➮Css选择器(上) 让样式无孔不入 css选择器 一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. { } 就是一个简单的, 代表应用于全...

前端老手
09/09
11
0
Web前台控件库--Lesktop

Lesktop是笔者自己开发WebOS是使用的前台控件库,现已开源,大家可以使用该控件库来开发管理系统,ERP系统等,您可以自由使用Lesktop,Lesktop无使用限制。 以下以制作一个工具栏说明如何应用...

lucc
2010/04/11
6.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
2
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
12
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部