css3翻牌翻数字的示例代码

来源:脚本之家  责任编辑:小易  

一、前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二、代码 结构 <div class="slider"><!

今天接到公司一任务,效果图如下:

今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的。呵呵,超酷啊。 一、HTML代码: 因为是CSS3实现,所以大家可以看到没有任何

没有具体说做什么效果,但是想着纯数字转换太简单了,然后就顺手做了一个翻牌的效果。

css3相当于软件的版本号而已,跟现在常用的,用法上没什么区别,但是,ie678不支持css3多出了的新属性,css3,在原来基础上增加了很多效果,比如最常见的,圆角,渐变,很多,可以随

效果预览,新窗口打开:https://codepen.io/andy-js/pen/ExaGxaL

/li> <li>222222222222CSS3隔行换色测试</li> <li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li> <li&

首先做一些页面布局:

https://jsfiddle.net/dwqs/2ueLg3uj/ 项目编号修饰 默认插入的项目编号是数字型的,1,2,3 p{ countercounter-increment:p; } 运行结果: https://jsfiddle.net/dwqs/2k5qbz51/ 在示例的

<ul></ul>

<video src="你要插入视频音频的地址(Url)"> </video> video标签只支持三种: MP4格式的H264编码视频文件和MP4格式的AAC编码音频的文件 W

