css3

css3
千次阅读
2021-12-17 12:15:57
如何让在只有HTML与CSS的情况下实现动态效果呢？

关于动画，众所周知，JavaScript与Flash是做动画的主流，虽然CSS3的过渡并没有前两个专业，但是正是由于CSS3处理数据较少，其过渡比德芙还要丝滑。

今天让我们来看一下：

一、过渡（transtion）

属性：

1、transition-property

2、transition-duration（默认值为0，此时变化为一瞬间，没有过渡效果）

3、transition-timing-function

4、transition-delay

功能：

1、指定要过渡的CSS属性

2、指定完成过渡需要花费的时间（s）

3、指定过渡函数

其包括liner：匀速

ease-in：减速

ease-out：先加速再减速

4、指定过渡开始进行的延迟时间（s）

代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        #container{
            width:100px;
            height:100px;
            background:blue;
            #container:hover{
                cursor: pointer;
                left: 100px;
                border-radius: 50%;
                background: red ;
            }
        }
        .box{
            position: absolute;
            top: 20px;
            left:20px;
            width:100px;
            height:100px;
            background:blue;
            transition: all 5s ease ;
        }
        .box:hover{
            cursor: pointer;
            left: 100px;
            border-radius: 50%;
            background: deeppink;
           /* border-radius: 50%;
            transition-property: left;
            transition-duration: 10s;
            transition-timing-function: ease;
            transition-delay: 2s;*/
        }
    </style>
</head>
<body>
```
注意：由于过渡需要用户操作才可以实现，所以用:hover，若希望多个元素都具有过渡属性，则用ALL即可。和我们一起所写的background一样，既可以分开来写，也可以写在一起。

二、转换

1、移动

通过使用rotate（）实现单位deg

语法格式： transform：rotate(45deg) 旋转45度
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之旋转</title>
    <style>
        .box{
            position: absolute;
            left:200px;
            top:200px;
            width:200px;
            height:200px;
            background-color: deeppink;

            transform-origin: 10px 10px;
            transform: rotate(45deg) ;
        }
    </style>
```
2、旋转

通过使：用transform实现，可实现元素的位移与旋转、缩放

位移：transform：translate（）

旋转；transform：rotate（）

缩放：transform：scale（）

位移需要通过x与y坐标确定移动位置语法格式：

transform:translate(x,y); transform:translateX(n); transform:translateY(n)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换之移动</title>
    <style>
        .box{
            width:100px;
            height:100px;
            border: 1px solid black;
            background-color: deeppink;
        }
        div#div2{
            transform: translate(50px,100px) ;
           /* transform: translateX(50px);
            transform: translateY(100px) ;*/
            background-color: blue;
        }
    </style>
```
3、缩放

缩放使用transform:scole（）语法格式： transform:scole(1,1)宽和高都放大一倍 transform:scole(2)相当于scole(2,2) 大于1为放大，小于为缩小。

代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>转换之缩放</title>
    <style>
        div{
            position: absolute;

            width:100px;
            height:100px;
            background-color: deeppink;
        }
    </style>
```
三、动画

transition虽然纵享丝滑，但是缺点非常明显：

1、需要用户通过特定的操作进行触发

2、transition是一次性的，并不能重复，除非继续特定出发

3、其只能定义开头与结尾，中间过程无法定义

在这种万般无奈的情况下，animation诞生了！它不仅可以通过每一帧来进行动画效果的展示，并且可以完美调用每一帧。动画是css中的一功能，与过渡最大的区别是：动画可以实现更多变化，更多控制，自动播放等功能若使用动画，浏览器应该是最高版本使用动画时，用@keyframes来作为关键帧，通过百分比构建样式规则。

代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>动画1</title>
    <style>
        .box{
            position: absolute;
            left:100px;
            top:10px;
            width:100px;
            height:100px;
            background-color: deeppink;
        }
        .box:hover {
            animation: move 2s;
        }
        /*定义动画*/
        @keyframes move {
            from{
                left :10px;
            }
            to{
                left:100px;
            }
        }
    </style>
```
属性：

1、animation-name（none为默认值，无动画效果）

2、animation-duration（默认值为0，无动画效果）

3、animation-timing-function（同上）

4、animation-delay

5、animation-iteration-count（1为默认值，infinite为无限次循环）

6、animation-direction（默认值为normal）

7、animation-state（默认running播放，pause暂停）

8、animation-fill-mode（默认值none，forwards回到关键帧，backwards回到第一帧）

功能：

1、指定关键帧动画名字

2、指定动画播放时间

3、设置动画播放方式

4、设置开始时间

5、设置循环次数

6、动画播放方向

7、播放状态，播放或者暂停

8、播放时间外属性
css

更多相关内容
HTML5+CSS3 精美登陆界面源码
千次下载 热门讨论 2016-01-19 09:52:44

3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。

收起
微信小程序界面设计-小程序中CSS3样式精通课程
千人学习 2019-01-18 10:55:44

讲解微信小程序中如何使用css3的一些特性，border-radius圆角边框box-shadow盒阴影渐变Gradients2D转化transition过渡column-count多列调整尺寸(Resizing) 外形修饰（outline）框大小box-sizing

收起

微信小程序开发微信公众号开发微信小程序开发教程微信开发
基于html5+css3实现的精美聊天界面demo
千次下载 热门讨论 2015-07-27 14:53:31

基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。

收起
CSS3/jQuery自定义弹出窗口多种弹出动画
千次下载 热门讨论 2014-06-01 21:09:31

这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的...

收起
【青山css】css3阴影效果属性详解及创意玩法
千次阅读 2022-02-26 16:16:58
css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能...
前言

css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。

属性介绍

语法
```
box-shadow: x-shadow y-shadow blur spread color inset;
```
x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现

box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .2);

y-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，y-shadow不同情况下的不同表现

box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);

blur: 可选的，模糊距离，不支持负数，下图表示了在其他参数相同，blur不同情况下的不同表现

box-shadow: 0 0 blur 10px rgba(0, 0, 0, .2);

spread: 可选的，阴影的扩展半径，阴影的原理其实就是复制一个当前元素出来，这个属性就是控制的复制出来的元素的半径，一定要记好了啊，支持负数，如果为负数，复制出来的元素就会比原元素小，下图表示了在其他参数相同，spread不同情况下的不同表现

box-shadow: 0 0 10px spread rgba(0, 0, 0, .2);

color：可选的，颜色值，支持#000000格式或者rgb(0,0,0)格式或者rgba(0,0,0,.2)格式，下面展示了阴影对几种颜色格式的支持

box-shadow: 0 0 10px 10px color;

inset：可选的，内阴影，下面是使用了此参数的效果展示

box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5) inset;

多重阴影

css3的阴影支持多重阴影，只要将每个阴影属性用逗号隔开即可，用法如下
```
.box15 {
  border-radius: 50%;
  box-shadow: 
    -20px 0 20px 5px rgba(213, 255, 145, 0.5),
    0px -20px 20px 5px rgba(145, 255, 191, 0.5),
    20px 0 20px 5px rgba(82, 255, 220, 0.5),
    0 20px 20px 5px rgba(239, 255, 91, 0.5);
}
```
以上就是对css阴影属性的详细介绍及展示

创意用法

柔和边缘

css阴影的一大作用就是使边缘变得柔和，使之看起来不那么生硬，比如我们在做一些有光影效果的图片或者小动画时就能用到，下面展示一下用css绘制一个夜空中的月亮

立体效果

二维平面加入一点点阴影可以很好的营造出立体效果，这一点也被很多网站使用，比如小米官网

甚至我们可以用它来做一个立体的按钮
```
.box19 {
  width: 100px;
  height: 30px;
  background: #89d444;
  line-height: 30px;
  color: #fff;
  user-select: none;
  box-shadow: 0px 8px 0 0 #479a48,
  0 10px 5px 0 rgba(0, 0, 0, .5);
  border-radius: 5px;
  transform: translateY(-8px);
}
.box19:active {
  transform: translateY(0);
  box-shadow: 0 0
}
```
画画

对，你没有看错，利用css的多重阴影属性，你甚至，可以画出一幅画来，虽然几乎没有人会这么做，不过几乎不等于没有，某位大神就用css的阴影效果画出了一个蒙娜丽莎

这是地址https://codepen.io/jaysalvat/pen/kazzOj

过渡效果

经实测，box-shadow 是支持 transion 过渡效果的

下面是我自己瞎搞的

至于怎么用这个做出更好看的效果，就看各位大佬发挥了，本篇文章就到这里，本文同步发布至公众号百里青山，转载请先征得同意
收起
展开全文
css
HTML5 3D/CSS3 3D爱心动画项目实例源码
千次下载 热门讨论 2014-08-20 11:30:37

大家可以点解DEMO来看看。CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。很多div，主要是构造爱心的线条区域。

收起
HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码
千次下载 热门讨论 2014-09-25 14:22:58

这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件，在页面的两侧，有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的，类似立方体翻转一样，焦点图默认显示文字，...

收起
CSS3+HTML5+从入门到精通
热门讨论 2014-07-03 12:44:13

CSS3+HTML5+从入门到精通 CSS3+HTML5+从入门到精通》-中文学习教程

收起
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册实例源码
万次下载 热门讨论 2014-07-12 15:03:05

代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言

收起

css3实现书本翻页效果

万次阅读 2020-12-22 17:25:38

css3翻页效果关键要点： 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置代码总览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...

css3翻页效果

关键要点：
1.css3 3d动画的掌握
2.如何解决翻转后页面内容的改变
3.如何保持书本一直处于居中位置

代码总览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .book{
        margin: auto;
        margin-top: 2rem;
        transform: translate(0,0);
        perspective: 5000px;
        max-width: 40%;
        height: 800px;
        position: relative;
        transition:all 1s ease;
    }
    .page{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background-color: pink;
        cursor: pointer;
        transition:all 1s ease;
        transform-origin: left center;
        transform-style: preserve-3d;
    }
    .active{
        z-index: 1;
    }
    .page.flipped{
        transform:rotateY(-180deg)
    }
    .back,.front{
        text-align: center;
        position: absolute;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .back{
        transform:rotateY(180deg)
    }
</style>
<body>
    <div class="book">
        <div class="page active">
            <div class="front">封面</div>
            <div class="back">1</div>
        </div>
        <div class="page">
            <div class="front">2</div>
            <div class="back">3</div>
        </div>
        <div class="page">
            <div class="front">4</div>
            <div class="back">5</div>
        </div>
        <div class="page">
            <div class="front">6</div>
            <div class="back">尾面</div>
        </div>
    </div>
</body>
<script>
    let pages = document.getElementsByClassName('page')
    let book = document.getElementsByClassName('book')[0]
    function bookMove(drect){
        if(drect==='right'){
            book.style.transform = 'translate(50%,0)'
        }else if(drect==='left'){
            book.style.transform = 'translate(0,0)'
        }else{
            book.style.transform = 'translate(100%,0)'
        }
    }
    for(let i = 0;i<pages.length;i++){
        pages[i].addEventListener('click',()=>{
            if(pages[i].classList.contains('flipped')){
                pages[i].classList.remove('flipped')
                pages[i].classList.add('active')
                if(i===0){
                    bookMove('left')
                }
                if(pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.remove('active')
                }else{
                    bookMove('right')
                }
            }else{
                pages[i].classList.add('flipped')
                pages[i].classList.remove('active')
                if(i===0){
                    bookMove('right')
                }
                if(pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.add('active')
                }else{
                    bookMove('close')
                }
            }
        })
    }
</script>
</html>

要点分析

css3动画属性解释：
perspective: 5000px; 这里是透视属性,可以简单认为是实现了“近大远小”效果的属性
这里需要注意perspective需要设置在进行了3d变换的元素的父元素上，因为进行3d变换
的元素只有以父元素为背景做透视变换才能看到效果。
transition:all 1s ease；这里是过度属性，可以设置过度时间以及应用的缓动函数
transform-origin: left center;；这个属性可以设置变换属性的起始点，这里的意思是以左中为点进行绕y轴旋转
transform-style: preserve-3d;；这个属性可以让设置了该属性的元素的子元素也能呈现相同的基于父元素的透视，前提是子元素也进行了3d变换。

解决页面内容的显示问题：
backface-visibility: hidden;让进行了180度旋转的元素隐藏，即背面不可视
运用这个属性可以让页面1旋转180度后隐藏而从-180度旋转为0度的页面2显示，从而实现书本内容的切换

解决书本居中页面的问题：
transform: translate(0,0) 通过平移属性，解决此问题
剩下的就是用js添加点击事件，控制元素样式实现翻页动画

收起

展开全文

javascript

CSS3 媒体查询
千次阅读 2022-04-16 14:00:32
CSS3媒体查询（Media Query）语法的特性： ①使用 @media 查询，可以针对不同的媒体类型定义不同的样式； ②@media 可以针对不同的屏幕尺寸设置不同的样式； ③当你重置浏览器大小的过程中，页面也会根据浏览器的...
1. 什么是媒体查询

CSS3媒体查询（Media Query）语法的特性：

①使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
②@media 可以针对不同的屏幕尺寸设置不同的样式；
③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询.

2. 媒体查询的语法规范
@media mediatype and|not|only (media feature) { /* CSS样式 */ }

①用 @media 开头注意@符号

②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）

③关键字 and not only
（1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
（2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
（3）only：表示指定某个特定的媒体类型，可以省略

④media feature 媒体特性必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
（1）width：表示输出设备中页面可见区域的宽度
（2）min-width：表示输出设备中页面最小可见区域的宽度
（3）max-width：表示输出设备中页面最大可见区域的宽度
3. 应用：根据页面宽度改变背景变色
<style> div { height: 200px; background-color: yellow; /* 给div设置背景色为黄色 */ } @media screen and (min-width:600px) { div { background-color: skyblue; /* 表示屏幕尺寸大于等于600px时，背景色变为天蓝色 */ } } @media screen and (min-width:900px) { div { background-color: pink; /* 表示屏幕尺寸大于等于900px时，背景色变为粉色 */ } } @media screen and (min-width:1200px) { div { background-color: red; /* 表示屏幕尺寸大于等于1200px时，背景色变为红色 */ } } </style> <body> <div></div> </body>

上述代码执行效果如上图，当我们改变浏览器窗口的宽度时，我们div盒子的背景色会根据我们设置的条件进行改变，这就是媒体查询的作用。

需要注意以下两点点：
（1）媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
（2）最大值 max-width 和最小值 min-width都是包含等于的
4. 媒体查询+外部链接引入CSS

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的css文件。方法，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

4.1 语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
4.2 示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 600px)"> /* 表示电子设备屏幕大于等于600px时,将会引用styleA.css这个css文件 */
5. 媒体查询+rem实现元素动态大小变化

结合昨日介绍的rem单位，我们知道rem是跟着html走的，所以有了rem，页面元素可以设置不同大小尺寸。而媒体查询可以根据不同设备宽度来修改样式，因此，媒体查询+rem 就可以实现不同设备宽度页面元素大小的动态变化。
收起
展开全文
CSS权威指南(第3版中文版+英文版附CSS3参考手册)
热门讨论 2013-03-21 23:15:59

****温馨提示：本书比较经典，所以是以CSS2为基础讲述，个人认为值得学习，然后参考CSS3参考手册应该有所收获**** ****CSS权威指南(第3版中文版+英文版附CSS3参考手册)**** 想要快速省力地做到让Web风格整齐划一吗...

收起
响应式web设计html5和css3实战源代码
热门讨论 2015-02-13 10:20:00

响应式web设计html5和css3实战源代码绝对一手！

收起

源代码
CSS CSS3 pdf 电子书大全百度云
千次阅读 2019-04-16 18:24:22

超越CSS Web设计艺术精髓 PDF版(500m+) http://pan.baidu.com/s/1dE36VPR css彻底设计研究温谦中文pdf扫描版 /do/plus/download1.php?open=1&aid=34682&cid=3&link=ZWQyazovL3xmaWxlfCU1...

收起
CSS3动画
千人学习 2019-11-01 17:36:29

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的...

收起
Web前端基础全家桶教程（含HTML、CSS、 HTML5、CSS3）
千人学习 2019-12-19 09:07:45

本套Web前端基础全家桶教程是全新录制，将前端学习的基础内容融汇为148节课，涵盖了...除此之外，课程涵盖大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。

收起
20个CSS3动画实战案例开发
千人学习 2020-03-04 17:49:25

本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷...

收起
css3实现高斯模糊
千次阅读 2020-07-15 20:49:21

css高斯模糊 1. 直接模糊效果如下图：代码：模糊前： <div id="bg0"></div> 模糊后： <div id="bg"></div> <style type="text/css"> #bg0, #bg { width: 660px; height: 100...

收起

高斯模糊毛玻璃特效
CSS3动画文档
万次阅读 2020-06-04 10:21:02

keyframes-selector {css-styles;} } 值说明 animationname 动画名称 keyframes-selector 0-100%;from (和0%相同);to (和100%相同) css-styles 一个或多个合法的CSS样式属性在某个元素上使用动画 ...

收起

css html
CSS3 transition动画
千次阅读 2021-08-05 00:29:00

1.transition动画(1)transition-property 设置过渡的属性，比如：width height background-color(2)transition-duration 设置过渡的时间，比如：1s 500ms(3)transition-timing-function 设置过渡的运动方式，常用有...

收起
CSS3 +HTML5入门到精通
千次下载 热门讨论 2014-07-01 16:58:08

《HTML+5+从入门到精通》-中文学习教程

收起
CSS3添加动态圆点
万次阅读 2020-12-16 14:39:53

<!DOCTYPEhtml> <htmllang="en"> <head>...metaname="viewport"content="width=device-width,initial-scale=1.0">...CSS3添加动态圆点</title> <style> @-webkit-...

收起
细说CSS(CSS+CSS3)
千人学习 2019-07-19 10:05:13

本课程包含7章45个小节课程，内容涵盖：CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。

收起
css和css3的区别
千次阅读 2018-04-27 09:05:13

什么是CSS？CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。CSS 是用来表现HTML或XML的标记语言。CSS 是由W3C的CSS工作组发布...

收起

HTML css
HTML5与CSS3零基础入门
千人学习 2021-07-01 13:36:54

课程详细全面介绍了HTML5与CSS3，内容包括：常用标签，表单元素，表格，css样式，浮动，定位等知识点，课程以案例为导向，全程没有废话，本着极简的理念节约你的每一分钟，让你在最短的时间内系统掌握HTML5与CSS3

收起
html5,css3,jquery,js,php帮助文档chm格式合集
千次下载 热门讨论 2013-03-17 11:08:29

html5,css3,jquery,js,php帮助文档chm格式合集，对查询很有用！

收起
CSS3设置按钮的样式
万次阅读 多人点赞 2020-09-07 10:32:03

使用 CSS 来制作按钮，可以更有新意，更有趣，也可以自定义自己想要的样式平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势实现方式 .button { background-color: #4CAF50; /* Green */ ...

收起

html 按钮样式
《CSS3实战》配套源码part1
热门讨论 2012-02-01 12:57:39

此为《CSS3实战》的配套源码和插图，分三部分上传，此为第一部分。《CSS3实战》由国内资深Web前端工程师撰写，权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么《CSS 3实战》也许会让你在即将到来的Web...

收起
CSS3选择器大全
万次阅读 多人点赞 2018-08-16 11:31:08

1.CSS3选择器属性选择器在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 input[type="text"] { width:150px; display:block; ...

收起

选择器

HTML5+CSS3 精美登陆界面源码

微信小程序界面设计-小程序中CSS3样式精通课程

基于html5+css3实现的精美聊天界面demo

CSS3/jQuery自定义弹出窗口 多种弹出动画

【青山css】css3阴影效果属性详解及创意玩法

前言

属性介绍

多重阴影

创意用法

柔和边缘

立体效果

画画

过渡效果

HTML5 3D/CSS3 3D爱心动画项目实例源码

HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码

CSS3+HTML5+从入门到精通

HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册实例源码

css3实现书本翻页效果

css3翻页效果

CSS3 媒体查询

1. 什么是媒体查询

2. 媒体查询的语法规范

3. 应用：根据页面宽度改变背景变色

4. 媒体查询+外部链接引入CSS

4.1 语法规范

4.2 示例

5. 媒体查询+rem实现元素动态大小变化

CSS权威指南(第3版 中文版+英文版 附CSS3参考手册)

响应式web设计html5和css3实战 源代码

CSS CSS3 pdf 电子书大全 百度云

CSS3动画

Web前端基础全家桶教程（含HTML、CSS、 HTML5、CSS3）

20个CSS3动画实战案例开发

css3实现高斯模糊

CSS3动画 文档

CSS3 transition动画

CSS3 +HTML5入门到精通

CSS3添加动态圆点

细说CSS(CSS+CSS3)

css和css3的区别

HTML5与CSS3零基础入门

html5,css3,jquery,js,php帮助文档chm格式合集

CSS3设置按钮的样式

《CSS3实战》配套源码part1

CSS3选择器大全

CSS3/jQuery自定义弹出窗口多种弹出动画

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册实例源码

CSS权威指南(第3版中文版+英文版附CSS3参考手册)

响应式web设计html5和css3实战源代码

CSS CSS3 pdf 电子书大全百度云

CSS3动画文档