hover切换卡片 - 踏得网

hover后更改当前卡片或者按钮样式以及内容

css3, hover, card

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2023
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: orange;
    font-size: 12px;
}
.clear {
    clear: both;
}
.container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    text-shadow: 0px 0px 5px orange;
    text-align: center;
    line-height: 100px;
    font-size: 2rem;
    float: left;
    margin-left: 20px;
    margin-top: 20px;
}
.container .before,
.container .after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    transition-duration: 0.35s;
    -webkit-transition-duration: 0.35s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
}
/*默认行为*/

.container .before {
    background: white;
    left: 0px;
    color: black;
}
.container .after {
    background: black;
    left: 100%;
    color: #fff;
}
.container:hover .before {
    left: -100%;
}
.container:hover .after {
    left: 0%;
}
/*demo1 由左而右*/

.container.demo1 .before {
    left: 0px;
}
.container.demo1 .after {
    left: -100%;
}
.container.demo1:hover .before {
    left: 100%;
}
.container.demo1:hover .after {
    left: 0%;
}
/*demo2 由上而下*/

.container.demo2 .before {
    left: 0px;
}
.container.demo2 .after {
    top: -100%;
    left: 0px;
}
.container.demo2:hover .before {
    top: 100%;
    left: 0px;
}
.container.demo2:hover .after {
    top: 0%;
}
/*demo3 由下而上*/

.container.demo3 .before {
    left: 0px;
}
.container.demo3 .after {
    top: 100%;
    left: 0px;
}
.container.demo3:hover .before {
    top: -100%;
    left: 0px;
}
.container.demo3:hover .after {
    top: 0%;
}
/*demo4 扁的由下而上*/

.container.demo4 .before {
    left: 0px;
}
.container.demo4 .after {
    top: 100%;
    left: 0px;
}
.container.demo4:hover .before {
    height: 0px;
}
.container.demo4:hover .after {
    top: 0%;
}
/*demo5 扁的由上而下*/

.container.demo5 .before {
    left: 0px;
}
.container.demo5 .after {
    top: -100%;
    left: 0px;
}
.container.demo5:hover .before {
    height: 0px;
    top: 100%;
}
.container.demo5:hover .after {
    top: 0%;
}
/*demo6 扁的由左而右*/

.container.demo6 .before {
    left: 0px;
}
.container.demo6 .after {
    top: 0%;
    left: -100%;
}
.container.demo6:hover .before {
    width: 0px;
    left: 100%;
}
.container.demo6:hover .after {
    left: 0%;
}
/*demo7 扁的由右而左*/

.container.demo7 .before {
    left: 0px;
}
.container.demo7 .after {
    top: 0%;
    left: 100%;
}
.container.demo7:hover .before {
    width: 0px;
}
.container.demo7:hover .after {
    left: 0%;
}
/*demo8 */

.container.demo8 .before {
    left: 0px;
}
.container.demo8 .after {
    left: 0%;
    -webkit-transform: scale(0);
}
.container.demo8:hover .before {
    -webkit-transform: scale(0);
}
.container.demo8:hover .after {
    -webkit-transform: scale(1);
}
/*demo9 */

.container.demo9 .before {} .container.demo9 .after {
    top: 100%;
    left: 100%;
}
.container.demo9:hover .before {
    width: 0%;
    height: 0%;
}
.container.demo9:hover .after {
    left: 0%;
    top: 0%;
}
/*demo10 */

.container.demo10 .before {} .container.demo10 .after {
    top: 100%;
    left: -100%;
}
.container.demo10:hover .before {
    width: 0%;
    height: 0%;
}
.container.demo10:hover .after {
    left: 0%;
    top: 0%;
}
/*demo11 */

.container.demo11 .before {} .container.demo11 .after {
    top: -100%;
    left: -100%;
}
.container.demo11:hover .before {
    width: 0%;
    height: 0%;
}
.container.demo11:hover .after {
    left: 0%;
    top: 0%;
}
/*demo12 */

.container.demo12 .before {} .container.demo12 .after {
    top: -100%;
    left: 100%;
}
.container.demo12:hover .before {
    width: 0%;
    height: 0%;
}
.container.demo12:hover .after {
    left: 0%;
    top: 0%;
}

HTML

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>css3制作经验hover切换效果</title>
</head>

</html>

hover后更改当前卡片或者按钮样式以及内容

css3, hover, card

编辑器支持Emmet

快捷键

hover后更改当前卡片或者按钮样式以及内容

css3, hover, card

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

CSS3实现动态删除线式hover效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：