css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画

可重复使用的变数transition-timing-function 属性，比内置更强大ease ，ease-in ，ease-out 和ease-in-out 。

HTML

CSS

:root {

--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);

--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);

--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);

--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);

--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);

--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);

--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

}

.easing-variables {

width: 50px;

height: 50px;

background: #333;

transition: transform 1s var(--ease-out-quart);

}

.easing-variables:hover {

transform: rotate(45deg);

}

说明

变量是在:root 与表示文档的树的根元素匹配的CSS伪类。用HTML，:root 表示元素，并且与选择器相同html ，只是其特异性较高。

css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画相关推荐

html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺发布时间:2021-04-29 15:39:28 来源:亿速云阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
css中两行图片整齐排布,css 标题一行图片两行文字的排列方法以及相关问题处理...
今天就遇到了这么一个效果,代码原理比较简单就是图片float:left;,但是如果在做一个比较复杂的模板时,有可能遇到很多问题,使标题文字不能和图片对齐. 今天遇到一个问题,错误效果如下正确显示应为 ...
css中设置图片上下移动,CSS如何实现图片上下垂直居中
标签: 方法一: 使用margin方式,使图片在div中上下垂直居中.margin-top值的计算方式是:div的高度/2-图片高度/2. 代码实例如下: 蚂蚁部落 div { height:400p ...
css中设置首字下沉效果,CSS如何实现首字下沉效果？
我们在开发 web 页面时,如果是涉及到文字段落的开发,需要对文字设置一些特殊样式以增强 web 页面美观,提升用户体验度.那么今天 w3cschool 小编来教大家 CSS 如何实现首字下沉效果. ...
css怎么设置图片卷角效果,CSS设计教程：轻松实现卷角效果
我们将做成这样: Step 1 我们将开始制作内容框的头部, 创建一个新图层命名为header, 然后设置前景色为#818283, 现在抓取一个矩形(262x27), 确保你设置为'填充像素',然后创 ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
CSS实现鼠标悬停时图标旋转
效果图: 示例代码: <div class="test">其他 <span class="icon">^</span>< ...
html图片定位代码怎么写,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位首先设置固定图片的css属性是 ...

css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画

css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画相关推荐

最新文章

热门文章