用CSS3写的钟表】的更多相关文章

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style id="css"> #wrap{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; margin:…
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti…
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!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"&g…
  随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此,甚至一些复杂的图片也能通过css3实现,没有做不到,只有想不到.在逛国外的一些前端设计网站时发现一些国外牛人的奇思妙想--用纯粹的css3画的一些公司的Logo,不得不承认国外的技术比国内要先进很多. 下面是收集到的一些纯css3写的logo 先给出下载地址 下载地址  下面的示例请在支持css3…
大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>css3飘雪花特效</title> <style type="tex…
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.xiayuxiaoguo{ width:100%; height: 100%; position: absolute; left:0px; top:0px; z-index: 2;}.xiayu { animation: xiayu 2s forwards; -webkit-animation: xiayu 2…
对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地,这一点完成不能阻挡我对css3的热情.博主是一个地道的开源支持者,在学习css3的过程中写的一些demo会贴出来跟大家分享,都是一些想法最简单的实现,当然会有很多问题,希望大家指正,一起学习,一起进步. 下面贴一个纯css3实现的仿真图书翻页效果,只是一个很粗糙的雏形,…
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自己写出来,比你网上找代码要快很多,因为你是不会才去找代码粘过来的.那么你就要去看哪些代码需要用,哪些不需要.而如果是自己写的话,哪里漏了什么,再去查,明显快些,如果很熟练,写得就更快了. 这些常见特效真要让我自己写出来,竟然束手无策.坐在电脑前开始怀疑之前学的前面几章节的CSS3包括以往学的CSS3…
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty…
效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://211.140.7.173:8081/t/wuhairui/表情包/ (顶赞) <div class="emoji emoji--like"> <div class="emoji__hand"> <div class="emoji_…