body{background: #000;} ul{ list-style: none; margin:100px 0; display: flex; justify-content:center; line-height: 56px; height:56px; font-size: 39.6px; color: #FFFFFF; transform-style:preserve-3d; perspective:1000px; } li{ height:56px; margin:0 10px; background:none; width:16px; position: relative; } .num{ width:46px; transform-style:preserve-3d; perspective:1000px; transform:rotateY(0deg); transition: 1s all ease; } p{ height:56px; width:46px; text-align: center; background: #EC2C5C; border-radius: 2.57px; position: absolute; } p:nth-child(2){ transform: scalex(-1) translateZ(-1px); }

 css3 线性渐变和径向渐变示例附图 代码如下: <html> <head> <meta charset="utf-8"/> <title>css截取字符串</title> <style type=&

然后通过动态插入,模拟了这么一个效果

持续时间 运动形式 延迟时间;} 4、W3C 标准 [css] 元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}   实例效果: 复制代码 代码如下: a{transition:all .6s ease

利用了transition来做的动画

然而,由于Web的内容结构,试图在web上模仿类似的布局非常棘手。 为了使页面布局更加灵活到如印刷媒体一般,一个新的CSS3模块出现了——CSS3 regions。

利用transform:rotateY来做的翻转

css3的图形3d翻转效果应用示例  代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html&

在翻转之前先将另一个数字scalex左右镜像之后translateZ(-1px)移动到另一个数字的后面,这样翻转过来就能看到镜像的数字

非常适合产品活动或者育儿网站使用。 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色。使用jQuery和CSS3,适合HTML5浏览器。 代码如下

不是很完善,还有很多可以改进的地方

感兴趣的朋友可以了解下   这个示例的原理是通过大量的css3属性来实现的,如:a 为开发者提供丰富的应用模板、示例 代码及开发者社区服务,已覆盖Android、iOS、W

全部代码如下:

{ background:hsl(202, 100%, 50%); height:20px; } div.hslL5 { background:hsl(202, 50%, 50%); height:20px; } div.hslL6 { background:hsl(202, 100%, 75%); height:20px; } CSS3 HS

<script> var number=9999993, numArr=addComma(number), aNum=[], oUl=document.getElementsByTagName('ul')[0]; for(let i=0;i<numArr.length;i++){ let li=document.createElement('li'); oUl.appendChild(li); if(numArr[i]==',') li.innerHTML=','; else li.innerHTML='<p>'+numArr[i]+'</p><p></p>', li.className='num', li.deg=0, aNum.push(li); }; setInterval(function(){ let changeNum=number+1+''; let changeArr=addComma(changeNum), difference=changeArr.length-numArr.length; if(difference){ for(let i=0;i<difference;i++){ let li=document.createElement('li'); oUl.insertBefore(li,oUl.children[0]); if(changeArr[i]==',') li.innerHTML=','; else li.innerHTML='<p>'+changeArr[i]+'</p><p></p>', li.className='num', li.deg=0, aNum.unshift(li); }; }; number+=''; for(let i=changeNum.length-number.length;i<changeNum.length;i++){ if(changeNum[i]==number[i])continue; let deg=aNum[i].deg; aNum[i].deg=deg=deg+180; let index=(deg/180)%2; aNum[i].children[index].innerHTML=changeNum[i]; aNum[i].style.transform='rotateY('+deg+'deg)'; }; number=Number(changeNum); numArr=changeArr; },2000); function addComma(num){ //每隔三位数加一个豆号 return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); }; </script>

  说明: RGBA(R,G,B,A) 取值: R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数 | 百分数 A:Alpha透明度。取值0~1之间。 下面是用rgba() 设置50

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

CSS3 实用技巧:实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码,感兴趣的朋友可以看下截图,希望对大家有所帮助

 

复制代码 代码如下:

img.desaturate {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

css3动态进度条有数字代码怎么写

这样写吧:
<div class="meter">
<span style="width: 25%"></span>
</div>
.meter {
height: 20px; /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.orange > span {
background-color: #f1a165;
background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}.red > span {
background-color: #f0a3a3;
background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}

基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦

查看演示       源码下载

HTML

和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的。

<div id="clock" class="light"> <div class="display"> <div class="date"></div> <div class="digits"></div> </div> </div>

jQuery

CSS代码请参照上一篇文章,本文不再啰嗦,直接看jQuery代码。

首先我们定义参数,定义用来调用数字的class名称数组,定义中文星期名称,定义时分秒的位置。

$(function(){ var clock = $('#clock'); //定义数字数组0-9 var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; //定义星期 var weekday = ['周日','周一','周二','周三','周四','周五','周六']; var digits = {}; //定义时分秒位置 var positions = [ 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' ]; });

然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构,而现在我们使用jQuery来处理时钟的展示,通过append()方法来构建数字时钟。

var digit_holder = clock.find('.digits'); $.each(positions, function(){ if(this == ':'){ digit_holder.append('<div class="dots">'); } else{ var pos = $('<div>'); for(var i=1; i<8; i++){ pos.append('<span class="d' + i + '">'); } digits[this] = pos; digit_holder.append(pos); } });

最后,我们要让时钟跑起来。每秒钟调用一次update_time()函数,在update_time()中,我们先用moment.js来格式化时间,关于moment.js的介绍请参照本站文章:使用moment.js轻松管理日期和时间。然后根据当前时分秒,分别设置时分秒数字的class属性,即显示当前时分秒数字。接着继续使用moment.js来格式化日期和星期,最终完成了会走动的数字时钟,请看下面代码:

$(function(){ ... (function update_time(){ //调用moment.js来格式化时间 var now = moment().format("HHmmss"); digits.h1.attr('class', digit_to_name[now[0]]); digits.h2.attr('class', digit_to_name[now[1]]); digits.m1.attr('class', digit_to_name[now[2]]); digits.m2.attr('class', digit_to_name[now[3]]); digits.s1.attr('class', digit_to_name[now[4]]); digits.s2.attr('class', digit_to_name[now[5]]); var date = moment().format("YYYY年MM月DD日"); var week = weekday[moment().format('d')]; $(".date").html(date + ' ' + week); // 每秒钟运行一次 setTimeout(update_time, 1000); })(); });

基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)

先给大家展示效果图,感兴趣的朋友可以下载源码哦。

效果演示         源码下载

数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。

HTML

我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中。

<div id="clock" class="light"> <div class="display"> <div class="digits"> ...数字 </div> </div> </div>

我们准备展示的数字时钟格式HH:mm:ss,它由时分秒8个数字和2个分隔符“:”组成,数字是由7个短横杠组成,如数字8它由7个短横杠构成,我们在html里使用.d1~.d7七个span元素,通过CSS的来确定不同数字的显示效果。将以下代码加到上述.digits中,使用class的值从zero到nine表示数字0-9的样式,使用.dot表示间隔符号。

<div class="eight"> <span class="d1"></span> <span class="d2"></span> <span class="d3"></span> <span class="d4"></span> <span class="d5"></span> <span class="d6"></span> <span class="d7"></span> </div>

CSS3

我们设置每个数字span的透明度为0,就是默认不可见,通过CSS3的:before和:after特性来使表示数字的横杠设置转角的效果。

#clock .digits div{ text-align:left; position:relative; width: 28px; height:50px; display:inline-block; margin:0 4px; } #clock .digits div span{ opacity:0; position:absolute; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s; } #clock .digits div span:before, #clock .digits div span:after{ content:''; position:absolute; width:0; height:0; border:5px solid transparent; } #clock .digits .d1{ height:5px;width:16px;top:0;left:6px;} #clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} #clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} 然后,我们将数字span元素对应的dl~d7,根据数字来确定哪根横杠显示或不显示,即设置其opacity的值为1。 /* 0 */ #clock .digits div.zero .d1, #clock .digits div.zero .d3, #clock .digits div.zero .d4, #clock .digits div.zero .d5, #clock .digits div.zero .d6, #clock .digits div.zero .d7{ opacity:1; }

最后根据demo提供完整的css文档完善代码,即可以看到一个漂亮的数字时钟,那么如何让数字时钟真正跑起来,请看我们在下一篇文章的介绍。

实现CSS3中的border-radius(边框圆角)示例代码

详细介绍下如何实现CSS3中的border-radius(圆角),具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助

 

实现边框圆角

-moz-border-radius: 32px;

-webkit-border-radius: 32px;

border-radius: 32px;

behavior: url(border-radius.htc);

 

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

body {

background-color: #fff;

font: normal 11pt Trebuchet MS,Arial,sans-serif;

}

.box1 {

background-color: #f0f0f0;

width: 533px;

height: 50px;

margin: 0 auto 50px auto;

padding: 20px;

border: 1px solid #d7d7d7;

-moz-border-radius: 11px;

-webkit-border-radius: 11px;

border-radius: 10px;

}

.box2 {

background: transparent url(ashera.jpg); no-repeat top left;

width: 420px;

height: 220px;

margin: 0 auto 35px auto;

padding: 30px;

color: #fff;

font-weight: bold;

border: 11px solid #35b70e;

-moz-border-radius: 32px;

-webkit-border-radius: 32px;

border-radius: 32px;

behavior: url(border-radius.htc);

}

.box3 {

background-color: #ddd;

width: 210px;

height: 30px;

padding: 20px;

position: absolute;

top: 5px; left: 5px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

behavior: url(border-radius.htc);

}

.rel {

margin: 50px 0 0 33px;

padding: 25px;

position: relative;

z-index: inherit;

zoom: 1; /* For IE6 */

}

</style>

</head>

<body>

<p>Not just divs, but any element*</p>

<div class="rel">

<div class="box1">

11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet

</div>

<div class="box2">

22 this cat is a hybrid of domestic and wild breeds :)

</div>

<div class="box3">

33 this box is absolutely positioned

</div>

</div>

</body>

</html>

  • 本文相关:
  • css3翻牌翻数字的示例代码
  • css3使用animation属性实现炫酷效果(推荐)
  • css3中新增的对文本和字体的设置
  • css3动画特效在活动页中的应用
  • 如何用border-image实现文字气泡边框的示例代码
  • css3实现网站商品展示效果图
  • 2分钟教你实现环形/扇形菜单(基础版)
  • css3一个简易的 led 数字时钟实现方法
  • grid 宫格常用布局的实现
  • css3 旋转立方体问题详解
  • CSS3 实用技巧:实现黑白图像效果示例代码
  • css3动态进度条有数字代码怎么写
  • 基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
  • 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
  • 实现CSS3中的border-radius(边框圆角)示例代码
  • 【JS+CSS3】实现带预览图幻灯片效果的示例代码
  • CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
  • css3的代码和css有不同吗
  • css3隔行变换色实现示例
  • CSS3中的content属性使用示例
  • 急求用HTML5和css3制作一个网站的代码,要插入音视频。
  • css3 线性渐变和径向渐变示例附图
  • CSS3中Transition属性详解以及示例分享
  • CSS3区域模块region相关编写示例
  • css3的图形3d翻转效果应用示例
  • jquery+css3问卷答题卡翻页动画效果示例
  • CSS3实现的闪烁跳跃进度条示例
  • CSS3中HSL和HSLA的简单使用示例
  • CSS3中使用RGBA设置透明度的示例
  • jQuery Animation实现CSS3动画示例介绍
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved