css实现动态扑克牌反转

HTML

<div class="tp"><input type="checkbox" name="a" id="box" /><label for="a">&lt<span>点这里</span></label><div class="b"><img src="/imgs/9.jpeg" alt="" /></div><div class="a"><img src="/imgs/A.jpeg" alt="" /></div><div class="j"><img src="/imgs/J.jpeg" alt="" /></div><div class="k"><img src="/imgs/K.jpeg" alt="" /></div></div>

CSS

.tp {display: flex;}img {width: 200px;height: 350px;border: 2px solid;border-radius: 20px;overflow: hidden;}.b {position: relative;top: 200px;left: 700px;transition: all 2s;}.a {position: relative;top: 200px;left: 495px;transition: all 2s;}.j {position: relative;top: 200px;left: 290px;transition: all 2s;}.k {position: relative;top: 200px;left: 85px;transition: all 2s;}#box:checked ~ .k {transform: rotateZ(23deg) translateX(79px) translateY(8px);}#box:checked ~ .a {transform: rotateZ(-10deg) translateX(-15px) translateY(-11px);}#box:checked ~ .b {transform: rotateZ(-24deg) translateX(-50px) translateY(-35px);}#box:checked ~ .j {transform: rotateZ(7deg) translateX(32px) translateY(6px);}

css实现动态扑克牌反转相关推荐

css实现提示信息,单纯使用CSS实现动态提示信息
单纯使用CSS实现动态提示信息效果,代码如下: CSS代码部分a.info { position:relative; z-index:0; background-color:#ccc; color:# ...
CSS设置动态超链接
CSS设置动态超链接 HTML中,超链接是通过标记<a>实现的,具体的地址使用标记<a>的href属性. <ahref="http://blog.csdn.ne ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
css动态阴影,css实现动态阴影、蚀刻文本、渐变文本效果
css实现动态阴影创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: .dynamic-shadow-parent { position: relative; z-index ...
before css 旋转_单标签！纯CSS实现动态晴阴雨雪
引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
CSS 3D动态立体图形
CSS 3D动态立方体 1. HTML <body><div class="box"><div class="test"> ...
径向渐变加阴影html,CSS径向渐变阴影 - 反转
从绘制椭圆阴影的Wordpress模板中获取一些预先存在的代码.阴影以椭圆形向下辐射.只有椭圆的下半部分可见,从而产生底部阴影效果.CSS径向渐变阴影 - 反转我只是想"反转"椭 ...
html 二级页面教程,css 实现动态二级菜单
动态实现简单的二级菜单当鼠标放到一级标签上时,鼠标会变成小手的形状展示二级菜单,源码如下,复制即可直接使用 Document * {margin: 0; padding: 0;} ul { lis ...
纯CSS实现动态晴阴雨雪
1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...

css实现动态扑克牌反转

css实现动态扑克牌反转相关推荐

最新文章

热门文章