css3

CSS3 Transitions, Transforms和Animation使用简介与应用展示

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1268 一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打 »

css3美化网页元素

今天学习了css3美化页面元素,它可以使网页更加的优美,漂亮,是用户有更好的体验。 css3美化网页元素的优点: 1.有效的传递压面信息 2.是页面漂亮、美观、吸引用户 3.可以更好的凸显出页面的主题,使得用户能在最短时间看到页面的主要内容 4.有良好的用户体验 css3页面元素样式: 文字样式: 1.font-family:“字体”;设置文字类型 2.font-size:12px; 设置文字大小 »

8款最新CSS3表单 环形表单很酷

当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看。 1、CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单非常有特色,估计各位不太会看到过,这是一款CSS3环形特色表单,整个环形由一个个输入框组成,当用鼠标**输入框焦点时,环形圈即会转到该表单项。我们也可以用tab键来逐个选择输入框来输入表单内容。 »

【CSS3】display:flex;解析

display 属性规定元素应该生成的框的类型。 简单来说就是制定元素是行内元素还是块元素或者是其他元素。 display: block; display: inline; 这两个属性值只影响元素的表现,不会影响元素内部子元素的类型。 display: flex; flex属性值会指定该元素内部子元素的排列方式。 与flex配合使用的属性: align-items 1)元素顶部对齐 flex-st »

CSS3 filter:drop-shadow滤镜与box-shadow区别应用

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图: 而filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支持,细想 »

Cool!15个创意的 CSS3 文本效果【下篇】

  这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目。其中有些是用于特定用途,而另一些则适用于多种用途。如果你想要一个精彩而又充满色彩的文字效果,那么这是给你的完美的解决方案!它非常适合于创意机构或作品集项目。 您可能感兴趣的相关文章 小伙伴们惊呆了!8个超炫的 Web 效果 8个惊艳的 HTML5 和 JavaScript 特效 1 »

css3系列之transform详解translate

translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移     translate()   translateX()   translateY()   translateZ()   translate3d()   translateX 向X轴平移,填正数往右平移,填负数,往左平移   translat »

花了半年时间,我把Pink老师的HTMLCSS视频课程,整理成了10万字的Markdown笔记!

说明:本文内容真实!!!不是推广!!! 学习前端的同学应该都或多或少听说过 Pink 老师,我个人觉得 Pink 老师的前端视频教程应该说是目前B站上最好的了,没有之一! Pink老师 HTML CSS B站视频课程链接 我花了整整半年的时间细致认真的学习完了 Pink 老师的 HTML CSS 教 ... »

使用css3 background属性制作3D易拉罐效果

先记录一下css3 3d练习 本例中主要使用background-image,background-attachment,background-position属性,设计二维位移的立体效果。 如图所示,移动滚动条可以使易拉罐从左向右滚动。background-image 属性会在元素的背景中设置一个图像。background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚 »

css3 半圆弧线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> »

字面移动光斑效果(css3)

用css3的高级部分做一个字面上移动光斑的动态效果: 代码如下: <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">*{margin:0; »

css3新增特性-文本效果

文本阴影text-shadow .box { text-shadow: 4px 5px 5px pink; } 参数:x轴偏移   y轴偏移   模糊距离   颜色 文本换行设置white-space(如何处理元素内的空白) 正常写一段一段文本,超出部分会自动换行,默认white-space为normal .box { white-space: nowrap; } 设 »

【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 ...

【微信支付】分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已经关掉了。这是一个发图片猜谜语的应用,用户猜对了分红包,所得奖金可以提现。开发的时候对需求都不太看好,觉得用户粘性太低了。今天就把所有的程序拿了出来放在了github上。供有兴趣的伙伴玩耍。 产品 »

CSS3文本阴影、盒子阴影

1、文本阴影属性 text-shadow:值1 值2 值3 值4; 值1 : 水平方向的距离 (必须有的:支持负值)(向左为正值) 值2 : 垂直方向的距离 (必须有的:支持负值)(向下为正值) 值3 : 阴影的模糊程度 (不支持负值) 值4 : 阴影的颜色 第一个值 和 第二个值得位置不能互换。 如:text-shadow:10px 10px 4px red; 代表文字的阴影水平方向向右移动10 »

css3 学习

在 频幕 居中一个元素的的最快捷的方式: div{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }  2d 转换之旋转 1 transform:rotate() »

CSS3学习笔记之立体线框球形动画

效果截图: HTML代码: <div class="ball-box"> <div class="ball"> <div class="line-1"></div> <div class="line-2"></div> »

【CSS3】纯CSS3制作页面切换效果

    此前写的那个太复杂了,来点简单的核心     <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } .Bl { »

Css的用法总结part3:css3弹性盒子模型

1:align-content 属性 定义:修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 2:align-items 属性 定义:设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 3:align-self 属性 定义:在弹性子元素上使用。覆盖容器的 align-items 属性。 4:justify-content 属 »

激动人心的CSS3的新特点(2)

CSS3选择器 你困惑与所有新的CSS3选择器?本文提供了有益的见解和CSS3选择器的解释。 用CSS3和RGBA实现的超棒按钮 你不会相信这些按钮只使用CSS3属性,而不是通过任何图像创建。 使用CSS3渲染用户界面 下面是用CSS3的创作案例。 使用CSS3的OSX用户界面。 CSS3模板布局与jQuery插件 这个插件允许Web设计人员使用jQuery使用W3的CSS模板布局模块。 »