这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
简要教程 这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果，均由按钮的伪元素和CSS3 animation来制作完成。 查看演示 下载插件 使用方法 HTML结构 该效果通过超链接来制作按钮，例如第一种Swipe效果的HTML代码为：<a class="btn-0" href="#">Swipe</a> CSS样式 为了方便，特效中为除了<i>、<em>、<b>、<strong>和<span>之外的所有元素都添加了动画过渡效果。h...
这篇文章主要介绍了CSS3制作文字流光渐变特效的制作方法，有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你有的帮助！先上个效果图下面先上代码HTML部分<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><p class="masked"><h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4> </p></body> </html>CSS部分 <style>.masked h4{display: block;width: 600px;hei...
本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" c...
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
一：动画(animation)的参数详解由于上面用到了animation动画，这里详细介绍下这个animation的参数。简介CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。语法<single-animation> = <single-animation-name> || <time> || <single-animation-...
CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#） 还有w3school上面的这句话早已经过时：目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit，还有其他浏览器的一些...
本文主要介绍了用React加CSS3实现微信拆红包动画效果，微信红包曾经引爆过一系列的营销热潮，相信大家对于这种红包形式并不陌生，这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果，希望能帮助到大家。用CSS3绘制红包.redpack {height: 450px;background: #A5423A;width: 300px;left: 0;top: 0;border-radius: 10px;margin: 0 auto; } .topcontent {height: 300px;border: 1px solid #BD503A;background-color: #BD503A...
本文主要介绍了css3编写浏览器背景渐变背景色的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。效果如下：知识点：rgb全色循环算法，HEX与RGB颜色转换算法、CSS3颜色渐变，CSS3渐变色兼容ie方法，定时器与循环，函数封装,数组应用等。源码：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Auth...
在css二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。在css三维世界里，扩展出了一个z轴，这个z轴垂直于屏幕并指向外面。下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考，希望能帮助到大家。首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴...
项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。本文主要介绍了CSS3 实现弹幕的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1.首先创建弹幕区域<p class="barrage"> <p class="mask"> <!--//弹幕内容--> </p> </...
这篇文章主要介绍了css3实现一个p设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下引子以前做网页布局的时候，一个p只能设置一张背景图片，设置多个背景的话，要用多个p嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个p只能设置一个背景的问题，使一个p可以设置多个背景图片。backgroun...
今天要实现的内容如下图所示：有了css3的动画属性，实现起来非常的简单。html布局：<p class="pointer"><p></p> </p>让.pointer的p放在你想要他显示方，p放的是指针箭头图的地片，而.pointer的p是盒子，因为裹这个箭头的盒要实现向上移动的效果，所以p的高度要比箭头高度高出10px。css样式：.pointer{position: absolute;height: 3.8rem;bottom: 3rem;width: 100%; } .pointer p{animation: anima-pointer 2s infinite;position: a...
only-child选择器“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。HTML代码：<p class="post"><p>我是一个段落</p><p>我是一个段落</p></p><p class="post"><p>我是一个段落</p></p>CSS代...
在CSS3里引入的很多新特征中，这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值，有兴趣的可以了解一下对于CSS属性 border ，相信所有的WEB开发人员都非常熟悉。我们可通过设置HTML元素的 border 的宽度、颜色、样式，来让HTML元素表现出不同的边框，比如双线、虚线、圆点线。但不管你怎么设置，这些都是一些非常原始的做法。从CSS3起，我们有了一个新的属性： border-image ，它能让你用漂亮的小图片来围绕H...