CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;…

19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

CSS3圆角设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120px 150px; 设置四个圆角相同:border-radius:50%; rgba(新的颜色值表示法) 2.rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度 CSS3 transition动画 1.transition-property 设置过渡的属性,比如:widt…

css3之transition、transform、animation比较

css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实,最简单的理解,我么可以这么认为:transition.transform.animation分别为过渡.变换.动画. 他们三者的作用实际上是不一样的,比如transition过渡一般都是配合hover使用的,对于transform呢,如果不配合,就是简单的拉伸.缩放.偏移等静态的变换,但是呢,如果配…

css3 transition属性变化与animation动画的相似性以及不同点

下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transition属性变化效果第二个为animation动画效果是不是已经看出他们之间的相同与不同了吧.对的,他们都可以实现简单的动画效果,但transition变化效果当鼠标离开动画结束时,它还是会持续一段时间的动画并最终返回为元素的初始样式.animation动画效果则不是,当鼠标离开后它会之间立刻结束动…

综合CSS3 transition、transform、animation写的一个动画导航

打算好好写博客开始,就想把博客给装修下,近几个月一直处在准备找工作疯狂学习前端的状态.感觉博客装修要等到工作稳定下来才有时间和经历去想想要搞成什么样的了.也看过一些博主的博客导航有这种样式的,趁着回顾CSS动画知识点,写了这个小例子. 挺综合的,用到了很多过渡.变换和动画.Git源码https://github.com/adagiomin/CSS 效果…

CSS3圆角,阴影,透明

CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. .box { /* 首先定义要使用的4幅图像为背景图 */ background-image: url(/img/top…

css3新增边框、阴影、边框、背景、文本、字体

css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font-Face实现定制字体.多背景图.文字或图像的变形处理(旋转.缩放.倾斜.移动).多栏布局.媒体查询等.css主要能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. 边框border-radius:边框圆角,值为圆的直径:border-ima…

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径垂直半径 border-radius:水平半径/垂直半径 border-radius:60px 30px 120px 160px/160px 120px 30px 60px ; 单位:百分比和像素.最好使用% 练习盒子阴影 box-shadow 可设置多重边框阴影,增强立体感 box-shadow: 5px 5px 27px red,-5px -5px 27px gr…

认识CSS3新增选择器和样式

前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的最后一个子元素的指定选择器 :nth-child(n):选取父元素中的第n个子元素的指定选择器,n取小于等于子元素个数的正整数.当n取n值表示选取父元素中所有子元素:n取2n表示选取父元素中所有偶数的子元素,等同于:nth-child(odd):n取2n+1表示选取父元素中所有奇数的子元素,等同于:…

CSS3 新增选择器

CSS3 新增选择器结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数. n 可以是数字.关键词或公式 li:first-child { /* 选择第一…

CSS3实战之新增的选择器

用的比较少看到知道怎么回事就ok http://www.w3.org/TR/css3-selectors/#selectors http://www.cnblogs.com/jscode/archive/2012/07/30/2615748.html 新增选择器列表: E[foo^="bar"]:匹配foo属性值以"bar"开始的E元素 E[foo$="bar"]:匹配foo属性值以"bar"结束的E元素 E[foo*=&q…

css3新增加的选择器

css3新增加的选择器一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的二.结构性伪类选择器: E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even…

CSS3常用30种选择器总结

CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.html 1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS样式方法 *选择器也可以应用到子选择器中,例如下面的代码: #container * {…

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素但不是P类型,不是红色</h1> < p>这是黑色的注意对比…

css3学习系列之选择器（一）

CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val]属性选择器:选择值以val指定的字符串开头的att属性使用这个样式. [att$=val]属性选择器:选择值以val指定的字符串结尾的att属性使用这个样式. 属性选择器的例子:利用[att$=avl]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式. <!DOCTYPE html>…

CSS3学习系列之选择器（二）

first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l…

CSS3的[att$=val]选择器

1.实例源码 <!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"> <head> <meta http-equiv="C…

UITableView section 圆角阴影

在UITableView实现图片上面的效果,百度一下看了别人的实现方案有下面2种: 1.UITableView section里面嵌套UITableView然后在上面实现圆角和阴影, 弊端代码超多我看了下就不想看了立马放弃. 2.UICollectionView 实现, 但是我原来的UI是UITableView写的就懒得重写. 找来找去都没一种简单的实现方案,自己有事了几个绘图API,没有达到图片的效果.想了两天灵光一闪,一个超简单的方法就能实现section+圆角+阴影 . 分享出来…

UWP Button添加圆角阴影（三）

原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx()方法,效率远远不如使用CompositionAnimation. Composition对象的基类CompositionObject拥有一个属性叫ImplicitAnimations,可以通过他实现累死css的transition的效果,也就是对应属性修改的时候,平滑的过渡过去. 可以从DropSh…

UWP Button添加圆角阴影（二）

原文:UWP Button添加圆角阴影(二) 阴影对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦. 直接把阴影套在咱们的圆角Button外面呢,会出现圆角的Button映出直角的阴影的丑陋状况.对于这种情况肯定是有处理方式的. 看DropShadowPanel的源码,对Content的特殊类型做了处理.下面我详细的说下. Compo…

UWP Button添加圆角阴影（一）

原文:UWP Button添加圆角阴影(一) 众所周知,17763之前的UWP控件,大部分是没有圆角属性的:而阴影也只有17763中的ThemeShadow可以直接在xaml中使用,之前的版本只能用DropShadow,用法极其别扭. 本文就给出一个虽然很别扭,但是效果还不错的,比较通用的圆角+阴影的方案. 概念我们先思考一下,用户感知到的圆角按钮,到底是个什么东西. 任何一个按钮,不外乎Background和Content两部分,用户可以从Content中获取到按钮的信息,而按钮的形状,在没…

IOS UIView圆角,阴影,边框,渐增光泽

圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView.layer.shadowColor = [[UIColor blackColor] CGColor];sampleView.layer.shadowOffset = CGSizeMake(3.0f, 3.0f); // [水平偏移, 垂直偏移]sampleView.layer.shadowOpaci…