博客首页 → CSS3

最新文章列表

css3-常见应用-2018-5-19

2 背景 设置图片为背景-可以对body设置背景图== background:url(/i/bg_flower.gif); background-size:63px 100px; 多个背景图 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可以指定到指定边框== 3 文本 text-shadow: 5px 5px 5px #F ...
css3 
cuityang 评论(0) 有341人浏览 2018-05-20 23:58

css3 边框和阴影-2018-5-19

div { width:300px; height:100px; background-color:#ff9900; border-radius:35px; box-shadow: 10px 10px 5px #888888; } 参考： http://www.w3school.com.cn/css3/css3_border.asp
css3 
cuityang 评论(0) 有568人浏览 2018-05-20 00:30

【基础】这15种CSS居中的方式，你都用过哪几种？

简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。 css居中 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), ...
csscss3前端前端工程师 
rlmao 评论(0) 有642人浏览 2018-04-01 22:52

【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？

简言 总是喜欢简单又精致的东西，美的不繁复也不张扬。这是闷骚程序员的癖好么？闲来无事，把收集到的部分WEB组件整理汇总一下，攒一个逼格高一点的网站够了吧？ CSS组件 1 表单(form)相关 1.1 输入框(input) 一个简单的输入框样式，简捷又不夸张。需要约30行的CSS代码。 输入框(input)样式图 演示程序
csscss3前端前端工程师 
rlmao 评论(0) 有785人浏览 2018-03-30 14:20

百度地图扩展动画maker

  最近开始使用百度地图，需要在标记上添加一些闪烁的动画来做一些高亮或者明显提示给客户，因此基于css3来处理动画效果，用maker来处理标记，以下是简单记录。   1、扩展css3 测试css3代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
百度地图maker标记css3 
jjxliu306 评论(0) 有2980人浏览 2017-09-12 11:19

CSS3 3D翻转卡片动画

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>H5 3D翻转卡片动画</title> <link rel="stylesheet" href="b ...
翻转卡片动画CSS3 3D翻转CSS3H5 
onestopweb 评论(0) 有1008人浏览 2017-04-02 11:48

HTML5 & CSS3 初学者指南(4) – Canvas使用

介绍 传统的HTML主要用于文本的创建，可以通过<img>标签插入图像，动画的实现则需要第三方插件。在这方面，传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来，带来了新的成员<canvas>标签。   什么是 Canvas？ HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，你可以控制其每一 ...
HTML5CSS3 
powertoolsteam 评论(0) 有315人浏览 2017-02-07 10:27

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件   Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据。它是通过一个网络浏览器作为客户端数据库实现的，它允许网页以键值对的形式来存储数据。
HTML5CSS3 
powertoolsteam 评论(0) 有341人浏览 2017-01-18 11:50

CSS3前端技术总结

--------------通用注意事项--------------------- 1.网页设计应该先清除浏览器默认的样式 {     padding: 0;     margin:0; }   --------------场用样式------------------------- 1.text-shadow文字阴影 2.border-radius圆角 3.border-im ...
CSS3技术总结 
武林第一帅哥 评论(0) 有442人浏览 2017-01-18 11:06

HTML5 虚拟键盘出现挡住输入框的解决办法

1，问题描述 我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。） 2，解决办法 我们可以借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会 ...
html5css3键盘挡住 
fen5251 评论(0) 有2383人浏览 2017-01-12 11:02

transtion过渡宽高背景旋转

复制代码即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; -webkit-tran ...
css3 
风吹裤裆毛飞扬 评论(0) 有499人浏览 2017-01-10 11:34

word-break文本换行

建议使用word-break:keep-all,不拆分单词 <title>菜鸟教程(runoob.com)</title> <style> p.test1 { width:9em; border:1px solid #000000; word-break:keep-all; } p.test2 { width:9em; ...
css3 
风吹裤裆毛飞扬 评论(0) 有250人浏览 2017-01-10 10:09

text-overflow文本溢出

建议使用text-overflow:ellipsis;文本超出后以省略号形式显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div. ...
css3 
风吹裤裆毛飞扬 评论(0) 有277人浏览 2017-01-10 09:56

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页。但是，写出来的 HTML 代码的网页看起来很平淡，没有吸引力。 如何改善这种很平淡的页面呢？ 让 ...
HTML5CSS3 
powertoolsteam 评论(0) 有294人浏览 2016-12-27 13:59

CSS3中的伪类选择器详解

  类选择器和伪类选择器区别 　　类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。 　　 伪类选择器以及 ...
css3web前端 
小麦麦子 评论(0) 有405人浏览 2016-12-26 18:16

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说，每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异，不同网站的网页也具有不同的外观和感受，以实现在网络上建立自己的身份品牌的目的。 如果你也曾想要了解你屏幕上的这些网页是如何被 ...
HTML5CSS3 
powertoolsteam 评论(0) 有210人浏览 2016-12-20 12:12

纯CSS仿windows系统loading效果

今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线（cubic-bezier）的过渡效果，如下所示 span[class*="l-"] { height: 8px; width: 8px; background: #fff; display: inline-block; ...
css3loading
weakfi 评论(0) 有1807人浏览 2016-12-20 10:31

纯CSS实现3D按钮效果

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示 a.css-3d-btn{ position: relative; color: rgba(255, 255, 255, 1); text-decoration: none ...
css3button
weakfi 评论(0) 有744人浏览 2016-12-20 10:23

极富创意的3D文件夹切换效果

今天分享的是一个极富创意的文件夹切换效果。这个案例使用CSS 3动画实现了一个3D的平行六面体旋转效果。点击顶部的3个按钮可以旋转并切换。另外，每个六面体本身是一个文件夹，点击后可以展开查看里面的详情。这个案例的HTML代码结构清晰，方便学习和修改适用于各种信息展示的场景，如文章展示，公司案例展示，商品展示等      
css3
weakfi 评论(0) 有796人浏览 2016-12-20 10:03

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics