举例: CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。 @keyfra            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-01-05 14:07:48
                            
                                171阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如 但是因为在电脑上安装的字体有限,所以很多时候我们都找不到自己想要的字体,这时候我们就需要使用css3提供的@font-face来实现个性化字体了。  但是说@font-face是css3中的新特性是不准确的,因为在css2中就已经支持了这一特性,ie浏览器当时也已经支持它了,只是其他浏览器还不支持。而目前,各大浏览器都            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-05-03 11:17:56
                            
                                361阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS3自定义字体写法 ps:最好英文 中文字体太大 影响加载速度 (中文字体网上的ttf大多数是gb2312 不过页面UTF-8格式可以用 不会乱码 <meta charset="UTF-8"> 会自动转化为utf-8)<pre><!DOCTYPE html><html> <head> <meta            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-12 15:27:00
                            
                                127阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-05-07 14:48:13
                            
                                209阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS3自定义图标悬浮菜单是一款基于HTML5+CSS3实现的可自定义小图标悬浮菜单。查看原文查看在线演示Demo和更多原文内容教程:http://ibloger.net/article/1200.html            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-02-23 11:42:10
                            
                                845阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            自定义滚动条实现
此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:
滚动条组成部分
1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)
3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
4. ::-we            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-13 20:01:52
                            
                                452阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-14 13:01:00
                            
                                236阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            .editor{ overflow:hidden; height:640px; padding:0 45px; border: 0 none; outline: none; } .editor::-webkit-scrollbar{ //设置整个滚动条宽高 width:6px; height:100%; } .editor::-webkit-scrol...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-09-14 17:12:00
                            
                                360阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            一、线性渐变在CSS中部分属性需要添加浏览器前缀-moz-:表示火狐内核浏览器-webkit-:表示谷歌内核浏览器-ms-:表示IE内核浏览器-o-:表示欧朋(opera)内核浏览器<style>
.div1{background-p_w_picpath:linear-gradient(to top,red,green);width:400px;height:180px;}            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2016-07-05 21:34:37
                            
                                781阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS3属性calc函数(CSS3)<!DOCTYPE html><html lang="en"><head>    <meta charset="\            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-20 10:06:01
                            
                                223阅读
                            
                                                                             
                 
                
                             
         
            
            
            
              在网页中用到图片轮播效果,单纯的隐藏、显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间。css3的出现,让动画变得不再是问题,而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。  一般图片轮播就是三四张图片:<div class="wrap">
    <div class="carousel">
        &            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-04 09:56:04
                            
                                49阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的,看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-04-06 14:38:34
                            
                                269阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            "CSS" 列指示该属性是在哪个 CSS 版本(CSS1、CSS2 或 CSS3)中定义的。CSS3 动画属性(Anima            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-04-05 22:46:29
                            
                                83阅读