纯css3实现html图片文字等元素抖动效果
dwtedx CSS3教程 421 0 2016-07-28 10:47:57

今天我们要来分享一款很酷的CSS3动画抖动的特效、它可以让网页中的任何元素进行抖动、抖动的参数也可以自定义设置、可以定义抖动的快慢、方向以及更为复杂的抖动效果 该应用基于CSS3实现、实现起来也比较方便、可以很方便的集成到自己的项目中、效果图如下 html代码<section> <p class="shake shake-hard">shake-hard</p></section> 引入css<link href="css/shake.css" rel="style...

阅读全文

HTML5 CSS网站打赏功能实现及JS点赞效果源代码
dwtedx CSS3教程 853 36 2016-06-23 13:01:55

分享一个点赞加打赏的特效、很久之前就想给博客加一个点赞的功能、但一直觉得找不到好的创意、这事就一直拖下来了、这几天也在网上找了一些想着的特效、有需要的可以前往看看 jQuery微信支付宝打赏插件、但都不是很满意、总感觉那里不对、然后呢就自己试着写了一个 写程序的对于界面上的那些事总是少那么点、现在我写出来的这款点赞和打赏的插件个人觉得还是不错、起码自己很满意、主要是用 CSS 和 Font Awesome图标 开发的、现在就把这个小功能分享给大家、有类似需求的朋友可以下载使用、可以在我博客的文章页找到效果、效果图片如下 Htm...

阅读全文

Font Awesome图标字体下载及安装引用方法
dwtedx CSS3教程 472 3 2016-06-22 14:02:27

1、场景介绍 网页小图标到处可见、如果一个网页都是干巴巴的文字和图片、而没有小图标、会显得非常简陋、黑白的也好、彩色的也罢、如果用传统的“css 图片”的方式来制作这些icon、我估计你至少得雇佣一个专业的设计师吧、一般的程序猿、包括前端程序猿、估计只能去搜索了、不会自己拿ps画 但是问题又来了、如果你搜索来的是黑白的、现在也用黑白的、后期网站变化主题怎么办?你搜出来的是16 * 16的、要有个页面需要 32 * 32的怎么办?如果沿着这个方向考虑、你会发现、自己将在这上面耗费大量资源和精力 但是如果我告诉你、有一个东西、它已经...

阅读全文

纯CSS仿淘宝右侧悬浮窗口侧边栏代码下载
dwtedx CSS3教程 1282 2 2016-01-25 13:13:52

分享一个仿淘宝右边的侧栏的一个Demo、完全使用CSS3实现的、没有一点JS代码、主要实现的效果是淘宝右侧固定导航、而且带有动画效果的、最后有源代码下载地址、有兴趣的朋友可以下载看看、可以很方便的集成到自己的项目里面、下面是整个Demo的效果图 部分HTML代码<li class="tb-toolbar-item tb-toolbar-item-cart" data-item="cart"> <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd...

阅读全文

CSS强制中文/整个英文单词自动换行与不换行
qyl CSS3教程 555 0 2016-01-13 13:10:42

在平时的Web开发过程中、默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开、如果行末是长单词的话、整个单词都被换行到下一行、就像word一样、能够自动换行、既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母、本文将给你条案、先看一下如下CSS代码.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px;}...

阅读全文

DIV+CSS网页布局实例_网页布局入门实例
dwtedx CSS3教程 3265 3 2015-12-28 10:07:53

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习、第一种可能是你还没有理解CSS处理页面的原理、在你考虑你的页面整体表现效果前、你应当先考虑内容的语义和结构、然后再针对语义、结构添加CSS、下面给大家提供一个简单的例子 index.html代码 <html> <head> <title>DIV+CSS简单的页面布局示例</title> <link rel="stylesheet...

阅读全文

纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式
dwtedx CSS3教程 5866 9 2015-07-20 12:22:18

估计做过Web的都发现了一个问题、radio和checkbox由于不同的浏览器显示的样式不一致、因此我们需要自定义radio(单选框)和checkbox(多选框)的样式、基本原理就是给radio和checkbox的自定义样式设置成图片背景、然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别、从而达到自定义radio和checkbox的假象、最终生成的效果图、如下所示 HTML代码如下 <form accept-charset="utf-8" meth...

阅读全文

HTML5纯CSS3实现天气动画图标特效
dwtedx CSS3教程 1285 0 2015-06-04 10:17:06

本Demo是使用CSS3实现动态天气小图标功能、动态天气特效是一款纯CSS3实现的天气出太阳、下雨、雷阵雨等动画、效果非常好看、个人觉得使用CSS3动画图标特效比GIF图片好多了、效果如下 部分CSS3代码 .weather-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webki...

