css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

水深无声 2022-09-03 01:26 192阅读 0赞

CSS

语言：

CSSSCSS

确定

\#animation\{

width:180px;

height:180px;

background-image:url(http://www.qqttxx.com/upimg/allimg/120213/co120213120630-12.jpg);

border-radius:90px;

border:8px solid \#ffffff;

\-webkit-animation:swing 1s .2s ease both;

\-moz-animation:swing 1s .2s ease both;\}

@-webkit-keyframes swing\{

20%,40%,60%,80%,100%\{-webkit-transform-origin:center center\}

20%\{-webkit-transform:rotate(15deg)\}

40%\{-webkit-transform:rotate(-10deg)\}

60%\{-webkit-transform:rotate(5deg)\}

80%\{-webkit-transform:rotate(-5deg)\}

100%\{-webkit-transform:rotate(0deg)\}

\}

@-moz-keyframes swing\{

20%,40%,60%,80%,100%\{-moz-transform-origin:center center\}

20%\{-moz-transform:rotate(15deg) \}

40%\{-moz-transform:rotate(-10deg)\}

60%\{-moz-transform:rotate(5deg)\}

80%\{-moz-transform:rotate(-5deg)\}

100%\{-moz-transform:rotate(0deg)\}

\}

\#animation:hover\{

border-radius:90px;

border-color:\#72ae00;

border-left:8px solid \#ddcc00;

border-right:8px solid yellow;

border-top:8px solid \#9900cc;

\-webkit-animation:rotateIn 1s .2s ease both;

\-moz-animation:rotateIn 1s .2s ease both;\}

@-webkit-keyframes rotateIn\{

0%\{-webkit-transform-origin:center center;

\-webkit-transform:rotate(-200deg);

opacity:0\}

100%\{-webkit-transform-origin:center center;

\-webkit-transform:rotate(0);

opacity:1\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS圆角大杀器，使用滤镜构建圆角及波浪效果

目录 1，border-radius实现圆角 2，filter: contrast() 配合 filter: blur() 实现圆

梦里梦外;/ 2024年02月25日 01:48/ 0 赞/ 3 阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 116 阅读

相关 css圆角三角形3个圆角_CSS中的圆角

css圆角三角形3个圆角 CSS | 圆角 (CSS | Rounded Corners) border-radius property is commonly use

墨蓝/ 2023年03月05日 09:57/ 0 赞/ 60 阅读

相关 css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

CSS 语言： CSSSCSS 确定 \animation\{ width:180px; height:180px; background-image:url(h

水深无声/ 2022年09月03日 01:26/ 0 赞/ 193 阅读

相关 CSS3圆角详解

作者： [阮一峰][Link 1] 日期： [2010年12月 9日][2010_12_ 9] CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支

分手后的思念是犯贱/ 2022年08月21日 13:49/ 0 赞/ 197 阅读

相关 css3图片旋转动画

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html

妖狐艹你老母/ 2022年06月13日 13:47/ 0 赞/ 270 阅读

相关 CSS3 transform 旋转、偏移、缩放属性，CSS3 filter 滤镜，实现图像特效

目录 CSS3 transform 属性 rotate 2D 旋转 translate 2D 偏移 scale 2D 缩放 skew 2D 倾斜 CSS3 filt

喜欢ヅ旅行/ 2022年05月12日 16:56/ 0 赞/ 440 阅读

相关 Css3圆角边框

1行代码搞定CSS3的圆角。 webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px; fire

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 318 阅读

相关【CSS3】圆角

![在这里插入图片描述][2019030514481083.png] 浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。 \-webkit- 或 -mo

Myth丶恋晨/ 2022年03月12日 06:57/ 0 赞/ 301 阅读

相关 CSS 笔记——阴影、圆角、旋转、光标

7. 阴影、圆角、旋转、光标（1）box-shadow 阴影基本语法 text-shadow: h-shadow v-shadow blur co

╰+攻爆jí腚メ/ 2022年01月12日 12:03/ 0 赞/ 376 阅读