摘要:欢迎交换友链进击的程序媛微博江小湖本文讲介绍控制六种方法触发,以及事件的使用。事件事件会在结束后触发。有没有渐变开始的事件目前只有有事件,目前未有此标准。
欢迎交换友链 Laker"s Blog--进击的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker
本文讲介绍:hover、:active、:focus、:checked、Media Queries、JavaScript控制六种方法触发CSS3 transition,以及 transitionend 事件的使用。
:hover最常见的是用hover:
:hover.hover { width: 100px; height: 100px; background: #222; color: white; text-align: center; transition: all 2s ease; } .hover:hover { width: 200px; height: 200px; }
Demo
:activemousedown s时触发:
:active.active { width: 100px; height: 100px; background: #222; color: white; text-align: center; transition: all 2s ease; } .active:active { width: 200px; height: 200px; }
Demo
:focus文本框聚焦时(这个在很多网站的搜索框的动画效果里用到):
.focus input, .focus textarea { width: 200px; transition: width 1s ease; } .focus input:focus, .focus textarea:focus { width: 300px; }
Demo
:checked用于checkboxes 和 radio buttons 被选中时:
Input 1input[type="checkbox"]:checked { height: 20px; transition: all 1s ease; } input[type="checkbox"]:checked { width: 30px; }
Input 2
Input 3
Input 4
Demo
Media Queries改变浏览器窗口大小时触发:
media.media { width: 200px; height: 200px; background: #222; color: white; text-align: center; transition: width 1s ease; } @media only screen and (max-width : 960px) { .media { width: 100px; height: 100px; } }
Demo
JavaScript事件触发CSS3 transition通过 JavaScript 或者 jQuery 添加、删除class来完成动画,CSS格式类似:hover。
例如:
以 click 事件为例,当点击方块时,变化长宽、背景色:
HTML:
CSS:
.box { width: 200px; height: 200px; background: black; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .box.clicked { width: 300px; height: 300px; background: blue; }
JavaScript:
$(".box").click(function() { $(this).toggleClass("clicked"); });
Demo
如果用原生JavaScript,可以自己写个添加和删除类的函数。
transitionend 事件transitionend 事件会在 CSS transition 结束后触发。兼容Chrome、Firefox、Safari、IE10+:
element.addEventListener("transitionend", callback, false);
为保证低版本兼容性可以写webkitTransitionEnd(WebKit )、otransitionend(Opera)、MSTransitionEnd(IE 10+)、transitionend(Mozilla)。详见此讨论。
有没有渐变开始的事件?目前只有IE 10+ 有 transionstart 事件,W3C目前未有此标准。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78368.html
摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
摘要:欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了,想看到搜索框动画效果很不错,想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置,有两个属性引起我的注意和,可以猜测这个动画的实现由实现的渐变。 欢迎交换友链 Lakers Blog--进击的程序媛Github:https://github.com/younglaker微博: 江小湖Laker ...
摘要:欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了,想看到搜索框动画效果很不错,想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置,有两个属性引起我的注意和,可以猜测这个动画的实现由实现的渐变。 欢迎交换友链 Lakers Blog--进击的程序媛Github:https://github.com/younglaker微博: 江小湖Laker ...
摘要:绝对底部前端掘金来自国外的设计达人,纯,可以实现当正文内容很少时,底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...
摘要:和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型,即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中,新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。 除了html5的新特性,CSS3的新特性也是面试中经常被问到的。 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。 element1~...
阅读 3069·2021-09-28 09:43
阅读 901·2021-09-08 09:35
阅读 1440·2019-08-30 15:56
阅读 1182·2019-08-30 13:00
阅读 2732·2019-08-29 18:35
阅读 1828·2019-08-29 14:07
阅读 3432·2019-08-29 13:13
阅读 1332·2019-08-29 12:40