作者：MoeJue（xxx@example.com）

css3的随机背景图片淡入淡出切换特效 演示效果如本篇文章背景所示
看大家扒我的幻想领域二次元限定版扒的比较累，扒了大半个小时的，抽空整理一下发出来
设计之初本来是打算使用jQuery进行实现的，但是注意到了css3的@keyframes 规则，css3已经强大到曾经只有js才能实现的效果

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

核心css部分(记得切换图片地址)

body { background: #000; background-attachment: fixed; word-wrap: break-word; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat }

ul { list-style: none }

.cb-slideshow li:nth-child(1) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099) }

.cb-slideshow li:nth-child(2) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159) }

.cb-slideshow li:nth-child(3) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149) }

本文2018-05-16首发于阿珏酱のBlog，最后修改于2018-05-16

作者：MoeJue（xxx@example.com）

经常会在一些网站看到评论区，评论人的头像当鼠标经过会360°旋转

先看一下效果

.tximg{ height:300px; border-radius:50%; border:2px solid green; /*变化规则*/ transition:all 2s; } .tximg:hover{ /* 变化动作 定义2d旋转，参数填写角度 */ transform:rotate(360deg); }

css部分

img{ height:300px; border-radius:50%; border:2px solid green; /*变化规则*/ transition:all 2s; }

img:hover{ /* 变化动作 定义2d旋转，参数填写角度 */ transform:rotate(360deg); }

HTML部分(很简单，就一张图片)

3D旋转效果(前台显示样式好像还是冲突了-。-)

.div{ width:300px; height:300px; border:1px solid red; /*如果希望看到3d效果，需要在动的这个元素的父元素，增加一个perspective属性*/ perspective:300px;/*3D 元素距视图的距离，一般与图片的高一致效果最佳*/ } .img{ width:300px; height:300px; border:1px solid red; /*变化规则*/ /*设置旋转元素的原点位置*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*变化动作*/ transform:rotateX(60deg); }

CSS代码

div{ width:300px; height:300px; border:1px solid red; /*如果希望看到3d效果，需要在动的这个元素的父元素，增加一个perspective属性*/ perspective:300px;/*3D 元素距视图的距离，一般与图片的高一致效果最佳*/ } img{ width:300px; height:300px; border:1px solid red; /*变化规则*/ /*设置旋转元素的原点位置*/ transform-origin:bottom; transition:all 2s; }

本文2017-07-10首发于阿珏酱のBlog，最后修改于2017-07-10

作者：MoeJue（xxx@example.com）

先上效果图，先睹为快。(这绝对不是一张图片。恩这话怎么怪怪的)

不要问我iPhone几 ，因为我也不知道，没用过，你懂得。

css样式部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*设置div元素的圆角边框*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*距离上边距10px 左右居中*/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*当宽高相同时，则为圆*/ margin:10px auto; }

/*:before 选择器在被选元素的内容前面插入内容。*/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*即使插入的内容为空也需要写，否则不显示*/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

晚些我又加了点玩意上去

本文2017-07-03首发于阿珏酱のBlog，最后修改于2017-07-03