分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress通过CSS3添加图片效果
+

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留言数据到搜狐畅言

    前段时间才说了,多说因为不知道什么原因已经决定关闭了,那么我们需要做的事情就是导出数据了,但是我有理由相信,习惯多说的用户可能不会习惯Wor...

    点击查看
  • 帅气小琦琦
  • 一曲长歌辞烟雨
  • 楚书业
WordPress通过CSS3添加图片效果
8 + 3 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 2楼
    一曲长歌辞烟雨
    为什么都没有预览或者演示呢?这样仅仅看代码看不出结果,也就感觉不到文章的价值了 :roll:
    一曲长歌辞烟雨 7个月前 (09-06)回复
    • 帅气小琦琦
      @一曲长歌辞烟雨 这个文章是网络上面收集过来的,所以没有展示图,确实是有点看不下去。将就一下吧,毕竟自己折腾比什么都好玩
      帅气小琦琦    7个月前 (09-06)回复
  2. 1楼
    楚书业
    这个可以收藏!
    楚书业 1年前 (2016-03-18)回复
    • 帅气小琦琦
      @楚书业 嗯嗯 我个人觉得还是比较有效果的 但是我使用了一下就觉得有点多余了
      帅气小琦琦    1年前 (2016-03-18)回复