阅读全文

使用@media screen and实现响应式web网页
dwtedx CSS3教程 4045 7 2015-05-20 12:11:08

做web前端的攻城师都知道、经常要为不同分辨率设备或不同窗口大小下布局错位而头疼、现在很好咯、可以利用@media screen实现网页布局的自适应 但是怎样兼容所有主流设备就成了问题、到底分辨率是多少的时候设置呢?下面我分享一个自己在项目中使用的一套响应式的技巧、希望对大家有用 个人认为有几个临界点的分辨率、那么我们就可以轻松的来写自己的自适应代码了 480px以下 @media only screen and (max-width: 479px) { .head_title{ backgr...

阅读全文

css3 svg动态图标_css3 SVG动画效果下载
dwtedx CSS3教程 1138 0 2015-05-04 09:41:15

本Demo是一款基于jQuery和CSS3实现的SVG图标动画、CSS3实现150个动画SVG图标、代码非常简单、调用了 http://www.w3.org/ 上面的的开放资源、其主要还是通过CSS3来实现的、部分效果图如下 下面为大家讲解一下使用方法、以那个照相机为例 HTML代码如下 <div class="iconholder"> <span class="iconwrap"> <span class="long-shadow"></span&g...

阅读全文

9种纯css3 loading圈加载动画效果下载
dwtedx CSS3教程 2089 0 2015-04-16 09:11:12

本Demo是一个loading页面加载的一个功能、图标都是通过css3代码来实现的、Demo里面一共包含9款不同loading效果、Demo引入了bootstrap.min.css和一个自定义的9种加载动画、相比我以前分享的css3加载动画特效选择性要多些、可以根据项目的需要选择不同的loading加载动画效果、效果图如下 以loader4为例HTML代码如下 <div class="col-md-6 text-center"> <p>loader 4</p> &l...

阅读全文

纯CSS3 loading环形加载条_CSS3加载动画效果
dwtedx CSS3教程 1450 0 2015-03-26 09:44:03

以前分享过一个html jQuery加载进度条插件、主要是使用jQuery和html实现的、现在再分享一个纯css3实现的条纹加载条、绿色条纹css3进度条、并且带有响应式的效果、代码非常简单、只有一点css、非常的轻盈、如果你有进度条的需求、这个非常不错、如果你觉得绿色和你的项目风格不一致、你也可以修改成其实颜色 HTML代码 <div class="container"> <div class="warning"> </div> </div>...

阅读全文

纯div css二级下拉菜单样式模板
dwtedx CSS3教程 1057 0 2015-02-16 11:31:32

一直以来、大家都知道下拉菜单都是利用JS控制HTML标签来达到下拉菜单的效果、但这样的话、在搜索引擎的快照页面就不会显示二级菜单、如果直接使用css来做菜单的话、在搜索引擎的快照页面就会显示二级菜单、大家可以看下我的博客的菜单、就是使用纯css实现的、在快照页可以正常显示功能菜单、其实、下拉菜单的原理并不难、就是利用CSS的overflow属性和height、以及hover(伪类)、三者相互配合、首先将父菜单和子菜单全部排版出来(父菜单和所有的子菜单在同一个<li>标签里面、实际应用中父菜单不可能只有一个、列表排版比较...

阅读全文

glyphicons 图标_精美纯css3 icon图标源码下载
dwtedx CSS3教程 6046 0 2015-01-08 12:34:14

今天在互联网上无意中发现的一套非常实用的html css实现常用的ICON图标、非常不错的实现、在此分享给大家、全部是使用css使用的哦、对做前端的朋友非常有帮助、好好利用哦、先看一下图片截图吧 部分css代码 .social_wordpress_circle:before { content: "e0b0"; } .social_instagram_circle:before { content: "e0b1"; } .social_dribbble_circle:before { content: "e...

阅读全文

css中正确设置字体(css怎么设置字体)
dwtedx CSS3教程 1644 0 2014-04-05 21:30:36

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文...

阅读全文

CSS3之选择器
dwtedx CSS3教程 990 0 2014-01-09 22:25:15

1. 属性选择器:[att*=val]   [att^=val]   [att$=val] [id*=section1]{background-color:yellow}表示id中拥有section1的背景颜色都设为黄色 [id^=section1]{background-color:red}表示id中开头为section1的背景颜色都设为红色 [id$=section1]{background-color:blue}表示id中结尾为section1的背景颜色都设为蓝色 注意:如果[id...

阅读全文

DD记账
top
+