- 创意搜素、图像优化……这些工具都可以免费使用!(一) 11-25
- CSS3 transition-duration 属 11-25
- 前端Css3那些事 11-25
- CSS3 icon 属性 11-25
- CSS3如何学习? 11-25
- 用css3写出一个平行四边形 11-25
- CSS3 animation-direction 属 11-25
- CSS3技巧之形状(平行四边形) 11-25
- CSS3 rotation 属性 11-25
- CSS3优惠券效果的实现 11-25
创意搜素、图像优化……这些工具都可以免费使用!(一)
发布者: superzhang | 发布时间:2017-11-25友情提示:部分网站为国外网站,需科学上网~
-> 免费商务工具 <-
免费网页工具
HTML5 UP: 你在这里可以找到免费的HTML5和CSS3模板。
Bootswatch: 免费Bootstrap网页主题设计。
Templated: 这里集合了845套免费的CSS和HTML5网页模板。
WordPress.org | WordPress.com: 免费创建新网页。
Strikingly: 你可以使用这个服务来创建网页,而且这些网页还可以自适应移动设备。
Layers: WordPress网页开发工具,使用简单,永久免费。
Bootstrap Zero: 全时间最大的开源免费Bootstrap模板。
Landing Harbor: 你可以使用它们的免费登录页面来推广你的移动应用。
免费品牌和LOGO设计工具
Logaster: 专业的在线l
CSS3 transition-duration 属性
发布者: superzhang | 发布时间:2017-11-25实例
最后5秒出现切换效果:
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性transition-duration26.04.0 -webkit-10.016.04.0 -moz-6.13.1 -webkit-12.110.5 -o-属性定义及使用说明
前端Css3那些事
发布者: superzhang | 发布时间:2017-11-25CSS3–过渡动画(transition)、变形(transform)
3.1、概述 transition属性
可以让动画在CSS层面实现,此时不是利用setInterval(),不是定时器,而是底层C++在渲染,渲染动画的质量、丝滑程度都要远远优于JS、jQuery。
要颠覆我们传统制作网页动画的思维模式,现在的手机页面中,绝对不会有任何动画是setInterval()完成的,而都是过渡实现的。
今后2~3年,PC端也会这样,过渡会淘汰setInterval()和animate函数。
语法:transition: property duration timing-function delay;时间的单位是:秒(s)。
值 说明 属性值 描述
transition-property 指定CSS属性的name,transition效果 none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
transition-duration transition效果需要指定多少秒或毫秒才能完成 规定完成过渡效果需要花费的时间(以秒或毫秒计)。
默认值是 0,意味着不会
CSS3 icon 属性
发布者: superzhang | 发布时间:2017-11-25实例
将图像元素设置为图标化的等价物:
img
{
content:icon;
icon:url(imgicon.png);
}
浏览器支持
喜欢的小伙伴抓紧入群了,获取直播链接。
另外,在网上看到有高人总结了下CSS学习的正确姿势,总结的很好,这里贴出来让大家看下,以下为转载内容:
个人将css学习规划成以下三部分(学习CSS是很大、佷泛的问题)
基础有人提到项目驱动学习,的确,实战编码是提高CSS的最佳手段,但不建议新手立马开始实战;因为新手对CSS基础知识不了解,更容易在实际开发中走弯路(不只新手,css基础
用css3写出一个平行四边形
发布者: superzhang | 发布时间:2017-11-25今天要布局的网页背景是一个平行四边形,切图作为背景不好,很影响网页的打开速度,,那么这个平行四边形就css代码写出来,可以用css3的CSS3 transform 旋转的属性写出来,就是transform:skew,全是css代码写的可好了,大爱css3。
先看下效果:
代码如下:
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>用css3旋转写平行四边形</title>
<style type="text/css">
.box{width:1200px;margin:100px auto;}
.skew{width:1000px;heigh
CSS3 animation-direction 属性
发布者: superzhang | 发布时间:2017-11-25实例
先执行一遍动画,然后再反向执行一遍动画:
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性animation-direction43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-基本变形属性transform有很多,接下来我们用到哪一个说哪一个。
我们一般用skew属性来对矩形进行斜向拉伸,变成平行四边形,但是如果直接对元素使用的话,它里面的内容也会跟着斜向变动。
嵌套元素方案
对容器内容再应用一次反向的skewX()变形,从而抵消容器的变形效果
来看一下html和css具体代码
浏览器支持
CSS3优惠券效果的实现
发布者: superzhang | 发布时间:2017-11-25优惠券一般在商城项目中常用到,今天就来讲解下如何用纯CSS3来实现该效果:
效果图如下:
首先该效果中左右有两个锯齿形的波浪调,背景图还有不同色的间隔,下面来看看实现代码:
html:
具体CSS:
难点实现方法审查元素具体详解:
