分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress通过CSS3添加图片效果
+ 3

WordPress通过CSS3添加图片效果

WordPress通过CSS3添加图片效果-BanYuner

现在每天就在不断的折腾这个主题,这个主题说实话,从我开始安装就没有停止过折腾了,每天折腾一点,每天折腾一点,时间长了,感觉主题都变动了,不过没事,生命在于折腾。

好吧,不废话了,直接将代码附上吧,一共九段代码,大家自己觉得什么代码有效果的话就使用起来吧。

内边框 Inset Border

body > div
{                    
width:483px;
height:298px;
margin:50px auto;
background:#676470;
color:#fff;            
font-family:Lato;
font-weight:900;
font-size:3.4em;            
text-align:center;
line-height:298px;           
transition:all 0.3s ease;            
}
.border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}

颜色渐变 color

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.color:hover {
background: #53a7ea;
cursor: pointer;
}

淡入 fade in

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s;
}
.fade {
opacity: 0.5;
}
.fade:hover {
opacity: 1;
}

放大 Grow

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}

旋转 rotate

body > div {
margin: 80px auto;
width: 283px;
height: 198px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 1.4em;
text-align: center;
line-height: 198px;
transition: all 0.3s ease;
}
.rotate:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}

3D阴影 3D shadow

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.threed:hover {
box-shadow: 1px 1px #53a7ea,  2px 2px #53a7ea,  3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}

收缩 Shrink

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}

摇摆 swing

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
@-webkit-keyframes 
swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes 
swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.swing:hover {
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

方形变圆形 Square to Circle

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.circle:hover {
border-radius: 50%;
}

上面的代码大家可以适当作为调整,要是有不懂的可以直接百度吧。

关注我们 打赏 分享此文

微信扫码,关注我们

扫码,支持我

WordPress通过CSS3添加图片效果

支付宝(点击图片切换)

扫码,支持我

WordPress通过CSS3添加图片效果

微信(点击图片切换)

扫码,手机看

WordPress通过CSS3添加图片效果
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress基础教程-文章内容中如何添加音频文件

    WordPress基础教程-文章内容中如何添加音频文件

    目前基础教程已经基本完毕了,每篇文章都是用自己的语言写出来的,有兴趣查看其他教程的用户可以前往这里查看所有相关教程:教程合集 添加音频文件还...

    点击查看
  • WordPress评论上方显示评论用户列表

    WordPress评论上方显示评论用户列表

    一段时间之前,我在我的博客里面添加了下面的功能,这个功能我一开始觉得貌似没有人会喜欢或者说会显得比较多余,但是今天一个朋友问我如何实现这个功...

    点击查看
  • WordPress自动截取文章首段限定字数做为摘要

    WordPress自动截取文章首段限定字数做为摘要

    今天一个朋友问我这个问题,说实话,我也不像百度了,所以直接把 DUX 的方法介绍给大家了,我个人还是比较看好这个方法的。 DUX 实现这个功...

    点击查看
WordPress通过CSS3添加图片效果
7 + 8 =
  1. 2楼
    一曲长歌辞烟雨
    为什么都没有预览或者演示呢?这样仅仅看代码看不出结果,也就感觉不到文章的价值了 :roll:
    一曲长歌辞烟雨 来自天朝的朋友 火狐浏览器 Windows 10 内蒙古呼和浩特市 中国电信云计算中心 9个月前 (09-06)回复
    • 帅气小琦琦
      @一曲长歌辞烟雨 这个文章是网络上面收集过来的,所以没有展示图,确实是有点看不下去。将就一下吧,毕竟自己折腾比什么都好玩
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (09-06)回复
  2. 1楼
    楚书业
    这个可以收藏!
    楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动 1年前 (2016-03-18)回复
    • 帅气小琦琦
      @楚书业 嗯嗯 我个人觉得还是比较有效果的 但是我使用了一下就觉得有点多余了
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1年前 (2016-03-18)回复