举例: 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评论
                            
                                                 
                 
                
                             
         
            
            
            
            今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的,看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-04-06 14:38:34
                            
                                269阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
              在网页中用到图片轮播效果,单纯的隐藏、显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间。css3的出现,让动画变得不再是问题,而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。  一般图片轮播就是三四张图片:<div class="wrap">
    <div class="carousel">
        &            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-04 09:56:04
                            
                                49阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
                之前我们要是想使用漂亮的字体只能使用图片字体图片,即制作过程偏慢,用户体验也不够好,对于计算机的加在也是一种负荷,现在css3为我们提供了新的自定义字体属性: @font-face,不但使用简单,而且几乎能解决了我们之前的所有问题。    先上代码:<!DOCTYPE html><h            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2016-07-13 11:17:01
                            
                                1409阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupiao/images/p6/p6_wz1.png" alt="" class="p6_wz1"> <input type="file" name="file_tem            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-16 17:37:00
                            
                                93阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            前言
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。
演示
来看看这2个滚动条demo: demo1(图片版)、demo2(纯CSS3版)
滚动条组成
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-12-06 15:02:00
                            
                                97阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的。 当然我们可以在这里查看DEMO演示。 接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-05-12 12:19:00
                            
                                27阅读
                            
                                                                                    
                                2评论